📝 CSS
🖥️ 1. 레이아웃
EX)
<head>
...
<style>
*{ margin: 0; padding: 0; }
html, body{ height: 100%; }
/* 전체박스 : 전체 레이아웃의 폭, 정렬을 제어하기 위한 박스 */
#container{
width: 800px; margin: auto;
}
/* 상단영역 : 폭 = 부모값, 높이 = 고정 */
#header{
background-color: tomato;
width: auto; height: 100px;
}
/* 본문영역 : 폭 = 부모값, 높이 = 가변 */
#content{
background-color: powderblue;
width: auto;
/* 페이지 최소 높이 설정 */
min-height: 300px;
}
/* 내용 > 본문영역 */
#body{
width: 640px;
background-color: cadetblue;
float: left;
min-height: 300px;
}
/* 내용 > 사이드바 */
#sidebar{
width: 160px;
background-color: bisque;
float: left;
min-height: 300px;
}
/* 하단영역 : 폭 = 부모값, 높이 = 고정 */
#footer{
background-color: plum;
width: auto; height: 80px;
}
/* float 속성 해제 */
.clear::after{
clear: both;
float: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
상단영역
</div>
<div id="content" class="clear">
<div id="body">
본문영역
</div>
<div id="sidebar">
사이드바
</div>
</div>
<div id="footer">
하단영역
</div>
</div>
</body>
