시멘틱 레이아웃

상단 헤더 (< header > 태그)
메인 섹션 (< section > 태그)
"> 12-5_page-layout

시멘틱 레이아웃

상단 헤더 (< header > 태그)
메인 섹션 (< section > 태그)
"> 12-5_page-layout

시멘틱 레이아웃

상단 헤더 (< header > 태그)
메인 섹션 (< section > 태그)
"> 
<!-- 12_layout/12-5_page-layout.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12-5_page-layout</title>
<style type="text/css">
#wrap {
	width: 800px;
	margin: 0 auto; /* 박스의 중앙에 배치 */
}
header, aside, section, footer {
	font-size: 20px;
	text-align: center;
	padding-top: 30px;
}
header {
	height: 60px;
	background-color: pink;
}
aside {
	width: 200px;
	height: 300px;
	float: left;
	background-color: orange;
}
section {
	width: 600px;
	height: 300px;
	float: right;
	background-color: skyblue;
}
footer {
	clear: both;
	height: 60px;
	background-color: green;
}

</style>
</head>
<body>
	<div id="wrap">
		<h2>시멘틱 레이아웃</h2>
		<header>
			상단 헤더 (&lt; header &gt; 태그)
		</header>
		<aside>
			사이드바<br/>(&lt; aside &gt; 태그)
		</aside>
		<section>
			메인 섹션 (&lt; section &gt; 태그)
		</section>
		<footer>
			하단 푸터 (&lt; footer &gt; 태그)
		</footer>
	</div><!-- // wrap -->
</body>
</html>