레이아웃01
이번 레이아웃은 제일 기본적인 구조입니다. 단순한 구조이기 때문에 간편하게 만들 수 있습니다.
float을 이용한 레이아웃
'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다.
* {
margin: 0;
}
body {
background-color: #fff3e0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #ffe0b2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #ffb74d;
float: left;
}
#section {
width: 70%;
height: 780px;
background-color: #ffa726;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #ff9800;
clear: both; //깨진 부분에 clear: both 적용
}
@media (max-width: 1300px) {
#wrap {
width: 96%;
}
}
@media (max-width: 768px) {
#wrap {
width: 100%;
}
}
@media (max-width: 480px) {
#aside {
width: 100%;
height: 300px;
}
#section {
width: 100%;
height: 480px;
}
}
flex를 이용한 레이아웃
레이아웃 배치 전용으로 나온 속성입니다. float 방법보다 단조롭고 편한 방법입니다. float방법처럼 필요한 각각 요소들에 적용하는 것이 아닌 자식 요소를 감싸고 있는 부모 요소에게만 적용하면 됩니다.
* {
margin: 0;
}
body {
background-color: #fff3e0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#header {
width: 100%;
height: 100px;
background-color: #ffe0b2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #ffb74d;
}
#section {
width: 70%;
height: 780px;
background-color: #ffa726;
}
#footer {
width: 100%;
height: 100px;
background-color: #ff9800;
}
@media (max-width: 1300px) {
#wrap {
width: 96%;
}
}
@media (max-width: 768px) {
#wrap {
width: 100%;
}
}
@media (max-width: 480px) {
#aside {
width: 100%;
height: 300px;
}
#section {
width: 100%;
height: 480px;
}
}
grid를 이용한 레이아웃
table처럼 두 방향(가로-세로) 레이아웃 시스템(2차원)입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능합니다. flex와 마찬가지로 부모 요소에만 적용하면 됩니다.
* {
margin: 0;
}
body {
background-color: #fff3e0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 30% 70%;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #ffe0b2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #ffb74d;
grid-area: aside;
}
#section {
background-color: #ffa726;
grid-area: section;
}
#footer {
background-color: #ff9800;
grid-area: footer;
}
@media (max-width: 1300px) {
#wrap {
width: 96%;
}
}
@media (max-width: 768px) {
#wrap {
width: 100%;
}
}
@media (max-width: 480px) {
#wrap {
grid-template-areas:
"header"
"nav"
"aside"
"section"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px 100px 300px 480px 100px;
}
}
결과
'LAYOUT' 카테고리의 다른 글
| [LAYOUT]레이아웃 유형05 (5) | 2022.07.29 |
|---|---|
| [LAYOUT]레이아웃 유형04 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형03 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형02 (5) | 2022.07.29 |
댓글