HTML -웹문서 구조를 만드는 시맨틱 태그

시맨틱 태그는 무엇일까?

• HTML의 태그는 그 이름만 봐도 의미를 알 수 있음(그래서 시맨틱[semantic]태그)
  ex) p(paragraph) 태그나 a(anchor) 태그
• 대부분의 웹사이트들은 디자인은 달라도 구조는 비슷함(header, main, footer)
• 태그의 이름만 봐도 이 단락이 어떤 역할을 하는지 한눈에 알 수 있음

(생략)
<div id="container">
	<header>
    	...
        <nav>
        	...
        </nav>
    </header>
    <main class="contents">
    	<section id="headling">
        	<h2>몸과 마음이 힐링 되는 곳</h2>
        	....
        </section>
        <section id="headling">
        	<h2>짜릿한 액티비티가 기다리는 곳</h2>
        	....
        </section>
    </main>
    <footer>
    	<section id="bottomMenu">
        	...
        </section>
    </footer>
</div>
(생략)

-위 태그처럼 header 나 footer와 같은 시맨틱 태그는 이름만 봐도 웹문서에서 어떤 역할을 하는 지 추축 가능

시맨틱 태그가 필요한 이유?

1. 시맨틱 태그를 이용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문인지 쉽게 알 수 있기 때문.
   시각장애인이나 웹사이트를 이용할 때 화면 낭독기와 같은 보조 기기에서 사이트 구조를 제대로 이해할 수 있어 사용자에게 보다 더 정확한 내용을 전달할 수 있음
2. 문서 구조가 정확히 나누어 지기 때문에 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉬움.
3. 인터넷에서 웹사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음

헤더 영역을 나타내는 < header >태그

• 주로 맨 위쪽이나 왼쪽에 위치함.
• 검색창이나 사이트 메뉴 삽입

네비게이션 영역을 나타내는 < nav > 태그

• 웹 문서 안에서 다른 위치로 연결하거나 다른 웹문서로 연결하는 링크
• 웹 문서의 위치에 영향이 없어 원하는 위치에 만들면 됨.
• 여러개의 nav 태그를 사용할 경우 id나 class 로 각 속성을 부여하면 각각 다른 스타일 적용가능

핵심 콘텐츠를 담는 < main >태그

• 웹문서의 핵심이 되는 내용을 담음(본문)
• 메뉴나 사이드바, 로고 같은 페이지마다 들어가는 내용을 넣는게 아니라 웹문서마다 다르게 보여지는 내용으로 구성.
• 한페이지에 한번만 사용가능

독립적 콘텐츠를 담는 < article >태그

• 실제로 보여주고 싶은 내용을 넣음(블로그의 포스트, 뉴스 사이트의 기사)
• 여러개 사용 가능하고 그 안에 section태그를 넣어서 하용 가능

콘텐츠 영역을 나타내는 < section >태그

• 웹 문서의 콘텐츠영역을 나타냄
• article 태그와 비슷하지만 section태그는 몇개의 콘텐츠를 묶는 용도로 사용

사이드바 영역을 나타내는 < aside >태그

• 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 만듬
• 필수는 아니기 때문에 필요시에만 넣음

푸터 영역을 나타내는 < footer >태그

• 웸 문서에 맨 아래쪽에 있는 푸터영역을 만듬
• 사이트 정보, 저작권 정보, 연락처 등을 넣음
• 이 안에 다른 시맨틱 태그들을 모두 사용 가능

여러 소스를 묶는 < div >태그

• HTML의 header, secton 같은 시멘틱 태그가 나오기 전에는 헤더나 네비게이션, 푸터등을 구별할 떄 사용했었음
• id나 class 속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용.
• 영역을 구별하거나 수타일로 문서를 꾸밀때 사용

`