[CSS] 게임으로 배우는 Flexbox ( Flexbox Froggy )

Flexbox froggy

 

Flexbox Froggy

Flexbox Froggy는 display 속성 중 하나인 Flexbox를 쉽게 배울 수 있게 해놓은 게임이다. 초록, 빨강, 노랑색의 귀여운 개구리들을 Flexbox 속성들을 이용하여 같은 색의 연잎으로 옮기면 되는 게임이다. 총 24단계로 이루어져 있다. 위의 사진은 24단계인 최종 단계로, 당연한 얘기지만 단계가 올라갈수록 난이도가 올라간다.

 

 

1단계

 

 

1단계라 예시로 답을 알려주고 있지만 2단계 부터는 자신이 속성을 적절히 사용하여 개구리를 이동시키면 된다. Flexbox에 대한 개념이 잘 안잡혀있고 헷갈리는 부분이 있다면 한번 머리 식힐 겸해서 해보는 것을 추천한다. 나도 Flexbox 공부하는 데에 있어서 굉장히 도움을 많이 받았던 것 같다.

---

https://flexboxfroggy.com/#ko

Flexbox Froggy