Layout02

레이아웃2

이번 레이아웃은 한단계 더 높은 수준의 영역으로 한줄에 세가지의 영역을 나열합니다.
이번 영역은 header, nav, (aside, section, footer), article로 영역을 나누었습니다.

float을 이용한 레이아웃

aside와 section,footer영역을 한줄로 배치하기 위해서 float속성을 사용해서 작업했습니다.
하지만 오류로 인해서 article부분이 없어지기 때문에 clear:both를 사용해서 버그를 수정했습니다..

 * {
    margin: 0;
}
body{
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;;
}
#header {
    width: 1200px;
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    width: 1200px;
    height: 100px;
    background-color: #A5D6A7;
}
#aside {
    width: 300px;
    height: 780px;
    background-color: #81C784;
    float: left;
}
#section {
    width: 600px;
    height: 780px;
    background-color: #66BB6A;
    float: left;
}
#footer {
    width: 300px;
    height: 780px;
    background-color: #4CAF50;
    float: left;
}
#article {
    width: 1200px;
    height: 100px;
    background-color: #43A047;
    clear: both;
}
@media(max-width: 1220px){
    #wrap {
        width: 96%;
        height: 100%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
        height: 100%;
    }
}
@media(max-width: 480px){
    #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }
}

결과

flex을 이용한 레이아웃

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

* {
    margin: 0;
}
body{
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;;
    display: flex;
    flex-wrap: wrap;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #A5D6A7;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #81C784;
}
#section {
    width: 50%;
    height: 780px;
    background-color: #66BB6A;
}
#footer {
    width: 20%;
    height: 780px;
    background-color: #4CAF50;
}
#article {
    width: 1200px;
    height: 100px;
    background-color: #43A047;
}
@media(max-width: 1220px){
    #wrap {
        width: 96%;
        height: 100%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
        height: 100%;
    }
}
@media(max-width: 480px){
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }
    #footer{
        width: 100%;
        height: 150px;
    }

}

결과

grid을 이용한 레이아웃

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

 * {
    margin: 0;
}
body{
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto; /* 블록구조를 가운데 정렬 */
    display: grid;
    grid-template-areas:
        "header header header"
        "nav nav nav"
        "aside section footer"
        "article article article"
    ;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 100px 100px 780px 100px;
}
#header {
    grid-area: header;
    background-color: #C8E6C9;
}
#nav {
    grid-area: nav;
    background-color: #A5D6A7;
}
#aside {
    grid-area: aside;
    background-color: #81C784;
}
#section {
    grid-area: section;
    background-color: #66BB6A;
}
#footer {
    grid-area: footer;
    background-color: #4CAF50;
}
#article {
    grid-area: article;
    background-color: #43A047;
}
@media(max-width: 1220px){
    #wrap {
        width: 96%;
    }
}
@media(max-width: 768px){
    #wrap {
        width: 100%;
    grid-template-areas:
        "header header"
        "nav nav"
        "aside section"
        "footer footer"
        "article article"
        ;
        grid-template-columns: 30% 70%;
        grid-template-rows: 100px 100px 630px 150px 100px;
    }
}
@media(max-width: 480px){
    #wrap {
        grid-template-areas:
        "header"
        "nav"
        "aside"
        "section"
        "footer"
        "article"
        ;
        grid-template-columns: 100%;
        grid-template-rows: 100px 100px 200px 430px 150px 100px;
    }
}

결과