섹션이란
- <header>, <nav>, <main> 등과 같이 구조를 잡는데 보편적으로 많이 쓰이는 시멘트 태그들을 말합니다.
1. <header>
- html5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역입니다.
2. <body>
- 문서의 본문 영역을 표시합니다.
- 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어집니다.
- 또한 body요소는 브라우저가 렌더링해야 할 범위를 알려줍니다.
3. <nav>
- HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다.
4. <mian>
- 해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용합니다.
- 따라서 문서 내에서 단 한번만 사용이 가능합니다.
- article, aside, footer, header, nav 등의 태그 밑에 가지 않습니다.
5. <aside>
- html5에 새롭게 추가된 요소로서, 페이지 전체 내용과는 어느 정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.
6. <section>
- html5에 새롭게 추가된 요소로서, HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 사용합니다.
- 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도입니다.
- 관련있는 내용을 section요소로 묶어 표시합니다.
- 섹션은 독립적인 영역이고 섹션마다 제목 체계를 가질 수 있습니다.(e.g. h1, h2)
7. <article>
- html5에 새롭게 추가된 요소로서, 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용합니다.
- 게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠 등이 article에 해당됩니다.
- 일반적인 상황에서는 section태그가 article태그를 포함합니다.
- 하지만 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article태그가 section태그를 포함할 수도 있습니다.
- section이 관련 있는 내용을 묶는 역할이라면 article은 관련 있는 내용 중 독립적으로 구성된 글을 별도로 묶는 역할입니다.
- article 영역 내에 헤더(header)와 푸터(footer)를 둘 수 있습니다.
8. <footer>
- 문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용합니다.
- 웹 문서 맨 아래쪽에 있으며 보통 저자(author) 정보, 저작권, 연락처, 연관 페이지 등으로 구성된 영역입니다.
- 하나의 HTML 문서에는 여러 개의 <footer> 태그가 포함될 수 있습니다.
오늘은 섹션과 관련된 태그들에 대해 알아보았습니다.
문서를 만들 때 가장 먼저 하는 구조를 짤 때 사용하는 태그들인 만큼 자주 사용하고 중요한 태그들이니 특징을 잘 알고 사용하는 것이 중요하겠습니다!!