레이아웃03

레이아웃03

이번 레이아웃은 심화된 레이아웃으로 article 블록이 하나 더 추가됐으며, article 블록이 aside 블록과 수직으로 나란히 붙어 있어 추가적인 블록 작업을 해주어야 합니다.

float을 이용한 레이아웃

float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다.
많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다. float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번엔 clearfix 방식입니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
    height: 100%;
}
#wrap {
    margin: 0 auto;
    width: 1200px;
}
#header {
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    height: 100px;
    background-color: #81D4FA;
}
#main {
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #4FC3F7;
    float: left;
}
#section {
    width: 70%;
    height: 260px;
    background-color: #29B6F6;
    float: left;
}
#article1 {
    width: 70%;
    height: 260px;
    background-color: #03A9F4;
    float: left;
}
#article2 {
    width: 70%;
    height: 260px;
    background-color: #039BE5;
    float: left;
}
#footer {
    height: 100px;
    background-color: #0288D1;
}
.clearfix:before {}
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}

@media (max-width: 1300px){
    #wrap {
        width: 96%;
    }
    #article1 {
        width: 35%;
        height: 520px;
    }
    #article2 {
        width: 35%;
        height: 520px;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
    #section {
        width: 70%;
        height: 390px;
    }
    #article1 {
        width: 70%;
        height: 390px;
    }
    #article2 {
        display: none;
    }
}
@media (max-width: 480px){
    #wrap {
        width: 100%;
    }
    #aside {
        width: 100%;
        height: 200px;
    }    
    #section {
        width: 100%;
        height: 430px;
    }
    #article1 {
        width: 100%;
        height: 150px;
    }
    #article2 {
        display: none;
    }
}

---

flex를 이용한 레이아웃

flex 방식은 정렬해야 할 블록에 flex-wrap을 주어 떨어진 블록을 붙이면서 정렬시키는 방식입니다.
간단한 코드만으로 형태를 완성할 수 있는 장점이 있지만 복잡한 구조에선 추가 작업이 필요하며 익스플로러 등의 일부 브라우저에선 호환이 안되는 단점이 있습니다. flex는 한번에 하나의 블록만 정렬하므로 이런 레이아웃에선 블록을 하나로 묶어 정렬해야 합니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
    height: 100%;
}
#wrap {
    margin: 0 auto;
    width: 1200px;
}
#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;
}
#section {
    width: 70%;
    height: 260px;
    background-color: #29B6F6;
}
#t_article {
}
#article1 {
    width: 100%;
    height: 260px;
    background-color: #03A9F4;
}
#article2 {
    width: 100%;
    height: 260px;
    background-color: #039BE5;
}
#footer {
    height: 100px;
    background-color: #0288D1;
}

@media (max-width: 1300px){
    #wrap {
        width: 96%;
    }
    #t_article {
        display: flex;
    }
    #article1 {
        width: 50%;
        height: 520px;
    }
    #article2 {
        width: 50%;
        height: 520px;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
    #section {
        height: 390px;
    }      
    #article1 {
        width: 100%;
        height: 390px;
    }
    #article2 {
        display: none;
    }
}
@media (max-width: 480px){
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }      
    #article1 {
        width: 100%;
        height: 150px;
    }
}

---

grid를 이용한 레이아웃

gird 방식은 블록을 테이블처럼 구역별로 나누어 부모 요소가 자식 요소를 컨트롤 함으로써 형태를 완성하는 방식입니다.
비교적 많은 코드가 필요하지만 부모 요소만 조절하면 모든 블록을 조절할 수 있어 복잡한 구조일수록 편해집니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
    height: 100%;
}
#wrap {
    margin: 0 auto;
    width: 1200px;
}
#header {
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    height: 100px;
    background-color: #81D4FA;
}
#main {
    display: grid;
    grid-template-areas: 
        "aside section section"
        "aside article1 article1"
        "aside article2 article2"
    ;
    grid-template-columns: 25% 75%;
    grid-template-rows: 260px 260px 260px;
}
#aside {
    background-color: #4FC3F7;
    grid-area: aside;
}
#section {
    background-color: #29B6F6;
    grid-area: section;
}
#article1 {
    background-color: #03A9F4;
    grid-area: article1;
}
#article2 {
    background-color: #039BE5;
    grid-area: article2;
}
#footer {
    height: 100px;
    background-color: #0288D1;
}

@media (max-width: 1300px){
    #wrap {
        width: 96%;
    }
    #main {
        display: grid;
        grid-template-areas: 
            "aside section section"
            "aside article1 article2"
        ;
        grid-template-columns: 25% 37.5% 37.5%;
        grid-template-rows: 260px 520px;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
    #main {
        grid-template-areas: 
            "aside section"
            "aside article1"
        ;
        grid-template-columns: 25% 75%;
        grid-template-rows: 390px 390px;
    }
    #article2 {
        display: none;
    }

}
@media (max-width: 480px){
    #main {
        grid-template-areas: 
            "aside"
            "section"
            "article1"
        ;
        grid-template-columns: 100%;
        grid-template-rows: 200px 430px 150px;
    }
    #article2 {
        display: none;
    }
}

결과