<body>
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main" class="clearfix">
<div id="aside"></div>
<div id="article1"></div>
<div id="article2"></div>
<div id="article3"></div>
</div>
<div id="footer"></div>
</div>
</body>
<style>
*{
margin:0;
padding:0;
/* overflow: hidden; 푸터를 만드는 두번째 방법*/
}
body{
background-color: #e1f5fe;
}
#wrap{
width: 1200px;
margin: 0 auto;
}
#header{
height: 100px;
background-color: #b3e5fc;
}
#nav{
height: 100px;
background-color: #81d4fa;
}
#main{
}
#aside{
width: 30%;
height: 780px;
background-color: #4fc3f7;
float: left;
}
#article1{
width: 70%;
height: 260px;
background-color: #29b6f6;
float: left;
}
#article2{
width: 70%;
height: 260px;
background-color: #03a9f4;
float: left;
}
#article3{
width: 70%;
height: 260px;
background-color: #039be5;
float: left;
}
#footer{
height: 100px;
background-color: #0288d1;
/* clear: both; 푸터를 만드는 첫번째 방법*/
}
/* clearfix */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both; /* 푸터를 만드는 세번째 방법 */
}
/* 미디어 쿼리 */
@media(max-width: 1300px){
#wrap{
width:96%;
}
#article2{
height: 520px;
width: 35%;
}
#article3{
width: 35%;
height: 520px;
}
}
@media(max-width: 768px){
#wrap{
width: 100%;
}
#article1{
width: 70%;
height: 390px;
}
#article2{
width: 70%;
height: 390px;
}
#article3{
display: none;
}
}
@media(max-width: 480px){
#aside{
width: 100%;
height: 200px;
}
#article1{
width: 100%;
height: 430px;
}
#article2{
width: 100%;
height: 150px;
}
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.