Flexbox Froggy는 CSS의 Flexbox 속성을 연습할 수 있는 유용한 게임이다.
Flexbox Froggy총 24단계의 문제가 있는데, 이 포스팅에서 모두 풀어보려고 한다.
1단계
개구리를 오른쪽 수련잎으로 이동할 수 있게 코드를 짜야 한다.
정답은 flex-direction: row-reverse;이다.
flex-direction은 중심 축을 결정하는데, row가 중심축이고 여기에 reverse를 붙여주면 중심 축인 열을 축으로 오른쪽부터 정렬이 되어 개구리가 수련잎으로 이동하게 된다.
2단계
개구리 두마리를 중간에 있는 수련잎으로 이동할 수 있게 코드를 짜야 한다.
정답은 justify-content: center;이다.
justify-content는 중심축을 기준으로 아이템을 중간에 배치한다.
3단계
세마리의 개구리가 모두 수련잎으로 이동할 수 있도록 코드를 짜야 한다.
정답은 justify-content: space-around이다.
justify-content: space-around 는 요소와 양 옆 사이에 공간을 넣어준다.
이와 비슷한 ustify-content: space-between는 틀린 답이 되는데, 요소 중간에만 공간을 넣어주고 양 옆에는 공간을 넣어주지 않기 때문에 양쪽의 개구리가 수련잎을 조금 더 벗어나 각각 왼쪽, 오른쪽으로 이동하게 된다.
4단계
세마리의 개구리가 모두 수련잎으로 이동할 수 있도록 코드를 짜야 한다. (수련잎 사이의 간격이 넓어졌다.)
정답은 ustify-content: space-between이다.
이때에는 양 옆에는 공간이 없고 개구리들 사이에만 공간이 있는 ustify-content: space-between을 써야 한다.
5단계
개구리들이 연못의 아래쪽에 배치되도록 코드를 짜야 한다.
정답은 align-items: flex-end;이다.
align-items는 중심축의 반대축에서(여기서 중심축: 열, 반대축: 행) 개구리들을 배치한다.
그리고 flex-end는 개구리들을 컨테이너의 바닥으로 정렬한다.
6단계
개구리가 연못의 중앙으로 이동할 수 있도록 코드를 짜야 한다.
정답은 justify-content: center; align-items: center;이다.
이 둘을 함께 쓰면 중심축에서도, 반대축에서도 중앙에 배치할 수 있다.
7단계
개구리들이 하단의 수련잎들으로 이동할 수 있도록 코드를 짜야 한다.
정답은 justify-content: space-around; align-items: flex-end;이다.
justify-content: space-around;는 중심축을 중심으로(열) 간격을 두고 배치하게 되고, align-items: flex-end;는 반대축을 중심으로(행) 아래에 배치된다.
8단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: row-reverse;이다.
flex-direction은 중심축을 결정하고(row), 여기에 reverse를 더해주면 row(열)을 축으로 오른쪽부터 정렬되게 된다.
9단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: column;이다.
flex-direction으로 중심축이 column(행)으로 결정되었다.
10단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: row-reverse; justify-content: left;이다.
flex-direction: row-reverse;으로 개구리들의 순서를 뒤집어주었고, justify-content: left;로 왼쪽 정렬되게 했다.
11단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: column; justify-content: end;이다.
flex-direction: column;을 통해 중심축을 column(행)으로 바꾸고, justify-content: end;을 통해 순서를 바꾸지 않고 아래쪽부터 배치하게 했다.
12단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: column-reverse; justify-content: space-between;이다.
flex-direction: column-reverse;을 통해 중심축을 column으로 하되 reverse로 순서를 뒤바꿔주었고, justify-content: space-between;을 통해 개구리 사이에 공간을 넣어주었다.
13단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: row-reverse; justify-content:center; align-items: end;이다.
flex-direction: row-reverse;으로 개구리들의 순서를 초-노-빨에서 빨-노-초로 뒤바꾸어주었고, justify-content:center;으로 중심축인 row의 중앙으로 이동하게 했다. 그리고 align-items: end;으로 반대축인 column의 하단으로 이동하게 했다.
14단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 order: 1이다.
노란색 개구리의 순서를 오른쪽으로 1만큼 이동하도록 바꾸어주었다.
15단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 order: -3이다.
빨간색 개구리를 왼쪽으로 3만큼 이동하도록 바꾸어주었다.
16단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 align-self: flex-end;이다.
align-self는 개별 요소(노란색 개구리)에 적용할 수 있다. 이를 사용해 노란색 개구리만 아래로 내렸다.
17단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 order: 3; align-self: flex-end;이다.
order: 3;으로 노란색 개구리를 세칸 옮겨서 오른쪽으로 오도록 했고, align-self: flex-end;를 통해 반대축(column)을 기준으로 아래쪽으로 오도록 했다.
18단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-wrap: wrap;이다.
이 속성은 페이지가 작아지면 요소를 다음 줄에 배치한다.
19단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-wrap: wrap; flex-direction: column;이다.
flex-wrap: wrap;를 통해 페이지가 작아지면 요소를 다음 줄에 배치하도록 했고, flex-direction: column;로 중심축을 column(행)으로 정했다.
20단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-flow: column wrap;이다.
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다. flex-direction: column과 flex-wrap: wrap을 합쳐줬다.
21단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 align-content: flex-start;이다.
align-content의 flex-start 속성으로 여러 줄들을 컨테이너의 꼭대기에 정렬했다.
22단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 align-content: flex-end;이다.
align-content의 flex-end 속성으로 여러 줄들을 컨테이너의 바닥에 정렬했다.
23단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-direction: column-reverse; align-content: center;이다.
flex-direction: column-reverse;으로 중심축을 column으로 정하고, 순서를 빨-초-노에서 노-초-빨로 뒤집었다.
그리고 align-content: center;로 반대축 row의 측면에서 중앙에 정렬했다.
24단계
개구리들이 자기 색깔과 같은 수련잎 위로 이동할 수 있도록 코드를 짜야 한다.
정답은 flex-flow: column-reverse wrap; align-content: space-between; justify-content: center; flex-wrap: wrap-reverse;
이다.
마지막에 flex-wrap: wrap-reverse라는게 있는지 몰랐어서 애를 먹었다. 이 속성은 줄바꿈하는 요소들을 역순으로 배열한다고 한다.
