레이아웃 - 01

레이아웃01

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

float을 이용한 레이아웃

이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. float는 사용시 clear속성을 이용하여 이후의 요소들이 더이상 float의 속성에 영향을 받지 않도록 합니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 1200px;
    height: 100px;
    background-color: #FFE0B2;
}
#nav {
    width: 1200px;
    height: 100px;
    background-color: #FFCC80;
}
#aside {
    width: 400px;
    height: 780px;
    background-color: #FFB74D;
    float: left;            /* 정렬 기능 */
}
#section {
    width: 800px;
    height: 780px;
    background-color: #FFA726;
    float: left;
}
#footer {
    width: 1200px;
    height: 100px;
    background-color: #FF9800;
    clear: both;        /* float에 버그가 생겨서 사용 */
}                    

결과

flex을 이용한 레이아웃

flex는 float와는 다르게 부모에게 부여해주는 속성입니다. 사용시에는 display : flex; 를 사용해 줍니다.

* {
margin: 0;
padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    display: flex;      /* 부모한테 설정 해주는 것 */
    flex-wrap: wrap;
}
#header {
    width: 1200px;
    height: 100px;
    background-color: #FFE0B2;
}
 #nav {
    width: 1200px;
    height: 100px;
    background-color: #FFCC80;
}
#aside {
    width: 400px;
    height: 780px;
    background-color: #FFB74D;
}
#section {
    width: 800px;
    height: 780px;
    background-color: #FFA726;
}
#footer {
    width: 1200px;
    height: 100px;
    background-color: #FF9800;
}                 

결과

grid를 이용한 레이아웃

gird는 부모 속성에 지정해 주는 방법 입니다. 각 자식속성에 grid-area를 지정해 주어서 복잡한 레이아웃을 편리하게 만들 수 있습니다. 사용시에는 display: grid;를 이용합니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF3E0;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    display: grid;          /* 부모에게 설정 */
    grid-template-areas: 
        "header header"
        "nav nav"
        "aside section"
        "footer footer";
        grid-template-columns: 400px 800px;     /* 30% 70% 써도 상관없음 */
        grid-template-rows: 100px 100px 780px 100px;
        /* grid는 부모가 설정할 수 있음 (복잡한 레이아웃 편하게 할 수 있음) */
}
#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;
}                                                     

결과