CSS으로 레이아웃을 짤 때 display에 여러 속성이 있는데 그 중 Grid가 가장 최근에 나오고 쉽다고 한다.

나도 Flex나 다른거 이리저리 봤는데 그냥 어려워서 패스했다.

먼저 웹페이지 레이아웃을 구상한다.

Header에는 웹사이트 제목 / Side에는 카테고리가 들어가는데 보통 Navigator라 함 / Main에 Contents를 넣는데 최신HTML에선 Section과 Article태그를 제공함 / Footer 하단에 사이트 정보나 저작권 정보등을 넣음

이렇게 구상하기로 하면 HTML에서 먼저 div로 구역을 나눠준다.

<div class="container">
 <div class="header"></div>
 <div class="side"></div>
 <div class="main"></div>
 <div class="footer"></div>
</div>

HTML에서 구역나누기를 완료했으면 CSS로 넘어간다.

먼저 display는 grid를 사용하고 나머지는 grid 여러가지 기능을 이용해 설정해준다.

.container{
 display : grid;
 grid-template-columns : 20% 1fr;
 grid-template-rows : 10px 1fr 10px;
 height : 100%;
 grid-gap : 20px;
}

1. 전체 구역을 grid로 설정하기
2. grid-template-columns는 세로로 분할하기 (1fr은 나머지 구역을 모두 쓴다는 뜻)
3. grid-template-rows는 가로로 분할하기
4. height는 100%를 사용하기
5. grid-gap는 grid간의 간격을 20px로 설정하기

후에 이제 어떤 class가 어떤 구역을 담당할지 AREA를 정해준다.

.header{
grid-area : header;
}
.side{
grid-area : side;
}
.main{
grid-area : main;
}
.footer{
grid-area : footer;
}

그리고 마지막으로 정한 area를 확정시킨다. ( 처음 사용했던 .container 부분)

.container{
 display : grid;
 grid-template-columns : 20% 1fr;
 grid-template-rows : 10px 1fr 10px;
 height : 100%;
 grid-gap : 20px;
 grid-template-areas :
  "header header"
  "side main"
  "footer footer";
}

1. 첫 줄과 마지막 줄은 header와 footer만 있어도 일단 세로 두줄로 나눴으니까 두번씩 써준다.

이렇게 되면 Layout 완성!

그런데 모바일에서 본다면 이 화면이 깨질테니 간단히 미디어쿼리를 추가해서 반응협 웹을 더해준다.

@media all and (max-width : 575px){
 .container{
  grid-template-columns : 1fr;
  grid-template-rows : 10px  10px 1fr 10px;
  height : 100%;
  grid-gap : 20px;
  grid-template-areas :
   "header"
   "side"
   "main"
   "footer";
 }

1. columns는 한 줄이니까 20%에서 1fr로 변경
2. rows는 그럼 이제 side와 main이 분리되니까 10px 1fr 10px 에서 10px 10px 1fr 10px로 변경
3. areas도 다시 정해준다.

이제 정말 완성!