html : 레이아웃태그 기본&활용 공부
ⓑ 그룹 div
* 2개 이상의 인라인 or 블록 요소를 묶어주는 그룹 태그입니다.
<div></div>
ⓘ 인라인 그룹 span
* 2개 이상의 인라인 요소를 묶을 때 사용합니다.
* 의미없는 디자인 위치를 묶을 때 사용합니다.
<span></span>
ⓑ HTML5 semantic tag
* HTML5에서 생성된 의미있는(semantic) 태그 입니다.
1. 과거 header 요소가 있을 때 (아래)와 같이 작성하는 방식을
<!--semantice tag before-->
<div id="header"></div>
2. HTML5에서 의미적인 태그로 생성하여 아래와 같이 명령할 수 있도록 업데이트되었습니다.
시멘틱태그로 생성된 HTML5태그는 div가 아닌 아래 방식으로 작성해야합니다.
<!--semantice tag after-->
<header></header>
<nav></nav>
<section></section>
<aside></aside>
<article></article>
<footer></footer>
<figure></figure>
시멘틱 태그의 각 의미와 활용
1. <header></header>
* 로고 및 내비게이션을 묶어주는 웹 사이트 레이아웃 태그입니다.
* 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
2. <nav></nav>
* 로고 및 웹사이트 주요 내비게이션을 묶어주는 웹 사이트 레이아웃 태그입니다.
* 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
3. <section></section>
* 문서의 독립적인 구획을 나타내며 제목(H)을 포함하는 경우가 많습니다(필수는 아닙니다)
4. <aside></aside>
* 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
5. <article></article>
* 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
* 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
6. <footer></footer>
* 웹페이지 가장 하단에 위치합니다.
* 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
7. <figure> 이미지<figcaption>설명</figcaption> </figure>
* 독립적인 콘텐츠를 표현합니다.
* 주로 이미지와 그에 대한 설명을 표현 할 때 묶음(figure) 설명(figcaption)순으로 사용합니다.
8. <details> <summary>요약</summary> 내용 </details>
* "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다
* 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.
* ie는 지원하지 않습니다.
9. <main></main>
* 문서 <body>의 주요 콘텐츠를 나타냅니다
* 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
* ie는 지원하지 않습니다.
10. <mark></mark>
* 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
11. <time datetime></time>
* 시간의 특정 지점 또는 구간을 나타냅니다.
* ie는 지원하지 않습니다.
* datetime 속성 : 요소의 시간 또는 날짜 값을 나타냅니다.
* datetime 속성을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.
ex) <time datetime="2022-12-25"></time>
ex) <time datetime="12-25"></time>
ex) <time datetime="13:00"></time>
ex) <time datetime="PT1H30M"></time>
