레이아웃 배치 방법 05 : [float,grid,flex]

레이아웃05

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

---

float을 이용한 레이아웃

float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법 입니다

* {
    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);
}
.contents .cont1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}
.contents .cont2 {
    width: 100%;
    height: 200px;
    background-color: #684D43;
}
.con_sel{
    width: 100%;
    height: 480px;
    overflow: hidden;
}
.contents .cont3 {
    width: 50%;
    height: 480px;
    background-color: #594139;
    float: left;
}
.contents .cont4 {
    width: 50%;
    height: 480px;
    background-color: #4A352F;
    float: left;
}
/*
    float으로 인한 영역깨짐 방지법
    1. 깨지는 영역에 clear : both를 설정한다.
    2. 부모 박스 영역에  overflow : hidden을 설정한다.
    3. clearfix를 설정한다.
*/
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
}
.clearfix::after {
    clear: both;
}
@media (max-width: 1220px) {
    .container {
        width: 96%;
    }
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}
@media (max-width: 480px) {
    
}

결과

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;
}
@media (max-width: 1220px){
    .container{
        width: 96%;
    }
    .contents{
        display: grid;
        grid-template-areas: 
        "cont1 cont2 cont2"
        "cont1 cont3 cont4"
        ;
        /* repeat(3, 33.3333%) 이렇게 표현해줄수도 있음 */
        /* repeat(반복, 수치) */
        grid-template-columns: 1fr 1fr 1fr ; 
        grid-template-rows: repeat(2, 1fr);
    }
    .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: 768px){
    .container{
        width: 100%;
    }
    .contents{
        display: grid;
        grid-template-areas: 
        "cont1 cont2"
        "cont1 cont3"
        "cont1 cont4"
        ;
        /* repeat(3, 33.3333%) 이렇게 표현해줄수도 있음 */
        /* repeat(반복, 수치) */
        grid-template-columns: 30% 70%;
        grid-template-rows: repeat(3, 1fr);
    }
    .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: 480px){
    .container{
        width: 100%;
    }
    .contents{
        display: grid;
        grid-template-areas: 
        "cont1"
        "cont2"
        "cont3"
        "cont4"
        ;
        /* repeat(3, 33.3333%) 이렇게 표현해줄수도 있음 */
        /* repeat(반복, 수치) */
        grid-template-columns: 100%;
        grid-template-rows: 150px 210px 210px 210px;
    }
    .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;
    }
}

결과

flex을 이용한 레이아웃

flex(플렉스)는 레이아웃 배치 전용 기능으로 고안되었는데 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.

flex에 속해있는 요소들읜 가로 방향으로 배치되며 자신의 width 값은 반영되나 height는 컨테이너의 높이에 맞게 늘어납니다.

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

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

    .contents .right {
        width: 70%;
    }

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

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

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

}

@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 {
        display: flex;
        flex-wrap: wrap; /*flex 사용시 width값 height값을 알기위한 용도*/
    }
    .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;
    }
}

결과