TIL 21.09.01 grid (mini_project2)

11169 단어 TILTIL

grid-template-areas 에 관하여

오늘 시간에는 grid-template-areas 개념을 학습 한 후 이를 토대로 미니 프로젝트를 만들어 보는 시간을 가졌다.

grid-template-areas
grid-template-areas 는 layout을 짤 때 유용하다.

만들고자 하는 row 의 개수와 columns 의 개수를 만들어서 손쉽게 layout을 작성

아래의 코드는 html과 css 파일에 작성한 코드이고 4행 4열로 보통의 웹페이지 layout을 
작성하였다.
html code
  <body>
    <div class ="grid">
      <div class="header"></div>
      <div class="content"></div>
      <div class="nav"></div>
      <div class="footer"></div>
    </div>
  </body>
css code
.grid {
    display: grid;
    grid-template-columns: 100px repeat(2, 150px) 100px; 
    grid-template-rows: 100px repeat(2, 100px) 100px;
    grid-template-areas: 
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer"; 
}

.header{
  background-color: paleturquoise;
  grid-area: header;
}

.content{
  background-color: #F6F6F6;
  grid-area: content;
}

.nav{
  background-color: #BAE1F0;
  grid-area: nav;
}

.footer{
  background-color: palegreen;
  grid-area: footer;
}

grid-column-start      grid-column-end
grid-row-start             grid-row-end

위의 특성을 활용하면 grid-template-areas 보다 쉽게 layout 을 작성할 수 있다

grid-area로 설정한 영역을 stretching 하여 layout을 만드는 것이 특징이다

grid-column-start는 열의 시작 번호를 적는 란이다. 시작 번호는 1번이고 위 코드에서
4개의 칸을 만들어 주었기 때문에 끝나는 열의 번호는 최대 5이다. 행도 마찬가지이다.

따라서 위와 같은 그림의 layout을 만들어주기 위해서는 다음과 같이 작성해주면 위와 같은 
레이아웃을 만들 수 있다.

.grid {
  display: grid;
  grid-template-columns: 100px repeat(2, 150px) 100px; 
  grid-template-rows: 100px repeat(2, 100px) 100px;
}

.header{
  background-color: paleturquoise;
  grid-column-start: 1;
  grid-column-end: 5;
}

.content{
  background-color: #F6F6F6;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4; 
}

.nav{
  background-color: #BAE1F0;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 4;
}

.footer{
  background-color: palegreen;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 5;
}

This is mini project(2) which I made

위에서 배운 내용으 토대로 mini project(2)를 만들었다

해당 프로젝트를 진행하면서 던졌던 질문들

1. 전체적인 grid를 어떻게 구성할지 생각해보기
2. 각 그리드 안에 어떻게 다시 grid를 나눌지 생각해보기
3. 세부 그리드 안에 위치한 아이템을 어떻게 조정 할 지 생각 해보기
자바의 정석 Chapter05 배열
A+B - 8 (11022)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage