Layout 01

Layout 01

기본적인 레이아웃 구성 요소

float을 이용한 레이아웃

float 요소를 이용해 세로로만 나열이 아닌 가로로도 배치하여 레이아웃을 구성

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #fff3e0;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        width: 1200px;
        height: 100px;
        background-color: #ffe0b2;
    }
    #nav {
        width: 1200px;
        height: 100px;
        background-color: #ffcc80;
    }
    #aside {
        width: 400px;
        height: 780px;
        background-color: #ffb74d;
        float: left;
    }
    #section {
        width: 800px;
        height: 780px;
        background-color: #ffa726;
        float: left;
    }
    #footer {
        width: 1200px;
        height: 100px;
        background-color: #ff9800;
        clear: both;
    }

flex를 이용한 레이아웃

flex 안에 있는 요소들을 선언하여, 유연하게 배치하여 레이아웃 구성

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #fff3e0;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    #header {
        width: 100%;
        height: 100px;
        background-color: #ffe0b2;
    }
    #nav {
        width: 100%;
        height: 100px;
        background-color: #ffcc80;
    }
    #aside {
        width: 30%;
        height: 780px;
        background-color: #ffb74d;
        float: left;
    }
    #section {
        width: 70%;
        height: 780px;
        background-color: #ffa726;
        float: left;
    }
    #footer {
        width: 100%;
        height: 100px;
        background-color: #ff9800;
        clear: both;
    }

grid를 이용한 레이아웃

grid 시스템을 이용한 레이아웃 구성

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #fff3e0;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-areas: 
            "header header"
            "nav nav"
            "aside section"
            "footer footer"
        ;
        grid-template-columns: 400px 800px;
        grid-template-rows: 100px 100px 780px 100px;
    }
    #header {
        background-color: #ffe0b2;
        grid-area: header;
    }
    #nav {
        background-color: #ffcc80;
        grid-area: nav;
    }
    #aside {
        background-color: #ffb74d;
        float: left;
        grid-area: aside;
    }
    #section {
        background-color: #ffa726;
        float: left;
        grid-area: section;
        
    }
    #footer {
        background-color: #ff9800;
        clear: both;
        grid-area: footer;
    }

결과