레이아웃 - 02

레이아웃02

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

float을 이용한 레이아웃

float에서 clear : both; 대신 구조를 묶어서 부모 속성에게 overflow: hidden; 속성을 줄 수 있습니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 1200px;
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    width: 1200px;
    height: 100px;
    background-color: #A5D6A7;
}
#main {
    width: 1200px;      /* 자식이 height값이 있어서 부모는 필요 없음 */
    overflow: hidden;       /* clear : both; 와 비슷한 기능 */
}
#aside {
    width: 300px;
    height: 780px;
    background-color: #81C784;
    float: left;
}
#section {
    width: 600px;
    height: 780px;
    background-color: #66BB6A;
    float: left;
}
#article {
    width: 300px;
    height: 780px;
    background-color: #4CAF50;
    float: left;
}
#footer {
    width: 1200px;
    height: 100px;
    background-color: #43A047;
    /* clear: both;            버그가 생기기 때문에 */
}                   

결과

flex을 이용한 레이아웃

부모 속성인 태그에 display: flex;를 해주면 손쉽게 할 수 있습니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    height: 100px;
    background-color: #A5D6A7;
}
#main {
    display: flex;      /* main에다가 flex넣어주면 끝! */
}
#aside {
    width: 30%;
    height: 780px;
    background-color: #81C784;
}
#section {
    width: 40%;
    height: 780px;
    background-color: #66BB6A;
}
#article {
    width: 30%;
    height: 780px;
    background-color: #4CAF50;
}
#footer {
    height: 100px;
    background-color: #43A047;
}                                                         

결과

grid를 이용한 레이아웃

flex와 마찬가지로 부모 속성에 display: grid를 설정 해 줍니다. grid는 부모가 처리 받기 때문에 자식 속성에 따라 영역을 지정 해 주지 않아도 괜찮습니다.

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #C8E6C9;
}
#nav {
    width: 100%;
    height: 100px;
    background-color: #A5D6A7;
}
#main {
    width: 100%; 
    display: grid;      /* flex와 마찬가지로 main에 선언 */
    grid-template-columns: 30% 40% 30%;    /* 영역 설정, main에 묶어서 따로 영역 지정x */
    grid-template-rows: 780px;      /* grid는 부모가 다 처리 해주기 때문에 자식에게 영역설정x */
}
#aside {
    background-color: #81C784;
}
#section {
    background-color: #66BB6A;
}
#article {
    background-color: #4CAF50;
}
#footer {
    width: 100%;
    height: 100px;
    background-color: #43A047;
}                                                                   

결과