Flexbox Froggy로 Css Flexbox공부하기 (및 정답 공유) 1~10번

플렉스박스에 대한 지겨운 이론 대신 게임으로 쉽게 공부할 수 있는 Flexbox Froggy.

플렉스박스에 대해 익숙해 지고 싶다면 한번 풀어보는걸 추천한다. 그리고 무엇보다 개구리들이 귀엽다 :)

http://flexboxfroggy.com/

Flexbox Froggy

슉슉 넘어가다보니 개념 정리도 잘 안되는거 같고... 문제 풀기에 급급한 사람들을 위해, 그리고 다음 스테이지로 넘어가고 싶은데 정답을 모르겠는 사람들을 위해 Flexbox Froggy에서 나온 개념들과 정답을 공유하려고 한다. 붙여넣기 좋으라고 코드를 다시 입력해놨다.

 

풀면서 모르겠는 부분 있으시면 참고하시고... 또 한번 풀었는데 머릿속에서 정리가 안된거 같으면 개념 정리해놨으니 두고두고 보면 좋을 듯 하다 :)

 

그리고 풀다보니 느낀 것인데 번역이라서 그런지는 몰라도 Flexbox Froggy에서 틀린게 좀 있다.

 

CSS는 진짜 사용하지 않으면 금방금방 까먹기 때문에 개념을 정리해놓고 나중에 꺼내봤을 때 쉽도록 만들어 놓는게 편하다.

 

1번 정답:

justify-content:flex-end;

justify-content  정렬과 아이템 사이의 간격 조정하기

justify-content는 인자로 다음 값들을 쓸 수 있다. 

• flex-start : 요소들을 컨테이너 왼쪽 정렬
• flex-end : 요소들을 컨테이너 오른쪽 정렬
• center : 가운데 정렬
• space-between : 요소들 사이에 동일한 간격 
• space-around : 요소들 주위에 동일한 간격

그리고 justify-content를 쓸 때는 꼭 display: flex;로 이 요소에 플렉스를 먹인다는 것을 명시 해 줘야한다.

 

 

2번 정답:

justify-content:center;

justify-content: center로 먹인 아이들이 가운데로 오는 것을 볼 수 있다.

justify-content를 먹이면 전체가 덩어리 채로 움직인다고 생각하면 될 것 같다.

 

 

3번 정답: 

justify-content: space-around;

 

 

4번 정답:

justify-content: space-between;

 

space-between과 space-around가 햇갈릴 수도 있다. 

space-between을 사용하면 맨 양 옆은 딱 붙고 요소 사이의 간격은 동일해진다. 

사이사이에 (between)에 공간(space)을 둔다고 외우면 편할 것 같다.

반면 space-around은 요소 주위에 같은 넓이를 둔다. Flexbox Froggy에서는 간격이 약간 애매하게 보여서 눈치를 못 채셨을 수도 있는데 요소 주위에 같은 간격을 주기 때문에 사진에서 보다시피 상자들 간의 간격이 아무것도 없는 맨 끝 간격의 2배가 된다.

 

이것도 마찬가지로 주위에(around) 간격을 (space) 준다라고 이해하면 편할 것 같다.

 

 

5번 정답:

align-items: flex-end;

새로운 개념이 나왔다.

align-item은 인자로 다음 값을 갖는다

• flex-start : 요소들을 컨테이너 꼭대기로 정렬
• flex-end : 요소들을 컨테이너 바닥으로 정렬
• center : 요소들을 컨테이너 세로선의 가운데로 정렬
• baseline : 요소들을 컨테이너 시작 위치에 정렬
• stretch : 요소들을 컨테이너에 맞도록 늘린다

기본 값은 stretch이다. 이것도 이 게임에서 개구리의 귀여움을 살리느라 현실 고증을 잘 못한 부분이다. 

원래대로라면 align-item의 기본값은 stretch이기 때문에 요소가 부모의 크기만큼 길게 늘어나야(stretch) 한다.

 

궁금해서 이 게임에다가 align-item: stretch를 써 봤는데 아쉽게도 개구리들은 늘어나지 않았다.

 

6번정답

justify-content: center;
align-items: center;

실제로 css 요소가 여러개일때 align-items:center;만을 하면 어떨까? 

사진에서 보다싶이 align-items:center;은 요소들을 위 아래로 움직이게 한다.

 

그래서 개구리가 가운데로 간 이유는 align-items:center;로 위 아래중 가운데로 개구리를 움직이고,

밑의 사진처럼 justify-content:center;로 좌 주로 가운데로 위치했기 때문이다.

justify-content는 좌우 위치를 담당하고 align-items은 위 아래를 담당한다고 보면 된다.

 

7번 정답:

justify-content: space-around;
align-items: flex-end;

 

 

8번 정답:

flex-direction: row-reverse;

flex-direction이라는 새로운 개념이 나왔다. 아까까지는 가로로 놓인 개구리들을 왔다리갔다리 하는 방법을 알았다면

이제는 개구리들의 순서를 바꿀 수도, 세로로 놓을 수도 있게 되었다.

 

flex-direction은 인자로 다음 값을 갖는다. 

• row : 요소들을 텍스트의 방향과 동일하게 정렬 (갑자기 왜 텍스트가 나왔냐면... html에서 쓰인 대로 정렬한다는 말이다.)
• row-reverse : 요소들을 반대 방향으로 정렬
• column : 요소들을 위에서 아래로 정렬
• column-reverse : 요소들을 아래에서 위로 정렬

여기서 개구리들을 잘 봐야한다. row-reverse를 사용하면 개구리들의 색의 순서도 반대가 되지만, justify-content:flex-end;를 먹인 것처럼 컨테이너의 오른쪽에 붙어버린다.

 

즉 위치 기준도 reverse 가 되어버린다는 거다.

이거 진짜 헷갈림!!

 

9번 정답:

flex-direction: column;

 

 

 

 

 

구글에 column이라는걸 검색해보면 이런 이미지가 나온다.  column에는 기둥 이라는 뜻도 있다는 것 그래서 표에서 가로줄을 행(row), 세로줄을 열(column)이라고 부른다.

 

그럼 flex-direction: cloumn;을 쓰면 어떻게 될까?

요소들이 당연히 기둥처럼 새로로 놓일 것이다.

 

 

10번 정답:

flex-direction: row-reverse;
justify-content: flex-end;

아까 8번에서 설명했다시피 flex-direction에 column-reverse나 row-reverse를 먹이면 많은게 바뀐다.

 

처음 보는 사람은 "어 요소의 순서가 바뀌나봐" 라고 할 수 있지만 자세히 보면 그냥 '처음이라는 기준' 자체가 바뀐다. 그래서 순서도 바뀌는거다. flex-direction : row-reverse;를 하면 가로축에서 처음이라는 기준이 바뀌어서 끝 지점이 시작 지점이된다.

 

정확히 말하면 앞의 Flexbox Froggy에서 column-reverse와 row-reverse에 대하여 그냥 요소들의 순서를 바꾼다고 설명한 부분은 틀렸다.

그래서  flex-direction : row-reverse;만 먹여서 순서도 바뀌고 위치도 오른쪽으로 붙은 요소들을 왼쪽으로 보내려면 브라우저가 끝이라고 인식하는 부분에다가 보내줘야 한다. 

 

그래서 justify-content: flex-end;를 사용하는 것이다. 

이 부분에 대해서는 Flexbox Froggy의 설명이 좀 미흡하다.