Flexbox Froggy 정답 및 풀이 복습

깜찍한 개구리 친구를 Flexbox 명령어를 통해 수련 잎으로 보내주는 게임이다.

정답을 봐도 아무것도 모르는 나 같은 사람은 이해하기 위해 따로 구글링을 해야 했던 CSS-diner와 달리 난이도가 굉장히 쉽다.

되도록 위의 설명은 아예 보지도 말고 그림 보기 -> 정답 입력하기의 과정을 거쳐야 그나마 공부가 된다.

잘 외워지지 않아 읽으면서 입력했더니 생각보다 금방금방 외워졌다.

 

초반 문제들은 justify-content를 사용하는 문제들이다.

justify-content: flex-start;	컨테이너 좌측으로 정렬한다. (default)
justify-content: flex-end;	컨테이너 우측으로 정렬한다. (reverse되지 않는다)
justify-content: center;	컨테이너 중앙으로 정렬한다.
justify-content: space-between	요소들 사이에 동일한 간격을 준다. ( 사이 간격 외에는 여백 x )
justify-content: space-around	요소들 주위에 동일한 간격을 준다. ( 여백이 생긴다 )

 해당 명령어를 숙지하고 빠르게 풀어보자.

 

level 1

개구리가 컨테이너의 가장 우측으로 가야한다.

정답: justify-content: flex-end;

 

 

level 2

개구리 두마리가 중앙으로 가야한다.

정답: justify-content: center;

 

 

level 3

개구리 세마리가 일정한 간격을 두고 배치되어야 한다.

그런데 이 때 사이 간격 뿐 아니라 좌 우로도 여백이 있는 것이 보인다.

따라서 정답은 between이 아니라 around를 사용.

정답 : justify-content: space-around;

 

 

level 4

개구리 세마리가 전 문제와 같이 일정 간격을 두고 배치되어야 한다.

그런데 이번에는 좌우 여백이 없다.

정답 : justify-content: space-between;

 

 

 

 

align-items: flex-start;	컨테이너의 꼭대기로 정렬한다.
align-items: flex-end;	컨테이너의 제일 밑으로 정렬한다.
align-items: center;	컨테이너를 cross axis의 중앙으로 정렬한다.
align-items: baseline;	컨테이너를 시작 위치로 정렬한다.
align-items: stretch;	요소를 컨테이너 크기에 맞도록 늘린다.

level 5부터는 align-items 명령어가 필요하다.

별다른 건 없고 justify-content는 main axis에 맞춰서 위치를 조절하는 것이소 align-items는 cross axis에 맞춰서 위치를 조절한다.

 

 

 

 

level 5

개구리 친구들의 활동 범위가 넓어졌다.

컨테이너의 가장 아래로 이동시켜야 한다.

정답: align-items: flex-end;

 

 

level 6

개구리를 컨테이너의 정 중앙으로 보내야 한다.

justify-content와 align-items를 이용해서 개구리를 구해주자.

정답 :

justify-content: center;

align-items: center;

 

 

level 7

main axis인 가로축 기준 여백을 두고 일정 간격으로 띄워져 있고

cross axis인 세로축 기준 제일 아래에 있다.

정답 :

justify-content: space-around;

ailgn-items: flex-end;

 

 

 

flex-direction: row;	X축 시작점을 Main axis 시작점으로 지정한다
flex-direction: row-reverse;	X축 끝선을 Main axis 시작점으로지정한다
flex-direction: column;	Y축 시작점을 Main axis 시작점으로 지정한다
flex-direction: column-reverse;	Y축 끝선을 Main axis 시작점으로 지정한다

level 8부터 사용되는 flex-direction

Main axis의 축과 시작점이 어디냐에 따라 다른 명령어들도 움직이는 방향이 바뀐다는 사실만 기억하면 크게 어렵지 않다.

 

 

level 8

빨간 개구리는 제자리에 있으나 노랑이와 초록이가 물에 빠졌다.

