CSS day17

시맨틱 태그

시맨틱 태그

잠시 HTML로 돌아가 시맨틱 태그에 대해 알아보자. 시맨틱 태그란 이름 자체만으로 브라우저나 개발자들에게 의미를 전달 할 수 있는 태그로서 문장 구조를 파악하는데 중요한 역할을 하는 태그를 의미한다.

<div id="container">
    <header>
        ...
        <nav>
            ...
        </nav>
    </header>
    <main class="contents">
        <section>
            <h2>제목</h2>
            ...
        </section>
        <section>
            <h2>제목</h2>
            ...
        </section>
    </main>
    <footer>
        <section>
            ...
        </section>
    </footer>
</div>

위의 코드를 보면 태그의 이름으로 어느정도의 웹 문서의 역할을 알 수 있다. 시맨틱 태그의 종류를 자세히 알아보자.

<header>
- 말그래로 머리말 영역으로 문서 또는 섹션의 헤더를 의미
- 하나의 문서 안에 여러개 <header> 태그를 사용할 수 있음
- 사이트에서 주로 맨 위쪽이나 왼쪽에 있으며, 검색창이나 사이트 메뉴를 삽입

<nav>
- 네비게이션의 기능
- 다른 영역, 사이트, 다른 문서, 사이를 탐색할 수 있는 링크의 집합
- 메뉴에 사용

<main>
- 문서의 주요 컨텐츠를 나타냄
- 사이드바, 탐색링크, 로고, 검색양식, 저작권 등 문서에 반복되는 컨텐츠에 포함시키면 안됨
- 한페이지에 한번만 사용

<section>
- 제목을 갖고 있으면서 문서 전체와 관련이 있는 컨텐츠 집합
- 공지사항, 포스트, 댓글
- <article> 자식으로 섹션이 올 수 있음
- 섹션은 반드시 제목 태그를 갖음

<aside>
- 사이드바라고 불리며 광고영역 등으로 활용
- 문서와 관련 없는 영역

<footer>
- 꼬리말 또는 바닥글
- 회사소개, 약관, 저작권, 제작 정보등을 표시
- 연락처 사용할 때는 <address> 태그를 사용