Layout05

레이아웃5

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

float을 이용한 레이아웃

/*
1. 꺠지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다. (.clearfix::before)
*/
1번 방법은 깨진 영역이 눈에 보여야 적용할 수 있습니다.
2번 방법은 육안상 잘 정리 되어있는 것처럼 보이지만 외부의 애니메이션 같은 효과가 제대로 표시되지 않을 수 있습니다.
3번 방법이 가장 좋은방법으로 clearfix클래스를 적용해서 가상요소 앞뒤로 설정 해주고
float를 적용한 요소의 부모박스에 claerfix 클래스를 적용해주면 됩니다.

* {
    margin: 0;
    padding: 0;
}
#wrap{
    width: 100%;

}
#header{
    width: 100%;
    height: 100px;
    background-color: #EEEBE9;
}
#header .inheader {
    width: 1200px;
    height: 100px;
    background-color: #D5CCC9;
    float: left;

}
#nav{
    width: 100%;
    height: 100px;
    background-color: #B9AAA5;
    float: left;
}
#nav .innav{
    width: 1200px;
    height: 100px;
    background-color: #9D8980;
    float: left;
}
#aside{
    width: 100%;
    height: 780px;
    background-color: #886F65;
    float: left;
}
#aside .inaside1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
    float: left;
}
#aside .inaside2 {
    width: 100%;
    height: 200px;
    background-color: #684D43;
    float: left;
}
#aside .inaside3 {
    width: 50%;
    height: 480px;
    background-color: #594139;
    float: left;
}
#aside .inaside4 {
    width: 50%;
    height: 480px;
    background-color: #4A352F;
    float: left;
}
#footer{
    width: 100%;
    height: 100px;
    background-color: #4E342E;
    float: left;
}
#footer .infooter{
    width: 100%;
    height: 100px;
    background-color: #4A352F;
    float: left;
}
.container{
    width: 1200px;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin: 0 auto;
}

/*  
1. 꺠지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다. (.clearfix::before)
*/
.clearfix::before,
.clearfix::after{
    content: '';
    display: block;
    line-height: 0;;
}
.clearfix::after{
    clear: both;
}

@media (max-width: 1220px){
    .container {
        width: 96%;
    }
    #aside .inaside1{
        width: 30%;
        height: 780px;
        float: left;
    }
    #aside .inaside2{
        width: 70%;
        height: 390px;
        float: left;
    }
    #aside .inaside3{
        width: 35%;
        height: 390px;
        float: left;
    }
    #aside .inaside4{
        width: 35%;
        height: 390px;
        float: left;
    }
}
@media(max-width: 768px){
    .container{
        width: 100%;
    }
    #aside .inaside1{
        width: 30%;
        height: 780px;
    }
    #aside .inaside2{
        width: 70%;
        height: 260px;
    }
    #aside .inaside3{
        width: 70%;
        height: 260px;
    }
    #aside .inaside4{
        width: 70%;
        height: 260px;
    }
}
@media(max-width: 480px){
    #aside .inaside1{
        width: 100%;
        height: 150px;
    }
    #aside .inaside2{
        width: 100%;
        height: 210px;
    }
    #aside .inaside3{
        width: 100%;
        height: 210px;
    }
    #aside .inaside4{
        width: 100%;
        height: 210px;
    }
}

결과

flex을 이용한 레이아웃

이번 flex 레이아웃 작업은 float과 다른 html구조를 사용했습니다. 형제요소 4가지의 형태를 float 방식으로 사용했을 때 반응형 작업을 할때 에로사항이 존재했습니다.
flex를 사용하여 레이아웃 작업을 할때 main태그의 형제요소를 left영역과 right영역으로 나누어 작업하였습니다.
부모태그에 display:flex; 요소를 주고 flex-wrap: wrap;을 사용하여 간단하게 배치하였습니다.

* {
margin: 0;
}

#wrap {}

#header {
    height: 100px;
    background-color: #EEEBE9;
}

#nav {
    height: 100px;
    background-color: #9D8980;
}

#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 .left .con1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}

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

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

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

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

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

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

    .contents .left {
        width: 30%;
    }

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

    .contents .right {
        width: 70%;
    }

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

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

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

    @media (max-width: 768px) {
    .container {
        width: 100%;
    }
    .contents .right .con2 {
        width: 100%;
        height: 260px;
    }

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

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

}

@media (max-width: 480px) {
    .contents {
        display: wrap;
        flex-wrap: wrap;
    }
    .contents .left {
        width: 100%;
        height: 150px;
    }
    .contents .left .con1{
        height: 150px;
    }
    .contents .right {
        width: 100%;
        height: 630px;
    }
    .contents .right .con2{
        height: 210px;
    }
    .contents .right .con3{
        height: 210px;
    }
    .contents .right .con4{
        height: 210px;
    }
}

결과

grid을 이용한 레이아웃

grid를 이용한 레이아웃방법은 2차원 형태의 레이아웃을 배치하기 좋은 방식입니다.
부모요소에서 자식요소의 모든걸 컨트롤 할 수 있습니다. display:grid를 부모요소에 지정하고
grid-template-areas로 영역을 지정해준 다음 grid-template-columns,rows 를 사용해 넓이와 높이를 지정해줍니다.
그리고 지정해준 영역에 grid-area태그를 사용하여 지정해줍니다.

 *{
    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;
    margin: 0 auto;
    height: inherit;
    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;
}

결과