HTML 레퍼런스 북

레이아웃05

이번 레이아웃은 레이아웃 03번이랑 유사합니다. 공부하실 때 레이아웃03번도 참고하면 도움이 될 것입니다.

float을 이용한 레이아웃

float이란, 페이지에서 이미지와 텍스트를 인라인으로 어우러지게 할 수 있는 기능입니다.(구버전)
※ float 속성을 적용하면 그 다음 요소에도 float가 적용되어 버그가 생길 수 있습니다. 이럴 때 사용할 수 있는 속성이 "clear" 입니다.

사용 방법
div태그는 block특성을 가지고 있기 때문에 세로로 나타납니다. 이를 가로로 정렬시켜주는 것이 float입니다.

*{
    margin: 0;
    padding: 0;
}
#wrap {
    width: 100%;
}
#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 {
    margin: 0 auto;
    width: 1200px;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.contents .con1 {
    width: 100%;
    height: 100px;
    background-color: #74574A;
}
.contents .con2 {
    width: 100%;
    height: 200px;
    background-color: #684D43;
}
.contents .con3 {
    width: 50%;
    height: 480px;
    float: left;
    background-color: #594139;
}
.contents .con4 {
    width: 50%;
    height: 480px;
    float: left;
    background-color: #4A352F;
}
/* 
    float으로 인한 영역깨짐 방지법
    1. 깨지는 영역에 clear:both를 설정한다. ->But, 구조가 복잡해지면 문제가 생길 수 있음.
    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 {
    margin: 0 auto;
    width: 96%;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    }
    .contents .con1 {
        width: 30%;
        height: 780px;
        float: left;
    }
    .contents .con2 {
        width: 70%;
        height: 390px;
        float: left;
    }
    .contents .con3 {
        width: 35%;
        height: 390px;
    }
    .contents .con4 {
        width: 35%;
        height: 390px;
    }
}
@media (max-width: 768px){
    .container {
        width: 100%;
    }
    .contents .con1 {
        width: 30%;
        height: 780px;
        float: left;
    }
    .contents .con2 {
        width: 70%;
        height: 260px;
        float: left;
    }
    .contents .con3 {
        width: 70%;
        height: 260px;
    }
    .contents .con4 {
        width: 70%;
        height: 260px;
    }
}
@media (max-width: 480px){
    .contents .con1 {
        width: 100%;
        height: 150px;
    }
    .contents .con2 {
        width:  100%;
        height: 210px;
        float: left;
    }
    .contents .con3 {
        width: 100%;
        height: 210px;
    }
    .contents .con4 {
        width: 100%;
        height: 210px;
    }
}

결과

flex을 이용한 레이아웃

flex란, 유연성을 뜻하며 레이아웃 배치 전용 기능으로 고안되었습니다. (신버전)
flex 아이템들은 가로 방향으로 배치되고 inline 요소들 처럼 아이템들의 width만큼을 차지하게 됩니다.

사용 방법
display: flex; 아이템들을 더 이상 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성 : flex-wrap flex-wrap: wrap;

* {
    margin: 0;
}

#wrap {
    width: 100%;
}

#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 {
    margin: 0 auto;
    width: 1200px;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.3);
}

.contents .left {
    width: 100%;
}

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

.contents .right {
    height: 680px;
    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%;
        height: 780px;
    }
    .contents .left .con1 {
        width: 100%;
        height: 780px;
    }
    .contents .right {
        width: 70%;
        height: 780px;
    }
    .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 {
        flex-wrap: wrap;
    }
    .contents .left {
        width: 100%;
        height: 150px;
    }
    .contents .left .con1 {
        height: 150px;
    }
    .contents .right {
        width: 100%;
        height: 630px;
    }
    .contents .right .con2 {
        width: 100%;
        height: 210px;
    }
    .contents .right .con3 {
        width: 100%;
        height: 210px;
    }
    .contents .right .con4 {
        width: 100%;
        height: 210px;
    }
}

결과

grid을 이용한 레이아웃

grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. 위의 방법들과는 달리, 더 복잡한 레이아웃을 만들기 위해서는 grid방법을 사용하는 것이 편리합니다.

사용 방법
display: grid; table처럼 행과 열을 나눠준 후에 area를 정해주면 됩니다.

*{
    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 {
    display: grid;
    }
    .contents {
    display: grid;
    grid-template-areas: 
        "cont1 cont2 cont2"
        "cont1 cont3 cont4";
    grid-template-columns: 1fr 1fr 1fr; /* 동등하게 3등분*/
    /* grid-template-columns: repeat(3, 1fr); 동등하게 3등분
    grid-template-columns: repeat(3, 33.3333% );  동등하게 3등분
    grid-template-columns: 33.3333% 33.3333% 33.3333%; 동등하게 3등분 */

    grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 768px){
    .container {
    width: 100%;
    }
    .contents {
    display: grid;
    grid-template-areas: 
        "cont1 cont2"
        "cont1 cont3"
        "cont1 cont4";
    grid-template-columns: 30% 70%; /* 동등하게 3등분*/
    grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 480px){
    .contents {
    display: grid;
    grid-template-areas: 
        "cont1"
        "cont2"
        "cont3"
        "cont4";
    grid-template-columns: 100%;
    grid-template-rows: 150px 210px 210px 210px;
    }
}