Layout 03

Layout 03

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

float을 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #e1f5fe;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        width: 1200px;
        height: 100px;
        background-color: #b3e5fc;
    }
    #nav {
        width: 1200px;
        height: 100px;
        background-color: #81d4fa;
    }
    #main {
        width: 1200px;
    }
    #aside {
        width: 300px;
        height: 780px;
        background-color: #4fc3f7;
        float: left;
    }
    #article1 {
        width: 900px;
        height: 260px;
        background-color: #29b6f6;
        float: left;
    }
    #article2 {
        width: 900px;
        height: 260px;
        background-color: #03a9f4;
        float: left;
    }
    #article3 {
        width: 900px;
        height: 260px;
        background-color: #039be5;
        float: left;
    }
    #footer {
        width: 1200px;
        height: 100px;
        background-color: #0288d1;
    }

    /* clearfix */
    .clearfix::before,
    .clearfix::after {
        content: '';
        display: block;
        line-height: 0;
    }
    .clearfix::after {
        clear: both;
    }

flex를 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #e1f5fe;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #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;
    }
    #article1 {
        width: 70%;
        height: 260px;
        background-color: #29b6f6;
    }
    #article2 {
        width: 70%;
        height: 260px;
        background-color: #03a9f4;
    }
    #article3 {
        width: 70%;
        height: 260px;
        background-color: #039be5;
    }
    #footer {
        height: 100px;
        background-color: #0288d1;
    }

grid를 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #e1f5fe;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        height: 100px;
        background-color: #b3e5fc;
    }
    #nav {
        height: 100px;
        background-color: #81d4fa;
    }
    #main {
        display: grid;
        grid-template-areas: 
            "aside article1 article1"
            "aside article2 article2"
            "aside article3 article3";
        grid-template-columns: 300px 900px;
        grid-template-rows: 260px 260px 260px;
    }
    #aside {
        background-color: #4fc3f7;
        grid-area: aside;
    }
    #article1 {
        background-color: #29b6f6;
        grid-area: article1;
    }
    #article2 {
        background-color: #03a9f4;
        grid-area: article2;
    }
    #article3 {
        background-color: #039be5;
        grid-area: article3;
    }
    #footer {
        height: 100px;
        background-color: #0288d1;
    }

결과

See the Pen layout03-float by KDB6 (@kdb6) on CodePen.