HTML5는 페이지의 구도를 쉽게 잡을 수 있는 마크업으로 header, footer, article, nav, section, aside 를 제공합니다.
이 태그들은 이후에 배울 CSS 와 함께 사용하면 페이지 레이아웃을 쉽게 구성할 수 있습니다.
▶ 각 태그들은 일반적은 사용 패터이며 반드시 내용대로 배치를 해야하는 것은 아닙니다.
▷<header> : 문서의 이름, 제목, 로고 등을 정의하는 레이아웃
▷<nav> : 네비게이션 영역으로 페이지 이동을 위한 메뉴들이 있는 레이아웃
▷<article> : 개별 문서의 제목과 본문이 들어가는 레이아웃
▷<section> : 글을 구분하는데 사용하는 레이아웃
▷<footer> : 저작자의 이름, 문서의 날짜 등 기타 메뉴가 들어가는 레이아웃
▷<aside> : 보조 메뉴나 광고를 배치하는 레이아웃
위 태그들을 이용하여 HTML 레이아웃을 만들어 보겠습니다.
<body>
<h1>HTML 레이아웃</h1>
<article class="page">
<header class="page_header">
<h1 class="page-title">레이아웃 만들기</h1>
<nav class="menu">
<a href="#" class="menu_link">Home</a>
<a href="#" class="menu_link">Instruction</a>
<a href="#" class="menu_link">Menu</a>
<a href="#" class="menu_link">About</a>
<a href="#" class="menu_link">Contact</a>
</nav>
</header>
<div class="page_section">
<section class="page_section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</section>
<section class="page_section2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, \
onsectetur adipisicing elit.
Eligendi aperiam, excepturi sit deserunt molestias, iusto ad natus
repellendus non labore iste vero ullam dolorem nesciunt fuga nemo
hic ea obcaecati.
</p>
</section>
</div>
<footer class="page_footer">
<p class="copylight">2019 © footer copylight</p>
</footer>
</article>
</body>
'Language > HTML&CSS' 카테고리의 다른 글
| 07. HTML - media (0) | 2019.10.22 |
|---|---|
| 05. HTML&CSS - 초기화 리셋(reset.css) (0) | 2019.10.10 |
| 03. HTML - 목록 태그 (0) | 2019.10.09 |
| 02. HTML - 글자태그_스타일 적용 (0) | 2019.10.08 |
| 01. HTML - 글자 태그 (0) | 2019.10.08 |