레이아웃05

레이아웃05

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다.

float를 이용한 레이아웃

div태그는 block특성을 가지고 있기 때문에 세로 배치. 가로로 정렬시켜주는 것 float: left;입니다.
하단의 보이지 않는 요소에 clear: both; 주게 되면 요소가 다시 보이게 됩니다.
구조가 복잡해지면 overflow: hidden; 으로 주는 것이 좋으며 그보다도 clearfix를 주는 것이 좋습니다.

* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 100%;
}
#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 {
    margin: 0 auto;
    height: inherit;
    width: 1200px;
    overflow: hidden;
    background-color: #fff;
}
.header {
    width: 100%;
    height: 100px;
    background-color: #D5CCC9;
    float: left;
}
.nav {
    width: 100%;
    height: 100px;
    background-color: #9D8980;
    float: left;
}
.contents .not1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}
.contents .not2 {
    width: 100%;
    height: 200px;
    background-color: #684D43;
}
.contents .not3 {
    width: 50%;
    height: 480px;
    background-color: #594139;
    float: left;
}
.contents .not4 {
    width: 50%;
    height: 480px;
    background-color: #4A352F;
    float: left;
}
.footer {
    width: 100%;
    height: 100px;
    background-color: #3E2723;
    float: left;
}
/* 
    float으로 인한 영역깨짐 방지법
    1. 꺠지는 영역에 clear:both를 설정한다.
    2. 부모 박스 영역에 overflow: hidden을 설정한다.
    3. clearfix를 설정한다.
*/ 
/* clearfix */
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}

@media (max-width: 1220px){
    .container {
        width: 96%;
    }
    .contents .not1 {
        width: 30%;
        height: 780px;
        float: left;
    }
    .contents .not2 {
        width: 70%;
        height: 390px;
        float: left;
    }
    .contents .not3 {
        width: 35%;
        height: 390px;
    }
    .contents .not4 {
        width: 35%;
        height: 390px;
    }
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
    .contents .not1 {
        width: 30%;
        height: 780px;
    }
    .contents .not2 {
        width: 70%;
        height: 260px;
    }
    .contents .not3 {
        width: 70%;
        height: 260px;
    }
    .contents .not4 {
        width: 70%;
        height: 260px;
    }
}
@media (max-width: 480px) {
    .contents .not1 {
        width: 100%;
        height: 150px;
    }
    .contents .not2 {
        width: 100%;
        height: 210px;
    }
    .contents .not3 {
        width: 100%;
        height: 210px;
    }
    .contents .not4 {
        width: 100%;
        height: 210px;
    }
}

결과

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

flex를 이용한 레이아웃

각각의 자식 요소에 적용하는 것이 아니라 부모 요소에만 적용하면 된다.
display: flex; 아이템들을 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 결정 : (flex-wrap flex-wrap: wrap;)
방향 설정은 flex-direction으로 배치되는 축의 방향을 결정하는 속성.
row : 기본값으로, 아이템들이 가로(행) 방향으로 배치
row-reverse : 아이템들이 역순으로 가로 배치
column : 아이템들이 세로(열) 방향으로 배치
column-reverse : 아이템들이 역순으로 세로 배치

* {
    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;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.contents {}

.contents .left {}

.contents .left .cont1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}

.contents .right {
    display: flex;
    flex-wrap: wrap;
}

.contents .right .cont2 {
    width: 100%;
    height: 200px;
    background-color: #684D43;
}

.contents .right .cont3 {
    width: 50%;
    height: 480px;
    background-color: #594139;
}

.contents .right .cont4 {
    width: 50%;
    height: 480px;
    background-color: #4A352F;
}

@media(max-width: 1220px) {
    .container {
        width: 96%;
    }

    .contents {
        display: flex;
    }

    .contents .left {
        width: 30%;
    }

    /* height값은 자식요소에만 */

    .contents .left .cont1 {
        width: 100%;
        height: 780px;
    }

    .contents .right {
        width: 70%;
    }

    .contents .right .cont2 {
        width: 100%;
        height: 390px;
    }

    .contents .right .cont3 {
        width: 50%;
        height: 390px;
    }

    .contents .right .cont4 {
        width: 50%;
        height: 390px;
    }
}

@media(max-width: 768px) {
    .container {
        width: 100%;
    }

    .contents .right .cont2 {
        width: 100%;
        height: 260px;
    }

    .contents .right .cont3 {
        width: 100%;
        height: 260px;
    }

    .contents .right .cont4 {
        width: 100%;
        height: 260px;
    }
}

@media(max-width: 480px) {
    .contents {
        flex-wrap: wrap;
    }

    .contents .left {
        width: 100%;
        height: 150px;
    }

    .contents .left .cont1 {
        height: 150px;
    }

    .contents .right {
        width: 100%;
        height: 630px;
    }

    .contents .right .cont2 {
        height: 210px;
    }

    .contents .right .cont3 {
        height: 210px;
    }

    .contents .right .cont4 {
        height: 210px;
    }
}

결과

See the Pen layout05-flex by kimyihyung (@kimyihyung) on CodePen.

grid를 이용한 레이아웃

display: grid; table처럼 행과 열 나누며 area를 정해주면 됩니다.
grid-template-rows : 명시적 행의 크기
grid-template-cloumns : 명시적 열의 크기
grid-template-areas : 영역 테이블 생성

* {
    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 con4"
    ;
    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;
}

@media (max-width: 1220px) {
    .container {
        width: 96%;
    }

    .contents {
        grid-template-areas:
            "cont1 cont2 cont2"
            "cont1 cont3 cont4"
        ;
        /* 
        grid-template-columns: repeat(3, 33.3333%);
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-columns: 33.3333% 33.3333% 33.3333%;
        */
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }

    .contents {
        grid-template-areas:
            "cont1 cont2"
            "cont1 cont3"
            "cont1 cont4"
        ;
        grid-template-columns: 30% 70%;
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .contents {
        grid-template-areas:
            "cont1"
            "cont2"
            "cont3"
            "cont4"
        ;
        grid-template-columns: 100%;
        grid-template-rows: 150px 210px 210px 210px;
    }
}

결과

See the Pen layout05-grid by kimyihyung (@kimyihyung) on CodePen.