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