[CSS] FLEXBOX FROGGY 🐸 : 게임으로 CSS 배우기

FLEXBOX FROGGY, GRID GARDEN, FLEXBOX DEFENSE

 

🐸👇🏻

FLEXBOX_FROGGY

 

구글링 중에 우연히 발견하게 된 CSS 게임!

display: flex 의 속성들은 이게 저거인가? 저게 이거였던가? 아직 헷갈린다 🙄

 

1 ~ 24단계로 이뤄진 게임으로 flex의 속성들을 차근차근 실행해보며 쉽고 재미있게 익힐 수 있다.

글로만 보는 것 보다 이렇게 눈으로 보면서 익히는 것도 가끔 머리 식히기에 좋은 것 같다.

 

속성들의 결과를 시각적이로 확인할 수 있는게 참 좋은 것 같다.

가끔 헷갈릴 때 한 번씩 해줘도 좋을 것 같아서 포스팅해본다!  

 

💣👇🏻

FLEXBOX_DEFENSE

 

대포의 위치를 Flex 속성으로 이동해서 길을 따라 쳐들어오는 적들을 막는 게임이다.

 

대포는 180도 정도를 돌며 한 번씩 발파하는 대포와

십자가 문양의 360도로 여러번 발파하는 대포가 있는데 이것만 이해하면 쉽게 풀 수 있다!

 

 

🥕👇🏻

GRID_GARDEN

 

개인적으로 Flex 보다 Grid가 더 어려웠던 것 같다!

 

flex와 gird 모두 display의 속성 값이다.

FLEXBOX FROGGY 는 display: flex의 속성을 연습했다면

GRID GARDEN 은 display: grid의 속성을 익힐 수 있다.

 

여기서 Flexbox vs CSS Grid : 둘의 차이점은 

    - Flex : 1차원의 => [수평 = 가로 = 행] , [수직 = 세로 = 열] 중 하나의 축을 기준으로 레이아웃을 나눈다면,

    - Grid: 2차원의  => [수평 = 가로 = 행] , [수직 = 세로 = 열] 동시에 영역을 나눌 수 있다.

   

그래서,

큰 레이아웃을 잡을 때 Grid + 세부적인 콘텐츠 요소들은 Flex로 잡는 방식으로 사용한다고 한다! 참고!

 

CSS Diner

🍣👇🏻

CSS_DINER

 

예전에 생활코딩으로 CSS 강의를 들을 때 '이고잉'님이 추천해주신 게임으로 기억한다.

1 ~ 32단계로 게임을 하면서 세밀하게 CSS Selector를 제어하는 법을 기를 수 있다!

 

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  👀 !   ***