flexboxfroggy

Flexbox Froggy는 Thomas Park가 만든 브라우저 기반 교육용 게임으로, CSS flexbox 레이아웃을 재미있고 실습 중심으로 가르칩니다. 이 게임은 점점 어려워지는 24개 레벨로 구성되어 있으며, 플레이어는 flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow, order와 같은 올바른 flexbox CSS 속성을 작성해 개구리 캐릭터를 해당 수련잎에 배치해야 합니다. 각 레벨은 간단한 설명과 시각적 미리보기와 함께 새로운 flexbox 개념을 소개합니다. 플레이어는 편집기 창에 CSS 코드를 입력하고, 개구리가 제자리로 이동하는 즉각적인 피드백을 확인합니다. 게임은 flexboxfroggy.com에서 설치 없이 브라우저에서 완전히 실행됩니다. 이 프로젝트는 MIT 라이선스(코드)와 Creative Commons BY 3.0(이미지) 하에 오픈소스로 제공됩니다. 커뮤니티 기여자들에 의해 50개 이상의 언어로 번역되었으며, 중국어(간체 및 번체), 일본어, 한국어, 스페인어, 프랑스어, 독일어, 러시아어, 아랍어 등이 포함됩니다. 번역은 GitHub 저장소를 통해 관리되며, 기여자는 풀 리퀘스트를 통해 새 언어를 추가할 수 있습니다. Flexbox Froggy는 프런트엔드 개발 튜토리얼, 코딩 부트캠프, CSS 학습 자료에서 flexbox 레이아웃을 익히기 위한 접근성 높은 입문 도구로 널리 참조됩니다. 소스 코드는 정적 사이트로, 자체 호스팅이나 오프라인 사용에 적합합니다.