레이아웃 grid에 대해 알아봅시다.(최근에 사용하는 방식) 3 / 3

grid에 대해 알아보자

원하는 레이아우을 먼저 스케치하고 그것을 위해 필요한 속성을 추가하는 방식입니다. 

현재 IE에서는 지원하고 있지 않으니 Chrome이나 firefox 또는 opera 최신버전에서 확인이 가능합니다.

 

grid 요약설명

grid 속성은 CSS Grid Layout을 사용하여 요소의 레이아웃을 지정하는 데 사용됩니다.

이 속성은 요소의 부모 컨테이너에 적용되며, 이 컨테이너를 그리드 컨테이너라고합니다.

 

grid 속성에는 grid-template-rows, grid-template-columns, grid-template-areas, grid-template, grid-row-gap, grid-column-gap, grid-gap, grid-auto-rows, grid-auto-columns, grid-auto-flow 등이 있습니다.

 

grid-template-rows와 grid-template-columns 속성은 그리드의 행과 열의 크기를 지정하는 데 사용됩니다.

grid-template-areas 속성은 그리드 영역을 지정하는 데 사용됩니다.

grid-template 속성은 grid-template-rows, grid-template-columns, grid-template-areas를 모두 지정하는 축약형 속성입니다.

grid-row-gap과 grid-column-gap 속성은 그리드 셀 사이의 간격을 지정하는 데 사용됩니다.

grid-gap 속성은 grid-row-gap과 grid-column-gap을 모두 지정하는 축약형 속성입니다.

grid-auto-rows와 grid-auto-columns 속성은 그리드 셀의 자동 크기를 지정하는 데 사용됩니다.

grid-auto-flow 속성은 새로운 그리드 항목이 추가될 때 자동으로 배치되는 방법을 지정하는 데 사용됩니다.

grid 속성을 사용하여 웹 페이지 레이아웃을 더욱 유연하고 복잡하게 만들 수 있습니다.

 

grid 적용하기전

 

HTML

 <div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="article1"></div>
    <div id="article2"></div>
    <div id="article3"></div>
    <div id="footer"></div>
</div>

-----------------------------------------------------------------------------------------

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #E8F5E9;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-areas: 
        "header header header"
        "nav nav nav"
        "article1 article2 article3"
        "footer footer footer";
    grid-template-columns: 300px 600px 300px;
    grid-template-rows: 100px 100px 780px 100px;
}
#header {
    width: 1200px;
    height: 100px;
    background-color: #C8E6C9;
    grid-area: header;
}
#nav {
    width: 1200px;
    height: 100px;
    background-color: #A5D6A7;
    grid-area: nav;
}
#article1 {
    width: 300px;
    height: 780px;
    background-color: #81C784;
    grid-area: article1;
}
#article2 {
    width: 600px;
    height: 780px;
    background-color: #66BB6A;
    grid-area: article2;
}
#article3 {
    width: 300px;
    height: 780px;
    background-color: #4CAF50;
    grid-area: article3;
}
#footer {
    width: 1200px;
    height: 100px;
    background-color: #43A047;
    grid-area: footer;
}

코드 설명

1. HTML에 div 태그  6개를 만듭니다.(header, nav, article1, article2, article3, footer)

2. CSS에 스타일을 적용하였습니다.

3. grid는 아직 사용하지 않았습니다.

grid 적용 후

#wrap {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-areas: 
        "header header header"
        "nav nav nav"
        "article1 article2 article3"
        "footer footer footer";
    grid-template-columns: 300px 600px 300px;
    grid-template-rows: 100px 100px 780px 100px;
}

코드 설명

1. 웹페이지 정렬 방법을 display: grid를 사용하였습니다.

2.각각 div에 grid-area로 이름을 할당 받았습니다.

3. grid-template-columns 는 가로 영역을 지정합니다.

4. 총 영역은 width: 1200px;이니간 / 칸을 3곳으로 나눴습니다.

    (1번째 300px / 2번째 600px / 3번째 300px)

5. grid-template-rows : 는 이제 세로 영역을 지정합니다.

6. grid-template-areas로 div에 주었던 이름을 근거로 grid를 쌓아서 웹페에지를 정렬하였습니다.