귀여운 그림들로 css flex와 css grid를 배워봅시다.

간단한 게임으로 배워보는 css의 flex와 grid

css의 flex와 grid를 배워볼 수 있는 간단한 게임을 소개하겠습니다.

개구리를 연잎으로 옮기는 게임입니다.

Flexbox Froggy 바로가기

당근을 키우는 게임입니다.

Grid Garden 바로가기

간단한 게임들로 css flex와 grid를 배워볼수도 있고, 이미 배웠던 분들은 귀엽게(?) 복습할 수 있습니다. 플렉스 박스의 경우 코드를 작성하는 곳 밑에 setting 키를 통해서 난이도를 조절할 수 있습니다. 당근을 키우고 개구리도 도와주세요.

Flexbox Froggy 코드보기

이 부분부터는 미리보지 마시고, 링크를 타고 간 후 한번 해본 뒤에 보시는 것을 추천드립니다. 난이도가 어려울 수 있는 부분에 대한 해설을 포스팅했습니다.

24단계 화면입니다.

마지막 단계의 모습입니다. 

개구리와 같은 색의 연잎으로 개구리를 보내야 합니다. 우선 생각할 것은 연잎이 새로 방향으로 되어 있고, 여러 줄로 되어있다는 것이죠. 그리고 빨간색 개구리가 있어야 할 연잎은 위가 아니라 아래에 있습니다. reverse가 필요하다는 뜻입니다.  그리고 왼쪽이 아니라 오른쪽에 있으니, 이 부분도 reverse가 되어야 합니다.

flex-direction: column-reverse;

flex-wrap: wrap-reverse;

justify-content: center;

align-content: space-between;

여러 줄이니 align-items가 아니라 content가 되어야 합니다. 방향을 바꾸었기 때문에 justify-content의 방향을 결정하는 주축이 세로, align-content의 방향을 결정하는 보조축이 가로가 됩니다. 코드가 이해되시나요?

Grid Garden 코드보기

가든 부분은 24와 26을 다뤄보겠습니다.

24단계 화면입니다.

이 부분에서 중요한 것은 물과 독의 위치가 고정되어 있다는 것입니다. 물의 경우엔 가로선 1에서 가로선 6까지, 세로선 1에서 세로선 2를 차지합니다. 그리고 독은 가로선 1에서 6까지, 세로선은 5에서 6까지의 부피를 차지합니다. 이 뜻은 우리는 grid-template-column을 5부분으로 나눠야 한다는 뜻입니다. 그래야 고정된 물과 포지션에 맞게 자리를 배치할 수 있습니다.

grid-template-columns: 50px 1fr 1fr 1fr 50px;

당근은 왼쪽에 50px, 잡초는 오른쪽에 50px입니다. 그래서 위 처럼 값을 주면 각각의 50px을 사용하고, 나머지 부분에 대해서 fr 단위를 통해서 정확히 3등분해서 나눠가집니다.

가든의 26단계 화면입니다.

24단계와 비슷합니다. 상단의 50px을 제외하고 물을 줘야하는데 물의 위치가 고정되어 있습니다. 가로선의 5번째와 6번째에 물이 위치하도록 되어있습니다. 즉 grid-template-rows의 값을 5개 줘야하는데 4개의 값의 합을 50px로 주고 나머지를 fr 값으로 주면 됩니다.

grid-template-rows: 10px 10px 10px 20px 1fr;

물이나 독의 위치가 고정되어 있다는 게 어떤 것인지만 잘 파악하면 두 문제 다 쉽게 푸실 수 있습니다.

커피 한 잔 마시면서 도전해보세요!

혹시 모르는 것이 있으면 댓글에 남겨주세요.