<header>, <section>, <article>, <aside> 등에는 꼭 헤딩 태그를 이용하여 제목을 붙여야 한다.
시맨틱 태그를 사용한다고 해서 위처럼 위치와 모양이 자동으로 결정되지 않는다. CSS를 이용하여 직접 위치와 모양을 지정해주어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>구조화된 웹 페이지</title>
<!-- css 영역 -->
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.header {
width: 100%;
height: 15%;
background-color: plum;
}
.nav {
width: 15%;
height: 70%;
background-color: orange;
float: left;
}
.section {
width: 70%;
height: 70%;
background-color: blue;
float: left;
}
.aside {
width: 15%;
height: 70%;
background-color: pink;
float: left;
}
.footer {
width: 100%;
height: 15%;
background-color: rgb(230, 192, 176);
clear: both;
}
</style>
</head>
<body>
<!-- 시맨틱 태그 이용 영역 -->
<header class="header">header</header>
<nav class="nav">nav</nav>
<section class="section">section</section>
<aside class="aside">aside</aside>
<footer class="footer">footer</footer>
</body>
</html>