ss [LAYOUT]레이아웃 유형03
본문 바로가기
LAYOUT

[LAYOUT]레이아웃 유형03

by 꿈나무개발 2022. 7. 29.
728x90

레이아웃03

이번 레이아웃은 가운데 영역이 다소 복잡해진 구조입니다.

float을 이용한 레이아웃

'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clearfix 또한 사용 가능합니다. 

* {
    margin: 0;
}
body {
    background-color: #e1f5fe;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    height: 100px;
    background-color: #b3e5fc;
}
#nav {
    height: 100px;
    background-color: #81d4fa;
}
#main {

}
#aside {
    width: 30%;
    height: 780px;
    background-color: #4fc3f7;
    float: left;
}
#article1 {
    width: 70%;
    height: 260px;
    background-color: #29b6f6;
    float: left;
}
#article2 {
    width: 70%;
    height: 260px;
    background-color: #03a9f4;
    float: left;
}
#article3 {
    width: 70%;
    height: 260px;
    background-color: #039be5;
    float: left;
}
#footer {
    height: 100px;
    background-color: #0288d1;
}

/* clearfix */
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}
@media (max-width: 1300px) {
    #wrap {
        width: 96%;
    }
    #article2 {
        width: 35%;
        height: 520px;
    }
    #article3 {
        width: 35%;
        height: 520px;
    }
}
@media (max-width: 768px) {
    #wrap {
        width: 100%;
    }
    #article1 {
        width: 70%;
        height: 390px;
    }
    #article2 {
        width: 70%;
        height: 390px;
    }
    #article3 {
        display: none;
    }
}
@media (max-width: 480px) {
    #aside {
        width: 100%;
        height: 200px;
    }
    #article1 {
        width: 100%;
        height: 430px;
    }
    #article2 {
        width: 100%;
        height: 150px;
    }
    #article3 {
        display: none;
    }
}

flex를 이용한 레이아웃

레이아웃 배치 전용으로 나온 속성입니다. float 방법보다 단조롭고 편한 방법입니다. float방법처럼 필요한 각각 요소들에 적용하는 것이 아닌 자식 요소를 감싸고 있는 부모 요소에게만 적용하면 됩니다. 

* {
    margin: 0;
}
body {
    background-color: #e1f5fe;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    height: 100px;
    background-color: #b3e5fc;
}
#nav {
    height: 100px;
    background-color: #81d4fa;
}
#main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 780px;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #4fc3f7;
}
#article1 {
    width: 70%;
    height: 260px;
    background-color: #29b6f6;
}
#article2-1 {
    width: 100%;
    height: 260px;
    background-color: #03a9f4;
}
#article2-2 {
    width: 100%;
    height: 260px;
    background-color: #039be5;
}
#footer {
    height: 100px;
    background-color: #0288d1;
}

@media (max-width: 1300px) {
    #wrap {
        width: 96%;
    }
    #article2 {
        display: flex;
    }
    #article2-1 {
        width: 50%;
        height: 520px;
        background-color: #03a9f4;
    }
    #article2-2 {
        width: 50%;
        height: 520px;
        background-color: #039be5;
    }
}
@media (max-width: 768px) {
    #wrap {
        width: 100%;
    }
    #article1 {
        width: 100%;
        height: 390px;
    }
    #article2-1 {
        width: 100%;
        height: 390px;
    }
    #article2-2 {
        display: none;
    }

}
@media (max-width: 480px) {
    #aside {
        width: 100%;
        height: 200px;
    }
    #article1 {
        height: 430px;
    }
    #article2-1 {
        height: 150px;
    }
}

grid를 이용한 레이아웃

table처럼 두 방향(가로-세로) 레이아웃 시스템(2차원)입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능합니다. flex와 마찬가지로 부모 요소에만 적용하면 됩니다. 

* {
    margin: 0;
}
body {
    background-color: #e1f5fe;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    height: 100px;
    background-color: #b3e5fc;
}
#nav {
    height: 100px;
    background-color: #81d4fa;
}
#main {
    display: grid;
    grid-template-areas: 
        "aside article1 article1"
        "aside article2 article2"
        "aside article3 article3"
    ;
    grid-template-columns: 30% 70%;
    grid-template-rows: 260px 260px 260px;
}
#aside {
    background-color: #4fc3f7;
    grid-area: aside;
}
#article1 {
    background-color: #29b6f6;
    grid-area: article1;
}
#article2 {
    background-color: #03a9f4;
    grid-area: article2;
}
#article3 {
    background-color: #039be5;
    grid-area: article3;
}
#footer {
    height: 100px;
    background-color: #0288d1;
}

@media (max-width: 1300px) {
    #wrap {
        width: 96%;
    }
    #main {
        grid-template-areas: 
            "aside article1 article1"
            "aside article2 article3"
            "aside article2 article3";
        grid-template-columns: 30% 35% 35%;
        grid-template-rows: 260px 520px;
    }
}
@media (max-width: 768px) {
    #wrap {
        width: 100%;
    }
    #main {
        grid-template-areas: 
            "aside article1"
            "aside article2";
        grid-template-columns: 30% 70%;
        grid-template-rows: 390px 390px;
    }
    #article3 {
        display: none;
    }
}
@media (max-width: 480px) {
    #main {
        grid-template-areas: 
            "aside"
            "article1"
            "article2";
        grid-template-columns: 100%;
        grid-template-rows: 200px 430px 150px;
    }
}

결과

728x90
반응형

'LAYOUT' 카테고리의 다른 글

[LAYOUT]레이아웃 유형05  (5) 2022.07.29
[LAYOUT]레이아웃 유형04  (5) 2022.07.29
[LAYOUT]레이아웃 유형02  (5) 2022.07.29
[LAYOUT]레이아웃 유형01  (4) 2022.07.29

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바