[CSS] Game으로 Grid를 배우자

웹개발을 하다보면 항상 늘 언제나 헷갈리는 것이 

CSS이다. 특히 내가 원하는 곳에 버튼과 폼과 기타 요소들을 배치하고 싶은데 

내 맘대로 절대 안움직인다. 웹 페이지의 레이아웃 개념이 부족하기 때문이다. 

그래서 그 개념을 한번 잡고가기 위해 검색하던 중 Game으로 배우는 사이트를 발견하였다.이름하여...

 

Grid Garden

https://cssgridgarden.com/#ko

Grid Garden

 

사이트를 접속하면 이렇게 바로 1단계 게임이 시작된다.

그리드로 나누어진 땅에 CSS 코드를 입력해서 물을 준다.

1단계는 매우 쉬웠다. grid-column-start: 3;을 입력하면 3번째 칸에 물주기 성공 !!

 

이제 2단계로 넘어가보자 

잠깐 여기서 그리드에 대해 설명한다.

 

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 보여준다. 테이블처럼 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있다. 테이블보다 훨씬 더 다양한 레이아웃을 구현할 수 있습니다. 

 

 

2단계는 1단계와 비슷해서 금방 해결했다.

3단계는 grid-end의 개념이 등장한다.

 

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
  grid-column-start: 1;
  grid-column-end: 4; //end를 쓸 경우 여러 열에 걸쳐 확장이 가능하다. 4번째 수직선까지 확장한다.
}

 

 

단계를 쭉쭉 넘기다보면 6단계에서는 음수로도 접근이 가능함을 알려준다.

 

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#poison {
	grid-column-start: -3; //음수는 우측에서 시작. 왼쪽 3번째 수직선에 닿은 영역이 선택된다.
}

 

● 7단계

span을 이용하여 열의 넓이를 지정할 수 있다.

#water {
  grid-column-start: 2;
  grid-column-end: span 2;
}

 

이렇게 2번째, 3번째 영역이 지정된다.

 

● 10단계

10단계에서는 start와 end를 일일이 입력하는 것이 불편하므로, /(슬래쉬)를 사용하여 한번에 입력가능한 방법을 알려준다.

 

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

#water {
	grid-column: 4/ 6; // 4번째 줄부터 6번째 줄까지의 영역을 선택한다.
}

 

이번 시간은 10단계까지 진행하였다. 나머지 단계는 차차 쉴 때 마다 하나씩 해볼 예정입니다 ! 

CSS grid로부터 자유로워지는 그날까지 화이팅 ↗