<body>
<div id="wrap">
<div id="header">
<div class="container"></div>
</div>
<div id="nav">
<div class="container"></div>
</div>
<div id="section">
<div class="container"></div>
</div>
<div id="footer">
<div class="container"></div>
</div>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #E0F2F1;
}
#nav {
height: 300px;
background-color: #80CBC4;
}
#section {
height: 580px;
background-color: #26A69A;
}
#footer {
height: 100px;
background-color: #00897b;
}
/* .header_container{
width: 1200px;
height: 100px;
background-color: #B2DFDB;
margin: 0 auto;
}
.nav_container{
width: 1200px;
height: 300px;
background-color: #4DB6AC;
margin: 0 auto;
}
.section_container{
width: 1200px;
height: 580px;
background-color: #009688;
margin: 0 auto;
}
.footer_container{
width: 1200px;
height: 100px;
background-color: #00796B;
margin: 0 auto;
} */
/*
아이디/클래스
#/.
한번/두개 이상
전체적인 틀, 스크립트 --> id
세부적인 영역, 반복 --> class
*/
.container {
width: 1200px;
height: inherit; /* inherit은 상속*/
margin: 0 auto;
background-color: rgb(0,0,0,0.3);
}
@media (max-width: 1220px){
.container {
width: 96%;
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.