08. HTML 구획과 시맨틱 요소
💡 구획을 나누기 위해서
<div>를 사용하지만, 특정한 용도를 나타내기 위해서 시멘틱 태그들을 이용한다.
○ 구획을 나누는 태그
<div> : division
- 순수 컨테이너 : 스스로는 아무것도 표현하지 않음, 용도를 추론할 수 없는 컨테이너 역할만 한다.
- 다른 요소들을 묶거나, 문서의 구획을 나누는데 사용
- 전역 (공통) 속성만 가진다.
○ 시멘틱 태그 (semantics)
각 구획의 용도와 내용의 의미를 태그로써 알 수 있도록 한다. 검색엔진 등이 사이트를 분석하는데에 도움을 준다.
<header>
- 페이지의 최상단에 위치한다.
- 일반적으로 제목, 로고, 검색창 등의 내용을 포함한다.
- 페이지의 소개 및 탐색에 도움을 준다.
<footer>
- 페이지의 최하단에 위치한다.
- 일반적으로 작성자, 저작권 정보, 관련 문서 등을 포함한다.
<nav>
- 현재 페이지 내 구획 (서브페이지) 또는 다른 페이지로의 링크들을 포함하는 구역
<aside>
- 문서의 주 내용과 간접적으로 연관된 부분
- 주로 사이드바 등에 사용
<main>
<body>의 주요 컨텐츠- 메인 컨텐츠가 이 구획에 들어간다.
<section>
- 컨텐츠 내 큰 단위의 독립적인 구획
- 다른 시멘틱 태그의 의미에 해당하지 않는 구획
<article>
- 독립적으로 재사용되거나 반복적으로 나타나는 구획
- 게시판이나 뉴스, 갤러리의 목록 상 각 항목
훈이야 화이팅