GN⁺: Flexbox Froggy
(flexboxfroggy.com)- 'Flexbox Froggy'라는 CSS 코드 학습을 돕는 게임 소개 기사
- 'justify-content' 속성을 사용하여 개구리를 연꽃잎으로 안내하는 게임
- 'justify-content' 속성은 컨테이너 내의 아이템을 가로로 정렬
- 속성은 'flex-start'(아이템을 왼쪽으로 정렬), 'flex-end'(아이템을 오른쪽으로 정렬), 'center'(아이템을 중앙으로 정렬), 'space-between'(아이템 사이에 동일한 간격), 'space-around'(아이템 주위에 동일한 간격) 등 여러 값 허용
- 'justify-content: flex-end;'가 개구리를 오른쪽으로 이동시키는 예시 제공
- Codepip이 만든 'Flexbox Froggy' 게임, GitHub 및 Twitter 링크 제공
- CSS 그리드를 배우고 싶은 사람들에게 'Grid Garden'을 추천하는 기사
Hacker News 의견
- 'Flexbox Froggy'에 대한 기사, CSS 학습 게임
- 사용자들이 추천하는 CSS 학습을 위한 비슷한 게임들, cssgridgarden.com, cssbattle.dev, flukeout.github.io, 그리고 css-animations.io
- align-content와 align-items 같은 flex 속성을 기억하는데 어려움을 표현하는 사용자들, USB 케이블을 잘못 꽂는 일반적인 문제와 비교
- CSS 그리드와 그것이 제공하는 레이아웃 옵션을 칭찬하는 사용자들
- 'Flexbox Froggy' 같은 게임을 통해 많이 배웠다고 공유하는 사용자들
- 모든 flexbox 속성을 기억하는데 어려움을 겪는 사람들을 위해 사용자가 만든 치트 시트, darekkay.com/flexbox-cheatsheet
- flexbox에 대한 지식을 새로 고치는 데 특히 유용하다고 사용자들이 'Flexbox Froggy'를 찾는다
- 개구리를 3x3 그리드에 드래그 앤 드롭하여 flexbox CSS 코드를 출력으로 얻을 수 있는 기능을 제안하는 사용자
- CSS를 읽는 데 더 초점을 맞춘 또 다른 게임, guess-css.app,이 추천됨
- flexbox와 관련된 경험을 논의하는 사용자들, 일부는 order 속성에 대해 배우고, 다른 일부는 justify-content와 align-items의 명명법 차이에 대해 혼란을 표현
- CSS를 배우는 재미있는 방법으로 추천되는 또 다른 게임, flexboxzombies.com