Layout03

레이아웃3

이번 레이아웃은 가장 기본적인 형태입니다. 우선 칸을 분리시켜 header, nav, (aside, article1, article2, article3), footer로 나눠서 작업하겠습니다.

float을 이용한 레이아웃

이번 레이아웃은 기본적인 형태로 칸을 분리시키고 aside와 article1, article2, article3를 각각 같은 영역에서 배치해주기 위해 float속성을 사용해서 배치하겠습니다.
그리고 오류로 인해서 footer이 나타나지 않아서 clear:both를 사용해서 수정해주겠습니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFFFFF;
}
#wrap {
    width: 1200px;
    margin: 0 auto;;
}
#header {
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    height: 100px;
    background-color: #81D4FA;
}
#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 {
    width: 100%;
    height: 100px;
    background-color: #0288D1;
    clear: both;
}
@media(max-width: 1280px){
    #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){
    #wrap{
        width: 100%;   
    }
    #aside{
        width: 100%;
        height: 200px;
    }
    #article1{ 
        width: 100%;
        height: 430px;
    }
    #article2{ 
        width: 100%;
        height: 150px;
    }

}

결과

flex을 이용한 레이아웃

flex는 제가 지정한 모든 태그들의 부모태그인 wrap태그에 display: flex를 지정 후
모든 태그들이 잘 배치 될 수 있도록 flex-wrap:wrap; 을 사용해서 배치합니다.

* {
    margin: 0;
}
body {
    background-color: #FFFFFF;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #81D4FA;
}
#box {
    width: 70%;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #4FC3F7;
}
#article1 {
    width: 100%;
    height: 260px;
    background-color: #29B6F6;
}
#article2 {
    width: 100%;
    height: 260px;
    background-color: #03A9F4;
    
}
#article3 {
    width: 100%;
    height: 260px;
    background-color: #039BE5;

}
#footer {
    width: 100%;
    height: 100px;
    background-color: #0288D1;
}

결과

grid을 이용한 레이아웃

grid를 이용한 레이아웃 배치 입니다.
grid는 부모태그에서 지정한 모든 태그들을 컨트롤하는 것입니다.
부모태그에서 grid-template-areas를 지정 후 grid-template-columns, grid-template-rows를 사용해서 지정한 영역의 행 높이& 열 넓이를 지정합니다.
또한 grid-template-areas로 지정한 모든 자식태그에서 grid-area로 정의해 주어야합니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #DCDCDC;
}
#wrap {
    width: 1200px;
    margin: 0 auto; /* 블록구조를 가운데 정렬 */
}
#header {
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    height: 100px;
    background-color: #81D4FA;
}  
#box {
    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 {
    grid-area: aside;
    background-color: #4FC3F7;
}
#article1 {
    grid-area: article1;
    background-color: #29B6F6;
}
#article2 {
    grid-area: article2;
    background-color: #03A9F4;
    
}
#article3 {
    grid-area: article3;
    background-color: #039BE5;

}
#footer {
    height: 100px;
    background-color: #0288D1;
}
@media(max-width: 1280px){
    #wrap {
    width: 96%;
}
    #box{
        display: grid;
        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%
    }
    #box{
        display: grid;
        grid-template-areas:
            "aside article1 article1"
            "aside article2 article2"
        ;
        grid-template-columns: 30% 35% 35%;
        grid-template-rows: 260px 260px;
}
    #article3{
        display: none;
}
}
@media(max-width: 480px){
    #wrap {
        width: 100%;
    }
    #box{
        display: grid;
        grid-template-areas:
            "aside"
            "article1"
            "article2"
            "article3"
        ;
        grid-template-columns: 100%;
        grid-template-rows: 200px 430px 150px;
}
}

결과