css에 도움이 되는 사이트, 게임(flex, selector, grid)

1. FLEXBOX FROGGY

https://flexboxfroggy.com/#ko

Flexbox Froggy

귀요미 개구리를 연못 위에 올리기

flex를 직관적으로 공부할 수 있어서 처음 flex를 배워서 어떻게 써먹나 걱정할 땐 이 게임을 해보는 걸로!

 

2. Flexbox Defense

http://www.flexboxdefense.com/

 

Flexbox Defense

실제로 디펜스 게임하는 느낌... 재밌다

1번과 마찬가지로 flex를 활용한 게임인데 개구리를 옮기는 것보다는 개인적으로 더 게임 같아서 그런지 재미있었다.

 

3. Flexbox Zombies

https://mastery.games/flexboxzombies/

Flexbox Zombies

스토리까지 있는 CSS game

이번에도 flex를 활용한 게임이다. 점점 고퀄의 게임들이 나오는 것 같은데 모두 다 목적은 flex의 이해를 도우려는 것임으로 아무거나 맘에 드는 걸로 고르면 될 것 같다!

 

4. CSS Diner

https://flukeout.github.io/

CSS Diner

춤추고 있는 애들을 선택하기!

사진이라 보이지 않는데 저 도마(?) 위에 춤추고 있는 친구를 CSS Editor 에서 선택하면 된다.

정 모르겠으면 옆에 어떤 selector를 써야하는지 알려주고 있으니 복습 겸 공부하는 것에 큰 도움을 줄 것이다!

 

5. Grid Garden

https://cssgridgarden.com/#ko

 

grid를 활용해서 당근 정원을 키우는 것이다. 그림체 귀엽다. 아직 작자는 grid를 배우지 못해 배우게 된다면 꼭 풀 것이다.

 

 

 

혹시 다른 CSS 공부에 도움이 될만한 사이트들이 있다면 알려주세요!