728x90
레이아웃05
이번 레이아웃 역시 가운데 영역이 들어간 구조입니다.
float을 이용한 레이아웃
'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, 여기서는 clearfix;를 사용하였습니다..
* {
margin: 0 auto;
padding: 0;
}
#wrap {
width: 100%;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #EEEBE9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#main {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.3);
}
#header .header{
width: 100%;
height: 100px;
background-color: #D5CCC9;
}
#nav .nav{
width: 100%;
height: 100px;
background-color: #9D8980;
}
#main .cont1 {
width: 100%;
height: 100px;
background-color: #74574A;
}
#main .cont2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
#main .cont3 {
width: 50%;
height: 480px;
background-color: #594139;
float: left;
}
#main .cont4 {
width: 50%;
height: 480px;
background-color: #4A352F;
float: left;
}
#footer .footer {
width: 100%;
height: 100px;
background-color: #3e2723;
}
/* float으로 인한 영역깨짐 방지법
1. 깨지는 영역에 clear: both를 설정한다.
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다.
*/
/* clearfix */
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
@media (max-width: 1220px){
.container {
width: 96%;
}
#main .cont1 {
width: 30%;
height: 780px;
float: left;
}
#main .cont2 {
width: 70%;
height: 390px;
float: left;
}
#main .cont3 {
width: 35%;
height: 390px;
}
#main .cont4 {
width: 35%;
height: 390px;
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
#main .cont1 {
width: 30%;
height: 780px;
}
#main .cont2 {
width: 70%;
height: 260px;
}
#main .cont3 {
width: 70%;
height: 260px;
}
#main .cont4 {
width: 70%;
height: 260px;
}
}
@media (max-width: 480px){
#main .cont1 {
width: 100%;
height: 150px;
}
#main .cont2 {
width: 100%;
height: 210px;
}
#main .cont3 {
width: 100%;
height: 210px;
}
#main .cont4 {
width: 100%;
height: 210px;
}
}
flex를 이용한 레이아웃
레이아웃 배치 전용으로 나온 속성입니다. float 방법보다 단조롭고 편한 방법입니다. float방법처럼 필요한 각각 요소들에 적용하는 것이 아닌 자식 요소를 감싸고 있는 부모 요소에게만 적용하면 됩니다.
* {
margin: 0;
}
#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;
background-color: rgba(0, 0, 0, 0.3);
margin: 0 auto;
}
.contents .left .cont1 {
width: 100%;
height: 100px;
background-color: #74574a;
}
.contents .right {
display: flex;
flex-wrap: wrap;
}
.contents .right .cont2 {
width: 100%;
height: 200px;
background-color: #684D43;
}
.contents .right .cont3 {
width: 50%;
height: 480px;
background-color: #594139;
}
.contents .right .cont4 {
width: 50%;
height: 480px;
background-color: #4A352F;
}
/* 미디어쿼리 */
@media(max-width: 1220px){
.container {
width: 96%;
}
.contents {
display: flex;
}
.contents .left {
width: 30%;
}
.contents .left .cont1 {
width: 100%;
height: 780px;
}
.contents .right {
width: 70%;
}
.contents .right .cont2 {
width: 100%;
height: 390px;
}
.contents .right .cont3 {
width: 50%;
height: 390px;
}
.contents .right .cont4 {
width: 50%;
height: 390px;
}
}
@media(max-width: 768px){
.container {
width: 100%;
}
.contents {
display: flex;
}
.contents .right .cont2 {
width: 100%;
height: 260px;
}
.contents .right .cont3 {
width: 100%;
height: 260px;
}
.contents .right .cont4 {
width: 100%;
height: 260px;
}
}
@media(max-width: 480px){
.contents {
flex-wrap: wrap;
}
.contents .left {
width: 100%;
height: 150px;
}
.contents .right {
width: 100%;
height: 630px;
}
.contents .left .cont1 {
height: 150px;
}
.contents .right .cont2 {
height: 210px;
}
.contents .right .cont3 {
height: 210px;
}
.contents .right .cont4 {
height: 210px;
}
}
grid를 이용한 레이아웃
table처럼 두 방향(가로-세로) 레이아웃 시스템(2차원)입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능합니다. flex와 마찬가지로 부모 요소에만 적용하면 됩니다.
* {
margin: 0;
}
#header {
width: 100%;
height: 100px;
background-color: #eeebe9;
}
#nav {
width: 100%;
height: 100px;
background-color: #B9AAA5;
}
#main {
width: 100%;
height: 780px;
background-color: #886F65;
}
#footer {
width: 100%;
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
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: repeat(3, 1fr);
/* 여러 가지 방법으로 grid-template-columns를 작성할 수 있습니다.
grid-template-columns: repeat(3, 33.3333%);
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 33.3333% 33.3333% 33.3333%; */
grid-template-rows: repeat(2, 1fr);
}
}
@media (max-width: 768px){
.container {
width: 100%;
}
.contents {
grid-template-areas:
"cont1 cont2"
"cont1 cont3"
"cont1 cont4"
;
grid-template-columns: 30% 70%;
grid-template-rows: repeat(3, 1fr);
}
}
@media (max-width: 480px){
.contents {
grid-template-areas:
"cont1"
"cont2"
"cont3"
"cont4"
;
grid-template-columns: 100%;
grid-template-rows: 150px 210px 210px 210px;
}
}
결과
728x90
반응형
'LAYOUT' 카테고리의 다른 글
| [LAYOUT]레이아웃 유형04 (5) | 2022.07.29 |
|---|---|
| [LAYOUT]레이아웃 유형03 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형02 (5) | 2022.07.29 |
| [LAYOUT]레이아웃 유형01 (4) | 2022.07.29 |
댓글