HTML - 페이지 나누기
페이지 나누기 1
<!DOCTYPE html>
<html lang="en">
<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>
* {margin:0px; padding:0px;}
body {width:960px; height:1500px; margin:0px auto;}
#page{width:100%; height:100%;}
#menu {width:100%; height: 80px; background: gray; margin-bottom: 10px;}
#top {width:100%; height:150px; background: gray;}
#center {
width:100%; height:1000px; background: pink ;margin-top: 10px;
overflow: hidden;
}
#left {
float: left;
width: 49.5%;
height: 100%;
background: gray;
}
#right {
float: right;
width: 49.5%;
height: 100%;
background: gray;
}
#bottom {
width:100%;
height:200px;
background: gray;
margin-top:10px;
}
</style>
</head>
<body>
<div id="page">
<div id = "menu"></div>
<div id="top"></div>
<div id="center">
<div id="left"></div>
<div id ="right"></div>
</div>
<div id = "bottom"></div>
</div>
</body>
</html>
페이지 나누기 2
<!DOCTYPE html>
<html lang="en">
<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>
* {margin:0px; padding:0px;}
body {width:960px; height:1500px; margin:0px auto;}
#page{width:100%; height:100%;}
#menu {width:100%; height: 80px; background: gray; margin-bottom: 10px;}
#top{
background: #ffffff;
color:#eceaea;
width: 100%;
height: 100px;
margin-bottom: 10px;
}
#t1 {
height: 100px;
background: gray;
float: left;
width: 33.1%;
margin-right: 4px;
}
#t2 {
height: 100px;
background: gray;
float: right;
width: 33%;
margin-left: 4px;
}
#t3 {
height: 100px;
background: gray;
float: right;
width:33%;
}
#center {
width:100%; height:800px; background: white ;margin-top: 10px;
overflow: hidden;
}
#left {
float: left;
width: 33.2%;
height: 100%;
background: gray;
}
#right {
float: right;
width: 66.32%;
height: 100%;
background: gray;
}
#bottom {
width:100%;
height:200px;
background: rgb(248, 248, 248);
margin-top:10px;
}
#l1{
float: left;
width: 49.6%;
height: 100%;
background: gray;
}
#l2{
float: right;
width: 49.8%;
height: 100%;
background: gray;
}
</style>
</head>
<body>
<div id="page">
<div id = "menu"></div>
<div id="top">
<div id= t1></div>
<div id= t2></div>
<div id= t3></div>
</div>
<div id="center">
<div id="left"></div>
<div id ="right"></div>
</div>
<div id = "bottom">
<div id="l1"></div>
<div id="l2"></div>
</div>
</div>
</body>
</html>
원래는 묶어서 해줘도되는데 이쁘게 맞추고싶어서 나눠서 지정했다.
댓글남기기