반응형
웹 페이지는 크게 header(상단부)와 navigation bar(메뉴), content(내용), footer(하단부)로 나뉜다.
- header: 홈페이지 로고, 검색창
- navigation bar: 메뉴
- content: 내용
- footer: 이용약관, 고객센터, 운영시간 등
크기를 지정할 때는 전체 틀에 대한 크기(px)를 제외하고는 %로 지정하는 것이 좋다.
새로운 틀이 추가되었을 때 px로 지정하면 일일이 다 변경해야 하므로 전체적으로 크기를 조절하기가 번거롭다. 그러나 %로 지정하면 알아서 크기 조절이 되어 편리하다.
<!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>웹 페이지 구조 짜기</title>
<style>
/*모든 div태그들에 적용*/
div{
box-sizing: border-box; /*박스 크기를 테두리 영역에 맞춘다.*/
border: 1px solid black;
}
/*전체 틀*/
.wrap{ /*가로 1000px, 세로 800px, 가로 중앙에 배치*/
width: 1000px;
height: 800px;
margin: auto;
}
.wrap>div{ /*.wrap 내의 모든 div태그에 대해 전체 틀의 가로를 100%로 사용*/
width: 100%;
}
/*header와 navigator, content, footer의 크기는 용도에 따라 원하는 만큼 지정한다.*/
/*너비(가로길이)는 위에서 지정했으므로 각 영역의 높이만 지정해주면 된다.*/
#header{
height: 20%;
}
#navigator{
height: 5%;
}
#content{
height: 60%;
}
#footer{
height: 15%;
}
/*아이디 header에 있는 모든 div 태그들*/
#header>div{
height: 100%;
float: left; /*왼쪽 정렬을 한다.*/
}
/*아이디 content에 있는 모든 div 태그들*/
#content>div{
height: 100%;
float: left; /*왼쪽 정렬을 한다.*/
}
/*header 영역*/
#header1{
width: 20%;
}
#header2{
width: 60%;
}
#header3{
width: 20%;
}
/*content 영역*/
#content1, #content3{
width: 20%;
}
#content2{
width: 60%;
}
/*footer 영역은 따로 나눌 것이 없어 작성하지 않았다.*/
</style>
</head>
<body>
<div class="wrap"> <!--전체 틀을 wrap 클래스로 지정-->
<div id="header"> <!--상단부 header-->
<div id="header1"></div> <!--홈페이지 로고가 들어갈 공간-->
<div id="header2"></div> <!--검색창이 들어갈 공간-->
<div id="header3"></div> <!--빈 공간-->
</div>
<div id="navigator"></div> <!--메뉴 바가 들어갈 공간-->
<div id="content"> <!--내용 content-->
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
</div>
<div id="footer"></div> <!--하단부 footer-->
</div>
</body>
</html>
반응형