# 가상 정원 게임으로 배우는 CSS Grid

> Clean Markdown view of GeekNews topic #15167. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=15167](https://news.hada.io/topic?id=15167)
- GeekNews Markdown: [https://news.hada.io/topic/15167.md](https://news.hada.io/topic/15167.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-06-04T10:50:22+09:00
- Updated: 2024-06-04T10:50:22+09:00
- Original source: [cssgridgarden.com](https://cssgridgarden.com/)
- Points: 5
- Comments: 1

## Topic Body

### 그리드 가든 소개

#### 그리드 가든이란?
- **그리드 가든**은 CSS 그리드 레이아웃을 학습하기 위한 게임임.
- 사용자는 **grid-column-start** 속성을 사용해 당근이 있는 영역에 물을 주는 방식으로 게임을 진행함.

#### 예시 코드 설명
- **grid-column-start: 3;**는 그리드의 세 번째 세로선부터 시작하는 영역에 물을 주는 것을 의미함.
- 그리드의 각 열과 행은 **20%**씩 차지하도록 설정됨.

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

#### 추가 학습 자료
- **Flexbox Froggy**를 통해 CSS Flexbox를 학습할 수 있음.

### GN⁺의 의견
- **교육적 가치**: 그리드 가든은 게임을 통해 CSS 그리드 레이아웃을 재미있게 학습할 수 있는 좋은 도구임.
- **실습의 중요성**: 이와 같은 인터랙티브 학습 도구는 이론보다는 실습을 통해 더 효과적으로 학습할 수 있게 해줌.
- **기술 확장성**: CSS 그리드와 Flexbox는 현대 웹 디자인에서 중요한 기술이므로, 이를 잘 이해하는 것이 중요함.
- **다른 도구 추천**: CSS 그리드 외에도 **CSS Diner**와 같은 다른 학습 도구들도 활용해보는 것을 추천함.
- **주의사항**: 게임을 통해 기본 개념을 익힌 후, 실제 프로젝트에서의 적용 방법을 학습하는 것도 중요함.

## Comments



### Comment 25915

- Author: neo
- Created: 2024-06-04T10:50:22+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=40559015) 
- Rachel Andrews의 시리즈는 백엔드 개발자에게도 현대적인 UI 앱을 구축하는 데 큰 도움이 됨.
- 팀과 함께 30분 동안 쇼앤텔을 했고, 비개발자도 참여하여 기본 프로그래밍 기술을 개발하는 데 유익했음.
- 게임이 재미있지만, 문제 해결에만 집중하게 되어 깊은 이해를 방해할 수 있음. 해결책으로는 시도 횟수에 대한 패널티를 제안함.
- 게임의 장점은 절대 위치를 확인하여 답을 검증하고, 단점은 시도마다 구글 애널리틱스를 전송하는 것임.
- CSS Zen Garden은 과거에 CSS를 배우고 디자인 영감을 얻는 훌륭한 소스였음.
- 이 게임과 Flexbox Froggy는 재미있게 CSS 레이아웃을 배우는 데 좋음.
- 첫 10레벨을 플레이한 후 CSS에 대한 불만이 커졌음.
- 이전의 큰 토론 링크를 공유함.
- Flexbox Froggy가 Grid Garden보다 더 도움이 되었음. CSS Grid는 잘 이해되지 않음.
- 최근에 Subgrid가 포함되었는지 궁금했음.