<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>3단 레이아웃 만들기 </title>
<style>
#container {
width: 1200px;
/*내용 전체의 너비*/
margin: 20px auto;
/*내용 화면 가운데 배치하도록 좌우 마진 auto */
}
#header {
width: 100%;
/*부모 요소의 너비와 똑같게 */
height: 120px;
/*헤더의 높이*/
background-color: #acacac;
}
#left-sidebar {
width: 250px;
/*사이드바의 너비*/
height: 600px;
/*사이드바의 높이*/
background-color: #e9e9e9;
float: left;
/*왼쪽으로 플로팅 */
}
#contents {
width: 800px;
/*본문 너비*/
height: 600px;
/*본문 높이*/
background-color: #f7f7f7;
float: left;
/*왼쪽으로 플로팅*/
}
#right-sidebar {
width: 150px;
/*사이드바의 너비*/
height: 600px;
/*사이드바의 높이*/
float: right;
/*오른쪽으로 플로팅 */
background-color: #e9e9e9;
}
#footer {
width: 100%;
/*부모 요소의 너비와 똑같게*/
height: 100px;
/*푸터의 높이*/
float: left;
/*플로팅 해제*/
background-color: #888888;
}
</style>
</head>
<body>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<asdie id="left-sidebar">
<h2>사이드바</h2>
</asdie>
<section id="contents">
<h2>본문</h2>
</section>
<aside id="right-sidebar">
<h2>본문</h2>
</aside>
<footer id="footer">
<h2>푸터</h2>
</footer>
</div>
</div>
</body>
</html>
결과 : 3단 레이아웃 만들기
'css' 카테고리의 다른 글
| 8장 예제 - position 속성으로 요소 위치 저장하기 (0) | 2023.03.28 |
|---|---|
| 8장 예제 - 텍스트 요소 자유롭게 배치하기 (0) | 2023.03.28 |
| 8장 실습 3 (0) | 2023.03.28 |
| 8장 예제 - 수평 내비게이션 만들기 (0) | 2023.03.27 |
| 8장 실습 2 (0) | 2023.03.27 |
