한 줄 요약
외우기보다 직접 움직여 보는 것이 빠릅니다. 게임처럼 속성 값을 바꾸며 결과를 눈으로 확인하세요.
비유로 이해하기
자전거는 설명서를 읽어서가 아니라 직접 타 보면서 배웁니다. 레이아웃 속성도 같아요. 값을 하나 바꾸고 → 결과를 보고 → 다시 바꾸는 반복이 가장 빠른 학습입니다.
Flexbox Froggy는 개구리를 같은 색 연잎으로 보내는 게임이고, Grid Garden은 당근밭에 물을 주는 게임입니다. 두 게임 모두 한 단계에 속성 하나씩만 배우도록 짜여 있어요.
비교해 보기
- Flexbox Froggy: justify-content, align-items, flex-direction 같은 줄서기 규칙 연습
- Grid Garden: grid-column, grid-row 같은 칸 지정 연습
- 하루 10분, 한 게임씩 끝까지 풀어 보는 것을 추천합니다.
직접 실행해 보기
미션입니다. 개구리를 오른쪽 끝 연잎으로 보내 보세요. justify-content 값 하나만 바꾸면 됩니다. 성공했다면 개구리를 아래쪽으로도 보내 보세요(힌트: align-items).
GenerateBlocks에서는
GenerateBlocks에서도 같은 방법이 통합니다. 설정값을 하나 바꾸고 편집 화면과 미리보기를 번갈아 보며 결과를 확인하세요. 감이 오지 않는 설정은 이 글의 실습 창에서 먼저 시험해 봐도 좋습니다.
참고: Flexbox Froggy · Grid Garden