justify-content: flex-end;를 사용하면 옆으로 보내줄 수는 있으나 남의 집에서 살게 되기 때문에 기분이 몹시 나쁠 것이다.

Main axis의 시작점을 바꿔주면 해결된다.

정답: flex-direction: row-reverse

 

 

level 9

이번에는 시작점은 그대로이나 Y축 방향을 Main axis로 잡아주어야 한다.

정답: flex-direction: column;

 

level 10

무슨 일이 있었던 건지 빨갱이와 초록이의 집이 뒤바뀌었다.

flex-direction을 이용해 시작점을 바꿔주고, 그러면 우측에 정렬이 되기 때문에 justify-content를 사용해 main axis의 시작점 기준으로 끝 선인 좌측으로 보내주어야 한다.

정답 :

flex-direction: row-reverse;

justify-content: flex-end;

 

 

level 11

너 flex-direction을 이용해서 main axis를 바꾸면 시작점이 바뀌어서 justify-content가 세로로 움직이게 된다는 사실 알고 있지?

align-items든 justify-content든 가로 세로가 중요한 게 아니라 main axis와 cross axis를 따라야 한다는 걸 알고 있는 거지?

라고 물어보는 문제.. 방향은 세로지만 메인축이 세로기 때문에 이번에도 justify-content를 사용한다.

정답:

flex-direction: column;

justify-content: flex-end;

 

 

 

level 12

바로 전 문제와 다를 게 없다. 시작점인 초록 개구리가 하단 좌측을 시작점으로 잡는다.

정답:

flex-direction: column-reverse;

justify-content: center;

 

 

level 13

지금까지 사용한 jutify-content align-items flex-direction을 모두 활용해야하는 문제이다.

시작점을 X축 반대로. Main axis는 가운데 정렬, Cross axis는 아래로 정렬해야 한다.

정답:

justify-content: center;

flex-direction: row-reverse;

align-items: flex-end;

 

 

order: number;

number에 기입한 수에 따라 정렬 위치를 변경한다.

 

 

level 14

블로그에는 소스까지 캡처해서 올리고 있지 않아 보이지 않지만 문제에서 노랑이를 움직이도록 설정되어 있다.

order의 기본 값은 0이기 때문에 1부터 ~ 어떤 수를 입력해도 상관 없이 노랑이가 뒤로 이동하지만 일단 1을 입력하도록 하자.

정답: order: 1;

 

level 15

order의 기본 값은 0인데 빨강이를 제일 앞으로 보내줘야 한다.

지저스.. 앞의 초록 개구리를 일일히  order값을 줘서 뒤로 보내야 하나?

응 아니야. order에는 음수도 입력 가능하다.

정답: order: -1;

 

level 16

초록이들이 노랑이를 왕따시키려고 연 잎을 바닥까지 밀어버렸다..

사실 그런 극단적인 상황은 아닐 수도 있지만 아무튼 노랑이 혼자 왕따처럼 움직여야하는 건 사실이다.

이럴 때 사용하는 명령어가 align-self이다.

정답: align-self: flex-end;

 

 

align-self: ?;

기본적으로 align-items와 명령어는 같으나 혼자 움직인다.

 

 

level 17

노랑이들이 초록이들의 탄압에 못이겨 이주하려고 한다.

문제는 이리저리 뒤섞여 있어서 먼저 순서를 바꿔준 뒤 이주시켜야 한다.

두 노랑이에게 order 값을 줘서 뒤로 보내주자.

정답:

order: 1

align: flex-end;

 

 

level 18

내 집 마련에 실패한 불쌍한 개구리들이 다 찌그러져버렸다..

이럴 때 사용하는 명령어가 flex-wrap이다.

flex-wrap을 사용하면 main axis의 공간이 부족할 경우 요소들을 찌그러트리지 않고 다음 열로 넘긴다.

어서 개구리들에게 아파트를 공급해주자.

