[CSS] Flexbox CSS Layout의 이해를 위한 게임

CSS의 레이아웃을 만들기 위해서는 FlexBox에 대한 이해가 필요합니다.

하지만 처음 공부를 시작하시는분들에게는 다 비슷비슷한 느낌이 들어서 헷갈리는 경우가 많습니다.

저 또한 헷갈리는 경우가 많아서 힘들었는데요

우연히 FlexBox에 관한 자료들을 검색하던 중 게임을 통해 쉽게 이해할 수 있는 사이트를 발견해서 공유합니다.

https://flexboxfroggy.com/#ko

개구리들을 잎위에 앉게 하기위해 CSS의 FlexBox 설정을 바꿔가며 진행되는 게임입니다.

단계는 1단계부터 24단계까지 있습니다.

justify-content, align-items, flex-direction 등 다양한 옵션을 이용해서 개구리들을 움직여가며 CSS 레이아웃을 배울 수 있어서 좋습니다.