12-04_page-layout.html

div 요소를 이용한 레이아웃

메인 섹션

"> 12-4_page-layout

div 요소를 이용한 레이아웃

메인 섹션

"> 12-4_page-layout

div 요소를 이용한 레이아웃

메인 섹션

<!-- 12_layout/12-4_page-layout.html -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12-4_page-layout</title>
<style type="text/css">
#wrap {
	width: 800px;
	margin: 0 auto; /* 박스의 중앙에 배치 */
}
#header, #sidebar, #section, #footer {
	font-size: 20px;
	text-align: center;
	padding-top: 30px;
}
#header {
	height: 60px;
	background-color: pink;
}
#sidebar {
	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>div 요소를 이용한 레이아웃</h2>
		<div id="header">
			상단 헤더
		</div>
		<div id="sidebar">
			사이드바
		</div>
		<div id="section">
			메인 섹션
		</div>
		<div id="footer">
			하단 푸터
		</div>
	</div><!-- // wrap -->
</body>
</html>