정답:

flex-wrap: wrap

 

 

flex-wrap: nowrap;	공간이 부족해지면 요소의 크기를 조절해서 공간을 만든다.
flex-wrap: wrap;	공간이 부족해지면 다음 열로 넘어가며 요소의 크기를 유지한다.
flex-wrap wrap-reverse;	cross-axis 끝선으로부터 wrap한다.

 

 

level 19

개구리들이 찌그러진 게 귀엽다.

그래도 그들은 괴로울테니 빨리 구해주자.

Main-axis의 축을 바꿔주고 wrap을 사용하면 된다.

정답:

flex-wrap: wrap;

flex-direction: column;

 

 

 

level 20

어어.. 사실 지금까지 배우기 위해 힘들게 두 줄씩 친 거고 사실은 두 개 합쳐서 쓸 수 있어~

flex-flow: direction wrap을 입력하면 한 줄로 처리 가능하다.

정답: flex-flow: column wrap

 

 

flex-flow: direction wrap

한 번에 direction과 wrap를 모두 지정해줄 수 있다.

 

level 21

개구리들이 가로 축(row)으로 정렬되어 있고 세로는 일정 간격을 두고 배치되어 있다. (sapce-between)

이렇게 요소가 여러 줄로 나뉘어져 있을 때 정렬하려면 align-content 명령어를 사용해야 한다.

align-items와 헷갈릴 수도 있는데, align-content는 반드시 '여러 줄'일 때만 사용 가능하며 어떻게 '정렬'할 지 지정하는 것이고 align은 요소의 위치를 지정하는 것이다.

align-content는 cross axis축에서 사용되는 justify-content라고 생각하면 된다.

정답: align-content: flex-start;

 

 

level 22

21번 문제와 같이 align-content를 활용하는 문제.

justify-content를 똑바로 익혔다면 전혀 어려울 게 없다.

정답: align-content: flex-end;

 

 

lv23

가로축으로 정렬되어 있는 개구리들의 메인 축을 바꾸고 중앙으로 정렬해줘야 한다.

column을 적용시킬 경우 시계 방향으로 돌아 빨강이가 위로 올라가버리니 reverse를 주고 main axis가 세로로 바뀌었으니 가로 정렬 시 justify-content가 아닌 align-content를 적용해줘야 한다.

정답:

flex-distrection: column-reverse;

align-content: center;

 

 

level 24

대망의 마지막 문제.

일단 굉장히 찌그러진 개구리들을 보니 nowrap을 줘서 펴주고 가로축이 main axis인 상태이니 column으로 축을 바꿔줘야 한다는 건 바로 알 수 있다.

그리고 세로축이 main axis인 상태이기 때문에 개구리들을 좌우로 정렬하려면 align-content를 사용해야하고, 세로축도 중간 정렬을 해줘야하는데 main axis가 세로축인 상태이므로 justify content로 중앙 정렬을 지정할 수 있다.

그런데 문제는 그렇게 하면 개구리들이 원래 있어야하는 위치와 정 반대로 위치하게 된다.

column에 reverse를 줘도 마찬가지다. 어떻게 해야할까?

wrap에도 reverse를 줄 수 있다는 사실을 잊으면 안된다.

정답.

flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;

 

 

 

 

 

후.. 사실 이 글을 올려놓고 잊고 있었는데 다시 읽어보니 어째서인지 18번에서부터 뒷 내용이 잘려나가 있었다.

2주나 지나서야 눈치채고 수정하면서 뒷부분은 다시 풀어봤는데, 처음 할 때도 쉬웠지만 간단한 html css 코딩을 몇 번 해보고나니 정말 식은 죽 먹기였다!

하지만 애초에 flexbox froggy를 플레이하지 않았다면 클론 코딩에도 많은 어려움을 겪었을 것 같다.

기초부터 탄탄히 세워야한다는 말은 역시 언제나 옳다.