레이아웃03

레이아웃03

메인에 사이드와 아티클 3개가 들어간 구조

float을 이용한 레이아웃 + 반응형

float은 본래 레이아웃의 용도가 아니었으나 마땅한 속성이 없어 사용하게되었다. 둥둥 뜨는 형태로 float 속성이 적용이 안된 blockbox는 float된 box 밑으로 들어가게 된다.
때문에 배치이동이 필요한 요소에 float을 이용하면 세로로만 배치되던 요소를 가로로 나란히 배치해줄 수 있다.

주 사용 속성
float: left; - 요소를 위로 뜨게 하여 왼쪽으로 배치해주는 속성으로 자신이 갈 수 있는 가장 첫번째 왼쪽에 배치가 된다.
clear: both; - float을 한 요소아래로 다른 요소가 숨어버리는 버그를 잡아주는 역할의 속성 보통 footer와 같은 하단 요소에 스타일을 적용한다. clearfix : float으로 인한 영역 깨짐을 방지하기 위해 생긴 속성으로 깨진 영역에 대한 부모요소에게 clearfix 선택자를 선언해준다.

clearfix를 이용한 영역깨짐 방지
1. 깨지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflowf: hidden을 설정한다. - 애니메이션 효과가 적용되지 않는다.
3. clearfix를 설정한다. - 망가진 레이아웃 부모박스에 클래스로 이름을 설정해준다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
}
#wrap {
    width: 1200px;
    margin: 0 auto; 
}
#header {
    width: 100%;
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #81D4FA;
}
#main {
    width: 100%;
        }
#aside {
    width: 30%;
    height: 780px;
    background-color: #4FC3F7;
    float: left;
}
#section {
    width: 70%;
    height: 260px;
    background-color: #29B6F6;
    float: left;

}
#article01 {
    width: 70%;
    height: 260px;
    background-color: #03A9F4;
    float: left;

}
#article02 {
    width: 70%;
    height: 260px;
    background-color: #039BE5;
    float: left;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #0288D1;
}

/* clearfix */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* mediaqurey */
@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
    #article01 {
        width: 35%;
        height: 520px;
    }
    #article02 {
        width: 35%;
        height: 520px;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
    #section {
        width: 70%;
        height: 390px;
    }
    #article01 {
        width: 70%;
        height: 390px;
    }
    #article02 {
       display: none;
    }
    /* 레이아웃이 사라져야 할 땐 display: none을 사용해주어야 한다. */
}
@media (max-width: 480px){
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }
    #article01 {
        width: 100%;
        height: 150px;
    }
}

flex을 이용한 레이아웃 + 반응형

레이아웃의 배치를 위해 나오게 된 속성으로 배치하는 데 있어 간편하다.
float과 달리 배치가 필요한 각 요소에 적용하는 것이 아니라 그 요소들을 품고 있는 부모 요소에게 스타일을 선언해주어야 한다.
때문에 각 섹션과 구조를 잘 파악하여 부모 자식 관계에 대한 마크업을 잘 해주는 것이 중요하다.

주 사용 속성
display: flex; - display는 웹페이지에서 레이아웃 및 요소가 어떻게 보이는가를 선언해주는 속성으로 즉 해당 요소를 flex 스타일로 보이게 하는 속성
flex-wrap: wrap; - flex속성을 통해 배치한 요소가 잘 적용되도록 해주는 속성으로 적용하지 않을 경우 배치 적용이 되지 않는다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
}
#wrap {
    width: 1200px;
    margin: 0 auto; 
}
#header {
    width: 100%;
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #81D4FA;
}
#main {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 780px;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #4FC3F7;
}
#section {
    width: 70%;
    height: 260px;
    background-color: #29B6F6;
}
#article1_01 {
    width: 100%;
    height: 260px;
    background-color: #03A9F4;
}
#article1_02 {
    width: 100%;
    height: 260px;
    background-color: #039BE5;
}
#footer {
    height: 100px;
    background-color: #0288D1;
}

/* mediaqurey */
@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
    #article1 {
        display: flex;
    }
    #article1_01 {
        width: 50%;
        height: 520px;
    }
    #article1_02 {
        width: 50%;
        height: 520px;
    }
    /* 사이즈 별 레이아웃이 다르기 때문에 한번 더 세분화 시켜주는 것 */
}
@media (max-width: 768px){ 
    #wrap {
        width: 100%;
    }
    #section {
        height: 390px;
    }
    #article1 {
        display: flex;
    }
    #article1_01 {
        width: 100%;
        height: 390px;
    }
    #article1_02 {
        display: none;
    }
}
@media (max-width: 480px){
    #aside {
        width: 100%;
        height: 200px;
    }
    #section {
        width: 100%;
        height: 430px;
    }
    #article1_01 {
        height: 150px;
    }
}

grid을 이용한 레이아웃 + 반응형

flex와 마찬가지로 부모 컨테이너에게 속성을 부여해준다.
하지만 grid는 flex와 다르게 2개 축을 모두 활용하여 격자(#) 위에 아이템을 배치하는 레이아웃 방식이다.
복잡한 구조의 웹을 구성하려면 grid 레이아웃 방법을 사용하는 것이 효율적이다.

주 사용 속성
display: gird; - 레이아웃 및 요소를 grid 스타일로 보이게 하는 속성
grid-template-areas - 레이아웃을 #과 같은 격자로 나누어서 구조를 나누어 주는 역할
grid-template-columns: ; - 격자로 나눈 요소의 가로 값을 정해주는 속성
grid-template-rows: ; - 격자로 나눈 요소의 세로 값을 정해주는 속성
grid-area: ; - 자식 컨테이너에게 부모에게 넣은 스타일이 적용될 수 있도록 이름을 부여해주는 속성

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E1F5FE;
}
#wrap {
    width: 1200px;
    margin: 0 auto; 
}
#header {
    width: 100%;
    height: 100px;
    background-color: #B3E5FC;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #81D4FA;
}
#main {
    display: grid;
    grid-template-areas: 
        "aside section"
        "aside article01"
        "aside article02"
    ;
    grid-template-columns: 30% 70%;
    grid-template-rows: 260px 260px 260px;
}
#aside {
    background-color: #4FC3F7;
    grid-area: aside;
}
#section {
    grid-area: section;

    background-color: #29B6F6;
}
#article01 {
    grid-area: article01;
    background-color: #03A9F4;
}
#article02 {
    grid-area: article02;
    background-color: #039BE5;
}
#footer {
    height: 100px;
    background-color: #0288D1;
}

/* mediaqurey */
@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
    #main {
        grid-template-areas: 
            "aside section section"
            "aside article01 article02"
            "aside article01 article02"
        ;
        grid-template-columns: 30% 35% 35%;
        grid-template-rows: 260px 520px;
    }
}
@media (max-width: 768px){ 
    #wrap {
        width: 100%;
    }
    #main {
        grid-template-areas: 
            "aside section"
            "aside article01"
        ;
        grid-template-columns: 30% 70%;
        grid-template-rows: 390px 390px;
    }
    #article02 {
        display: none;
    }
}
@media (max-width: 480px){
    #main {
        grid-template-areas: 
        "aside"
        "section"
        "article01"
        ;
        grid-template-columns: 100%;
        grid-template-rows: 200px 430px 150px; 
    }
}