5P by neo 11일전 | favorite | 댓글 1개

그리드 가든 소개

그리드 가든이란?

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

예시 코드 설명

  • **grid-column-start: 3;**는 그리드의 세 번째 세로선부터 시작하는 영역에 물을 주는 것을 의미함.
  • 그리드의 각 열과 행은 **20%**씩 차지하도록 설정됨.
#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와 같은 다른 학습 도구들도 활용해보는 것을 추천함.
  • 주의사항: 게임을 통해 기본 개념을 익힌 후, 실제 프로젝트에서의 적용 방법을 학습하는 것도 중요함.
Hacker News 의견
  • Rachel Andrews의 시리즈는 백엔드 개발자에게도 현대적인 UI 앱을 구축하는 데 큰 도움이 됨.
  • 팀과 함께 30분 동안 쇼앤텔을 했고, 비개발자도 참여하여 기본 프로그래밍 기술을 개발하는 데 유익했음.
  • 게임이 재미있지만, 문제 해결에만 집중하게 되어 깊은 이해를 방해할 수 있음. 해결책으로는 시도 횟수에 대한 패널티를 제안함.
  • 게임의 장점은 절대 위치를 확인하여 답을 검증하고, 단점은 시도마다 구글 애널리틱스를 전송하는 것임.
  • CSS Zen Garden은 과거에 CSS를 배우고 디자인 영감을 얻는 훌륭한 소스였음.
  • 이 게임과 Flexbox Froggy는 재미있게 CSS 레이아웃을 배우는 데 좋음.
  • 첫 10레벨을 플레이한 후 CSS에 대한 불만이 커졌음.
  • 이전의 큰 토론 링크를 공유함.
  • Flexbox Froggy가 Grid Garden보다 더 도움이 되었음. CSS Grid는 잘 이해되지 않음.
  • 최근에 Subgrid가 포함되었는지 궁금했음.