Flexbox Froggy

Flexbox Froggy 링크 : https://flexboxfroggy.com/#ko

CSS 연습을 위해 게임을 진행해보았다. 게임에는 여러가지 속성들이 있으며 해당 속성들은 어떻게 동작하는지 한눈에 볼 수 있고 어떻게 배치해야 원하는 방향으로 이끌어 갈 수 있는지 알 수 있다.

justify-content : Flex 요소들을 가로선 상에서 정렬합니다.
align-items : Flex 요소를 세로선 상에서 정렬합니다.
flex-direction : 정렬할 방향을 지정합니다.
order : Flex 요소의 순서를 지정합니다.
align-self : 지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.
flex-wrap : Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다.
flex-flow : 다음의 속성들을 간략히 한 속성입니다: flex-direction and flex-wrap.
align-content : 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절합니다.

🎯 게임 진행

게임은 웹 페이지에서 진행하며 개구리들이 자신에 색에 맞는 연못잎에 올라가게 해주면 클리어가 된다.

개구리들을 색에 맞는 연못잎에 올려두기위해 위에 CS요소들을 활용해서 옮겨주면 되는 간단한게임이었다.

🎈 끗~

📝 후기

게임은 생각보다 간단했고 레벨 난이도도 그렇게 어렵지 않아서 문항에 제시된 지문을 잘 읽고 조금만 생각해도 풀 수 있는 어렵지 않은 난이도 였다.
클리어 하기를 위해서만 하게되면 10분이면 끝낼 수 있지만 제시된 요소가 어떻게 동작하고 문제의 의도가 무엇인지 생각하면서 풀면 1시간 이상 투자할 가치가 있어보인다. 한번 쉽게 풀어봤지만 다시한번 CSS의 요소들과 동작하는 방법들을 다시 생각해보며 풀어보면 좋을것 같다.