Layout2

레이아웃02

이번 레이아웃은 메인태그가 3영역으로 분할되어있습니다.

float : overflow를 이용한 레이아웃

overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성입니다.

* {
    margin: 0;
}

body {
    background-color: #E8F5E9;
}

#wrap {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
}

#header {
    width: 1200px;
    height: 100px;
    background-color: #C8E6C9;
}

#nav {
    width: 1200px;
    height: 100px;
    background-color: #A5D6A7;
}

#main {
    width: 1200px;
    overflow: hidden;
}

#aside {
    width: 300px;
    height: 780px;
    background-color: #81C784;
    float: left;
}

#section {
    width: 600px;
    height: 780px;
    background-color: #4CAF50;
    float: left;
}

#article {
    width: 300px;
    height: 780px;
    background-color: #66BB6A;
    float: left;
}

#footer {
    width: 1200px;
    height: 100px;
    background-color: #43A047;
}

flex를 이용한 레이아웃

* {
    margin: 0;
}

body {
    background-color: #E8F5E9;
}

#wrap {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
}

#header {
    height: 100px;
    background-color: #C8E6C9;
}

#nav {
    height: 100px;
    background-color: #A5D6A7;
}

#main {
    display: flex;
    flex-wrap: wrap;
}

#aside {
    width: 25%;
    height: 780px;
    background-color: #81C784;
}

#section {
    width: 50%;
    height: 780px;
    background-color: #4CAF50;
}

#article {
    width: 25%;
    height: 780px;
    background-color: #66BB6A;
}

#footer {
    height: 100px;
    background-color: #43A047;
}

grid를 이용한 레이아웃 : 반응형 적용

* {
    margin: 0;
}

body {
    background-color: #E8F5E9;
}

#wrap {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
}

#header {
    height: 100px;
    background-color: #C8E6C9;
}

#nav {
    height: 100px;
    background-color: #A5D6A7;
}

#main {
    display: grid;
    grid-template-areas:
        "aside section article";
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 780px;
}

#aside {
    background-color: #81C784;
}

#section {
    background-color: #4CAF50;
}

#article {
    background-color: #66BB6A;
}

#footer {
    height: 100px;
    background-color: #43A047;
}

@media (max-width:1280px) {
    #wrap {
        width: 96%;
    }
}

@media (max-width:768px) {
    #wrap {
        width: 100%;
    }

    #main {
        grid-template-areas:
            "aside section"
            "article article";
        grid-template-columns: 40% 60%;
        grid-template-rows: 630px 150px;
    }

    #aside {
        grid-area: aside;
    }

    #section {
        grid-area: section;
    }

    #article {
        grid-area: article;
    }
}

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