레이아웃(Layout) 유형05

레이아웃05

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이러한 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. 다음의 레이아웃을 3가지 방법으로 작업해 보도록 하겠습니다.

float 속성을 이용한 레이아웃

'float'라는 단어는 사전적으로는'뜨다'라는 의미를 가지고 있습니다. 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인지에 대한 속성입니다. 그러나, float를 사용하면 영역이 깨지는 버그가 발생할 수 있습니다. 영역 깨짐을 방지하는 3가지 방법은 다음과 같습니다.

1. 깨지는 영역에 clear:both를 설정합니다.
2. 부모 박스 영역에 overflow:hidden을 설정합니다.
3. clearfix를 설정합니다. 가장 안정적인 방법입니다.

* {
    margin: 0;
}

#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 .cont1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}
                    
.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;
}
                    
/* clearfix */
.clearfix::before,
.clearfix::after {
    content: ''; /* 가상요소 */
    display: block;
    line-height: 0;
}
                    
.clearfix::after {
    clear: both;
}
                    
@media(max-width:1220px) {
    .container {
        width: 96%;
    }

    .contents .cont1 {
        width: 30%;
        height: 780px;
        float: left;
    }
                    
    .contents .cont2 {
        width: 70%;
        height: 390px;
        float: left;
    }
                    
    .contents .cont3 {
        width: 35%;
        height: 390px;
    }
                    
    .contents .cont4 {
        width: 35%;
        height: 390px;
    }
}
                    
@media(max-width:768px) {
    .container {
        width: 100%;
    }

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

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

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

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

@media(max-width:480px) {
    .contents .cont1 {
        width: 100%;
        height: 150px;
    }

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

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

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

flex 속성을 이용한 레이아웃

'flex' 속성은 'flexible'의 줄임말로, 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가지고 있습니다. container와 item들이 부모와 자식 관계일 때, container에 display:flex; 혹은 display:inline-flex;속성을 줌으로써 flexbox 레이아웃을 적용할 수 있습니다.

* {
    margin: 0;
}

#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 .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;
    }
                
    .contents .right {
        width: 70%;
        height: 780px;
    }
                
    .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 {
        width: 100%;
        height: 150px;
    }
                
    .contents .right {
        width: 100%;
        height: 630px;
    }
                
    .contents .right .cont2 {
        height: 210px;
    }
                
    .contents .right .cont3 {
        height: 210px;
    }
                
    .contents .right .cont4 {
        height: 210px;
    }
}

grid 속성을 이용한 레이아웃

'grid'는 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데에 유용하게 사용됩니다. grid 레이아웃은 table과 마찬가지로 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다.

* {
    margin: 0;
}

#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 {
        grid-template-areas:
            "cont1 cont2 cont2"
            "cont1 cont3 cont4";
        grid-template-columns: 1fr 1fr 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;
    }
}

결과

See the Pen layout05_05 by mj0614k (@mj0614k) on CodePen.