본문 바로가기
카테고리 없음

쉽고 재밌게 배우는 CSS Flex-box / Grid 게임![해보시면 도움됩니다!]

by 날파리1 2022. 7. 25.

 

css 선택자 게임 이외에도 그리드 레이아웃을 배울 수 있는 게임을 소개해드립니다!

 

 

저는 이렇게 한 번 풀어보았습니다!!

 

 

 

 

1. 개구리게임

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

 

2. Guess CSS

 

이건 선택자와 범위에 대해 알기 좋은데 연속맞추기가 특히 어렵네요 특히 position...

https://www.guess-css.app/

 

Guess CSS! HTML & CSS puzzler game

 

www.guess-css.app

 

굉장히 어렵게 과제 통과...

3.어드밴처 그리드레이아웃게임

https://codingfantasy.com/games/flexboxadventure/play

 

Play Flex Box Adventure – CSS Game to Learn Flexbox

 

codingfantasy.com

 

4. 당근게임을 이용한 그리드 레이아웃 배우기!

 

https://cssgridgarden.com/#ko

 

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

휴 다푸는것도 은근 힘듭니다.

5. CSS 속성자 이용한 스피드런 게임!

https://css-speedrun.netlify.app/

 

CSS Speedrun | Test your CSS Skills

A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible.

css-speedrun.netlify.app

요것도 완성!

 

6. CSS Diner

이거는 제가 이전에 올린포스트에! 

https://onulmansanda.tistory.com/89

 

쉽게 배우는 HTML CSS 선택자![CSS Diner]

html 과 css 태그만해도 200개가 넘는데 그 중에서도 가장 중요한 선택자! (Selector)를 조금 쉽게 다가갈수 있는 게임을 소개해드리려고합니다. 해당되는 선택자를 선택후 엔터를 치면 통과가 되는데

onulmansanda.tistory.com

7. 플렉스 박스 디펜스!

http://www.flexboxdefense.com/

 

Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

www.flexboxdefense.com

이건 클리어하자마자 처음으로 돌아갔던 것 같군요

 

8. Grid attack

https://codingfantasy.com/games/css-grid-attack/play

 

Play Grid Attack – CSS Game to learn CSS Grid

 

codingfantasy.com

후반으로 갈수록 매우매우 화가납니다 휴..

무조건 easy로 하세요

 

댓글