HTML5 는 문서 구조를 쉽게 잡을 수 있는 마크업으로 header, footer, nav, article, section, aside 를 제공합니다. 이것들을 CSS 와 함께 사용하면 HTML 문서 레이아웃을 쉽게 구성할 수 있습니다. 그리고 태그는 단순히 구분을 위한 용도로 사용합니다. 이전에는 CSS id 나 class 로 만들어서 배치를 했지만 HTML5 부터는 태그를 지원하기 때문에 훨씬 소스의 가독성은 높아졌습니다.
▼ 각 태그별로 어떤 내용들을 배치할지 간략하게 설명을 드리겠습니다. 반드시 내용대로 배치를 해야 되는 것은 아닙니다. 일반적인 사용 패턴을 이야기 하는 것이며 아래 처럼 구분해서 적용해 놓으면 편집할 때 용의합니다.
l <header> : 문서의 서론이나 섹션의 목차, 검색, 로고 등이 들어가는 곳이다.
l <hgroup> : 제목을 정의하며 다른 섹션에서 서브 제목으로 이용된다.
l <section> : 글을 구분하는데 사용한다. 단락의 개념으로 보면 된다.
l <article> : 컨텐츠의 내용이 들어가는 부분이다.
l <nav> : 네비게이션 영역이며 페이지 이동을 위한 메뉴들이 모여 있는 곳이다.
l <aside> : 보조 메뉴나 광고를 배치하는 곳이다.
l <footer> : 저작자의 이름이나 문서의 날짜, 연락처 등이 들어간다.
▼ 각 태그를 CSS 로 화면에 배치한 결과 입니다. 양 사이드에 바를 위치 시키고 상단과 하단에 header, footer 를 배치했습니다. 일반적으로 사용하는 패턴이죠. 이 위치는 사용자가 필요에 따라 변경하면 됩니다. 그럼 아래 그림과 같이 CSS 로 배치해 볼까요.
▼ 먼저 태그들을 사용해서 화면을 꾸며 보겠습니다. CSS 를 적용하지 않으면 자동 줄 바꿈이 되어서 아래 그림처럼 배치가 될 것입니다. 이것을 위의 그림처럼 배치해 보려고 합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>HTML5</title>
</head>
<body>
<div id="wapper">
<!--헤더시작-->
<header>
<p>header</p>
</header>
<!--네비게이션-->
<nav>
<p>nav</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<!--콘텐츠부분-->
<section>
<p>section</p>
<article>
<p>article</p>
</article>
</section>
<!--사이드바-->
<aside>
<p>aside</p>
</aside>
<!--풋터-->
<footer>footer</footer>
</div>
</body>
</html>
▼ header 바로 아래 3개의 요소, navigation, section, aside 를 가로로 배치하기 위해 float: left 를 주었습니다. 그럼 결과 화면에서처럼 전체 길이가 넘어가지 않는다면 가로로 배치가 됩니다. 두 번째는 footer 에서 줄 바꿈이 되어야 하기 때문에 clear: both 를 해 주었습니다. 이 두 개의 속성값이 주요 포인트입니다. 나머지는 넓이와 margin, padding 값을 준 것뿐입니다. 이런 식으로 CSS 값만 변경하시면 다양한 위치의 레이아웃을 만들 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title>HTML5</title>
<style type="text/css">
body {
text-align: center;
color: #FFF;
width: 900px;
}
div#wapper {
width: 100%;
text-align: left;
min-height: 300px;
margin: 0 auto;
}
header, footer, nav, aside, section {
border: 1px solid #999;
margin: 5px;
padding: 10px;
}
header {
height: 50px;
background-color: red;
}
nav, section, aside {
float: left;
height: 200px;
}
nav {
background-color: goldenrod;
width: 100px;
}
section {
background-color: green;
width: 604px;
}
aside {
background-color: goldenrod;
width: 100px;
}
footer {
height: 50px;
background-color: blue;
position: relatiev;
clear: both;
}
article {
width: 90%;
margin: 20px;
background-color: #999;
}
</style>
</head>
<body>
<div id="wapper">
<!--헤더시작-->
<header>
<p>header</p>
</header>
<!--네비게이션-->
<nav>
<p>nav</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<!--콘텐츠부분-->
<section>
<p>section</p>
<article>
<p>article</p>
</article>
</section>
<!--사이드바-->
<aside>
<p>aside</p>
</aside>
<!--풋터-->
<footer>footer</footer>
</div>
</body>
</html>
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
|---|---|
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
| HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기 (0) | 2019.01.14 |
