728x90
레이아웃04
이번 레이아웃은 실제 사이트에서 많이 사용하는 전체 영역이 들어간 구조입니다. 컨테이너를 만들어 영역을 설정합니다.
컨테이너 구조
이번 레이아웃은 전체 영역이 들어간 구조입니다. 복잡하지 않기 때문에, float이나 flex, grid를 사용하지 않고 레이아웃을 만들 수 있습니다.
* {
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;
}
.container {
width: 1200px;
height: inherit; /*부모한테 이미 있기 떄문에 상속 받음*/
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.3);
}
@media (max-width: 1220px){
.container {
width: 96%;
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
}
결과
728x90
반응형
'LAYOUT' 카테고리의 다른 글
| [LAYOUT]레이아웃 유형05 (5) | 2022.07.29 |
|---|---|
| [LAYOUT]레이아웃 유형03 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형02 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형01 (4) | 2022.07.29 |
댓글