<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="main">
<div class="contents container">
<div class="cont1"></div>
<div class="cont2"></div>
<div class="cont3"></div>
<div class="cont4"></div>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
<style>
* {
margin: 0;
}
#wrap {}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#main {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto; /*m0-a */
background-color: rgba(0, 0, 0, 0.3);
}
.contents {
display: grid;
grid-template-areas: /* 이름 */
"cont1 cont1"
"cont2 cont2"
"cont3 cont4"
;
grid-template-columns: 50% 50%; /* 가로 */
grid-template-rows: 100px 200px 480px; /* 세로 */
}
.contents .cont1 {
background-color: #74574A;
grid-area: cont1;
}
.contents .cont2 {
background-color: #684D43;
grid-area: cont2;
}
.contents .cont3 {
background-color: #594139;
grid-area: cont3;
}
.contents .cont4 {
background-color: #4A352F;
grid-area: cont4;
}
@media(max-width:1220px){
.container{
width: 96%;
}
.contents {
grid-template-areas: /* 이름 */
"cont1 cont2 cont2"
"cont1 cont3 cont4"
;
grid-template-columns: 1fr 1fr 1fr; /* 비율이 같게 만들기 repeat (3 , 33.3333%) (3 ,1fr).. ...*/
grid-template-rows: repeat(2,1fr); /* 세로 */
}
}
@media(max-width:769px){
.container{
width: 100%;
}
.contents {
grid-template-areas: /* 이름 */
"cont1 cont2"
"cont1 cont3"
"cont1 cont4"
;
grid-template-columns: 30% 70%; /* 비율이 같게 만들기 repeat (3 , 33.3333%) (3 ,1fr).. ...*/
grid-template-rows: repeat(3,1fr); /* 세로 */
}
}
@media(max-width:480px){
.contents {
grid-template-areas: /* 이름 */
"cont1"
"cont2"
"cont3"
"cont4"
;
grid-template-columns:100% ; /* 비율이 같게 만들기 repeat (3 , 33.3333%) (3 ,1fr).. ...*/
grid-template-rows: 150px 210px 210px 210px; /* 세로 */
}
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.