[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy

Flexbox Froggy

 Flexible 박스 레이아웃 모듈은 유연한 반응형 레이아웃 구조를 만들 수 있는 CSS의 매우 강력한 효과 중 하나이다. justify-content, align-items... 이런 저런 것들 어떻게 시작해야 할 지 모르겠다면 게임을 통해 재미있게 배울 수 있는 사이트가 있다. 바로 Flexbox Froggy이다.

 이 게임의 목표는 단 하나 개구리를 수련 위에 올려놓는 것이다. 그리고 우리는 그 방법으로 CSS를 이용하게 된다. 위의 사진 스테이지를 예시로 들어보자 개구리는 display: flex 상태이고, 오른쪽 끝으로 가야 수련 위에 올라간다. 따라서 justify-content: flex-end로 오른쪽 끝으로 보내서 문제를 해결하면 된다.

 약간 더 심화된 스테이지를 확인해보자. 이번에는 justify-content와 align-items를 둘 다 사용해야 하는 스테이지이다. 수련이 정중앙에 있기 때문에 justify-content와 align-items 둘 다 center로 해 놓으면 된다.

 스테이지는 총 24개가 있고, 뒤로 가면 갈 수록 다양한 CSS를 사용 해야하는 문제들이 나온다. 전혀 사용해보지 않은 CSS를 사용해 볼 수 있는 좋은 기회가 될 수 있을 것이다!