Layout 02

Layout 02

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

float을 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 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;
    }
    #main {
        width: 1200px;
        overflow: hidden;
    }
    #aside {
        width: 300px;
        height: 780px;
        background-color: #81c784;
        float: left;
    }
    #section {
        width: 600px;
        height: 780px;
        background-color: #66bb6a;
        float: left;
    }
    #article {
        width: 300px;
        height: 780px;
        background-color: #4caf50;
        float: left;
    }
    #footer {
        width: 1200px;
        height: 100px;
        background-color: #43a047;
    }

flex를 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #e8f5e9;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        height: 100px;
        background-color: #c8e6c9;
    }
    #nav {
        height: 100px;
        background-color: #a5d6a7;
    }
    #main {
        display: flex;
    }
    #aside {
        width: 30%;
        height: 780px;
        background-color: #81c784;
    }
    #section {
        width: 40%;
        height: 780px;
        background-color: #66bb6a;
    }
    #article {
        width: 30%;
        height: 780px;
        background-color: #4caf50;
    }
    #footer {
        height: 100px;
        background-color: #43a047;
    }

grid를 이용한 레이아웃

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

    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #e8f5e9;
    }
    #wrap {
        width: 1200px;
        margin: 0 auto;
    }
    #header {
        height: 100px;
        background-color: #c8e6c9;
    }
    #nav {
        height: 100px;
        background-color: #a5d6a7;
    }
    #main {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        grid-template-rows: 780px;
    }
    #aside {
        background-color: #81c784;
    }
    #section {
        background-color: #66bb6a;
    }
    #article {
        background-color: #4caf50;
    }
    #footer {
        height: 100px;
        background-color: #43a047;
    }

결과