Layout 05

Layout 05

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

float을 이용한 레이아웃

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

    * {
        margin: 0;
        height: 0;
    }
    #wrap {
        width: 100%;
        margin: 0 auto;
        background-color: #000;
    }
    #header {
        width: 100%;
        height: 100px;
        background-color: #EEEBE9;
    }
    #nav {
        width: 100%;
        height: 100px;
        background-color: #B9AAA5;
    }
    #main {
        width: 100%;
        height: 780px;
        background-color: #886F65;
    }
    #footer {
        width: 100%;
        height: 100px;
        background-color: #4E342E;
    }
    .container {
        width: 1200px;
        height: inherit;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.3);
        overflow: hidden;
    }
    .contents .cont1 {
        width: 100%;
        height: 100px;
        background-color: #74574A;
        float: left;
    }
    .contents .cont2 {
        width: 100%;
        height: 200px;
        background-color: #684D43;
        float: left;
    }
    .contents .cont3 {
        width: 50%;
        height: 480px;
        background-color: #594139;
        float: left;
    }
    .contents .cont4 {
        width: 50%;
        height: 480px;
        background-color: #4A352F;
        float: left;
    }

flex를 이용한 레이아웃

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

    * {
        margin: 0;
    }
    #wrap {}
    #header {
        height: 100px;
        background-color: #EEEBE9;
    }
    #nav {
        height: 100px;
        background-color: #B9AAA5;
    }
    #main {
        height: 780px;
        background-color: #886F65;
    }
    #footer {
        height: 100px;
        background-color: #4E342E;
    }
    .container {
        width: 1200px;
        height: inherit;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.3);
    }
    .contents {
        display: grid;
        grid-template-areas: 
            "cont1 cont1"
            "cont2 cont2"
            "cont3 cont4"
        ;
        grid-template-columns: 50% 50%;
        grid-template-rows: 100px 200px 480px;
    }
    .contents .cont1 {
        background-color: #74574A;
        grid-area: cont1;
    }
    .contents .cont2 {
        background-color: #684D43;
        grid-area: cont2;
    }
    .contents .cont3 {
        background-color: #594139;
        grid-area: cont3;
    }
    .contents .cont4 {
        background-color: #4A352F;
        grid-area: cont4;
    }

grid를 이용한 레이아웃

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

    * {
        margin: 0;
    }
    #wrap {}
    #header {
        height: 100px;
        background-color: #EEEBE9;
    }
    #nav {
        height: 100px;
        background-color: #B9AAA5;
    }
    #main {
        height: 780px;
        background-color: #886F65;
    }
    #footer {
        height: 100px;
        background-color: #4E342E;
    }
    .container {
        width: 1200px;
        height: inherit;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.3);
    }
    .contents {
        display: grid;
        grid-template-areas: 
            "cont1 cont1"
            "cont2 cont2"
            "cont3 cont4"
        ;
        grid-template-columns: 50% 50%;
        grid-template-rows: 100px 200px 480px;
    }
    .contents .cont1 {
        background-color: #74574A;
        grid-area: cont1;
    }
    .contents .cont2 {
        background-color: #684D43;
        grid-area: cont2;
    }
    .contents .cont3 {
        background-color: #594139;
        grid-area: cont3;
    }
    .contents .cont4 {
        background-color: #4A352F;
        grid-area: cont4;
    }

결과

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