728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>3단 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
width: 1200px;
margin: 20px auto;
}
#header {
width: 100%; /* 부모 요소를 기준으로 해서 비율(%)*/
background-color: darkcyan;
}
#left_sidebar{
background-color: cornflowerblue;
width: 200px;
height: 150px;
float: left;
}
#contents{
width: 800px;
height: 150px;
background-color: rgb(223, 224, 226);
float: left;
}
#rightt_sidebar{
background-color: cornflowerblue;
width: 200px;
height: 150px;
float: left;
}
#footer{
width: 100%;
height: 100px;
background-color: darkcyan;
clear: left;
}
</style>
</head>
<body>
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="left_sidebar">
<h2>사이드바</h2>
</aside>
<section id="contents">
<h2>본문</h2>
</section>
<aside id="right_sidebar">
<h2>사이드바</h2>
</aside>
<footer id="footer">
<h2>웹페이지 정보</h2>
</footer>
</div>
</body>
</html>728x90
반응형