레이아웃01

레이아웃01

레이아웃을 만드는 방법에는 크게 3가지가 있습니다.

01. float 방식
02. flex 방식
03. grid 방식

각각의 방식에는 장단점이 있으며 상황에 따라 선택하여 사용하는게 좋습니다.

---

이번 레이아웃은 가장 기본적이고 심플한 레이아웃입니다.

float을 이용한 레이아웃

float 방식은 옮겨야 할 블록에 float:left로 정렬을 하고 clear:both를 통해 플로팅을 닫아 형태를 완성합니다.
많이 쓰이는 방식이나 복잡한 구조일수록 사용하기 힘든 단점이 있습니다.

float 방식은 clear, overflow, clearfix 세가지 방식이 있습니다. 이번 방식은 clear 방식입니다.

*{
    margin: 0;
}
body {
    background-color: #FFF3E0;
    height: 100%;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #FFE0B2;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #FFCC80;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #FFB74D;
    float: left;
}
#section {
    width: 70%;
    height: 780px;
    background-color: #FFA726;
    float: left;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #FF9800;
    clear: both;
}

@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
        #aside {
        width: 30%;
    }
    #section {
        width: 70%;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
        #aside {
        width: 30%;
    }
    #section {
        width: 70%;
    }
}
@media (max-width: 480px){
    #wrap {
        width: 100%;
    }
        #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }     
}

---

flex를 이용한 레이아웃

flex 방식은 정렬해야 할 블록에 flex-wrap을 주어 떨어진 블록을 붙이면서 정렬시키는 방식입니다.
간단한 코드만으로 형태를 완성할 수 있는 장점이 있지만 복잡한 구조에선 추가 작업이 필요하며 익스플로러 등의 일부 브라우저에선 호환이 안되는 단점이 있습니다.

*{
    margin: 0;
}
body {
    background-color: #FFF3E0;
    height: 100%;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #FFE0B2;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #FFCC80;
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #FFB74D;
}
#section {
    width: 70%;
    height: 780px;
    background-color: #FFA726;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #FF9800;
}

@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
}
@media (max-width: 480px){
    #wrap {
        width: 100%;
    }
        #aside {
        width: 100%;
        height: 300px;
    }
    #section {
        width: 100%;
        height: 480px;
    }     
}

---

grid를 이용한 레이아웃

gird 방식은 블록을 테이블처럼 구역별로 나누어 부모 요소가 자식 요소를 컨트롤 함으로써 형태를 완성하는 방식입니다.
비교적 많은 코드가 필요하지만 부모 요소만 조절하면 모든 블록을 조절할 수 있어 복잡한 구조일수록 편해집니다.

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    grid-template-areas: 
        "header header"
        "nav nav"
        "aside section"
        "footer footer"
    ;
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: 100px 100px 780px 100px;
}
#header {
    background-color: #FFE0B2;
    grid-area: header;
}
#nav {
    background-color: #FFCC80;
    grid-area: nav;
}
#aside {
    background-color: #FFB74D;
    grid-area: aside;
}
#section {
    background-color: #FFA726;
    grid-area: section;
}
#footer {
    background-color: #FF9800;
    grid-area: footer;
}

@media (max-width: 1300px){
    #wrap {
        width: 96%;
    }
}
@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
}
@media (max-width: 480px){
    #wrap {
    grid-template-areas: 
        "header"
        "nav"
        "aside" 
        "section"
        "footer"
    ;
    grid-template-columns: 100%;
    grid-template-rows: 100px 100px 300px 480px 100px;
    }
}

<결과입니다>