개념
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 1200px; /* 내용 전체의 너비 */
margin: 0 auto; /* 내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
border: 1px solid red;
}
#header{
width:100%; /* 부모 요소의 너비와 똑같게 */
height:120px; /* 헤더의 높이 */
background-color:#acacac;
}
#contents {
width:100%; /* 본문의 너비 */
height:600px; /* 본문의 높이 */
background-color:#f7f7f7;
}
#footer {
width:100%; /* 부모 요소의 너비와 똑같게 */
height:100px; /* 푸터의 높이 */
background-color:#888888;
}
</style>
</head>
<body>
<!--
<div>
[1] div는 아무 기능이 없다.
[2] 태그기능 없이 오로지 스타일을 주기위해 사용한다.
[3] class 나 id 값을 세팅하기 위해서 사용한다.
-->
<div id="container">
<div id="header">
사이트 제목
</div>
<div id="contents">
본문
</div>
<div id="footer">
푸터
<div>
</div>
</body>
</html>
HTML
복사