<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>html5 Layout 태그</title>
</head>
<body>
<!-- 예전 방식의 구조 -->
<div id="container" class="wrapper">
<div id="header">
<div id="title">페이지 제목</div>
<div id="nav">페이지의 내비게이션 영역
<div class="gnb">메뉴</div>
</div>
</div>
<div id="contents">메인 컨텐츠 영역
<div class="txt.box">내용</div>
</div>
<div class="side_contents">사이드 내용</div>
</div>
<div id="footer" class="wrapper">하단 바닥글
<address>주소 & 연락처</address>
</div>
</body>
</html>- 예전 방식의 HTML 레이아웃 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>html5 Layout 태그</title>
</head>
<body>
<div id="container" class="wrapper">
div : 단순히 구분을 위해, 블록으로 묶어주기 위해 작성
<header>
header : 페이지의 머리글. 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자 이름...
<h1>h1 : 페이지의 제목, 로고</h1>
<nav>
nav : 페이지의 내비게이션 영역(사이트 내,외부로 이동). 메뉴, 목차, 색인...
<div class="gnb">메뉴</div>
</nav>
</header>
<main>
main : 메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용.
다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없음.
<article>
article : 독립된 컨텐츠. 제목 태그와 함께 작성. 게시판, 블로그, 뉴스, 매거진 등...
<section>
section : 일반적인 문서 영영. 스타일링을 위해 사용하지 않음. 제목 태그와 함께 작성
</section>
</article>
<aside>
aside : 간접 컨텐츠. 보조 컨텐츠
</aside>
</main>
</div>
<footer class="wrapper">
footer: 하단 바닥글, 회사 정보, 저작권, 연락처 등...
</footer>
</body>
</html>- 현재 방식의 HTML 레이아웃 구조
레이아웃(Layout) : '배치'라는 뜻으로 화면의 구역을 나누어 어떻게 배치할 것인지 결정하는 것.
<header>
화면 상단에 위치하며 [페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자 이름 등]이 들어간다.
일반적으로 섹션의 제목 <h1>~<h6>태그를 포함하지만 꼭 포함하지 않아도 된다.
<nav>
페이지의 내비게이션 영역 (사이트 내. 외부로 이동하는 링크)으로 메뉴, 목차, 색인 등을 표현한다.
<main>
메인 컨텐츠 영역으로 문서 내에서 반드시 한 번만 사용해야한다.
다른 레이아웃 블록 요소(header, footer, aside 등등)의 하위 요소로 작성할 수 없다.
<article>
독립된 컨텐츠 영역으로 제목 태그와 함께 작성한다.
게시판, 블로그, 뉴스, 매거진 등이 될 수 있으며 하나의 문서 안에 여러개의 article을 작성할 수 있다.
<section>
일반적인 문서 영역으로 제목 태그와 함께 작성한다.
문서의 구획을 정의하기 위해 사용한다. (artcle을 묶거나, header나 footer로 표현하기 애매할 때)
스타일링을 위해 사용하지 않는다.
** section 대신 article을 권장하는 경우 : 요소의 콘텐츠를 배포해도 이치에 맞을 때
** section 대신 div를 권장하는 경우 : 요소가 단순히 스타일링을 위한 목적이나, 스크립팅의 편의를 위해 필요할 때
<aside>
간접 컨텐츠, 보조 컨텐츠로 사용한다.
주로 사이드바의 형태로 나타내며 단순 삽입 어구로 사용하는 것은 적합하지 않다.
<footer>
화면의 하단에 위치하며 부가적인 요소(회사 정보, 저작권, 연락처)등을 작성할 때 사용한다.
연락 정보는 <address>요소에 담는 것이 적당하며, footer 요소 안에 포함될 수 있다.
'HTML5' 카테고리의 다른 글
| [HTML5] 이미지 태그 <img> / 독립적 콘텐츠 태그 <figure> (0) | 2022.09.27 |
|---|---|
| [HTML5] 앵커 (anchor) 태그 <a> / 절대 경로, 상대 경로 / 특정 위치로 이동 (0) | 2022.09.23 |
| [HTML5] 리스트 태그 <ol>, <ul>, <dl> (0) | 2022.09.22 |
| [HTML5] 콘텐츠 분할 태그 <div>, <span> (0) | 2022.09.21 |
| [HTML5] <blockquote>인용 태그</blockquote>, <address>사용자 정보 태그</address> (0) | 2022.09.21 |