HTML 레이아웃 구성하는 header, article, footer 태그

HTML 레이아웃

사용자가 일반적으로 접속하는 웹사이트의 레이아웃 구조는 기본적으로 비슷합니다.

마치 신문 기사의 페이지 배열 처럼 각 영역이 분할되있습니다.

html-layout-article-2

대부분 웹사이트는 상단의 사이트 제목, 메뉴바, 본문, 사이드바, 하단 메뉴 등으로 구성됩니다.

html-layout-website-ex3

각각의 영역을 <div> 태그나 <table> 태그로 지정하는 대신 HTML은 특정 태그들을 사용합니다.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <header>
      <p>&lt;header&gt;(사이트 타이틀)</p>
    </header>
    <nav>
      <p>&lt;nav&gt;(메뉴)</p>
    </nav>
    <aside>
      <p>&lt;aside&gt;<br/>(사이드바)</p>
    </aside>
    <section>
      <p>&lt;section&gt;(본문)</p>
      <p>&lt;article&gt;(본문)</p>
    </section>
    <footer>
      <p>&lt;footer&gt;(사이트 하단)</p>
    </footer>
  </body>
</html>

레이아웃 태그별 용도

<header> : 사이트 이름, 문서의 제목, 로고 등을 정의합니다.
<nav> : 사이트의 다른 페이지로 이동하는 카테고리, 메뉴를 정의합니다.
<section> : 범위 사이의 데이터를 같은 주제의 그룹으로 분류합니다.
<article> : 개별 문서의 제목과 본문을 정의합니다.
<aside> : 사이드바 영역입니다. 본문 내용과 직접적 연관이 없는 내용들을 기재합니다.