Flexbox Froggy 정답

View

Flexbox Froggy 정답

hooti 2021. 2. 24. 18:56

Flexbox froggy!

혹시 도움이 될지몰라 포스팅을 한다. CSS에서 태그의 정렬기능을 담당하는 flex를 쉽게 학습하고 실습할 수 있는 학습게임사이트다. 개구리가 정해진 수련잎으로 이동하면 다음단계로 진행할 수 있다. 위코드에 들어갔을때, 멘토님들이 많이 추천해준 사이트라 한번 쭉 풀었었는데, flex에 대한 기초지식없이 진행하기보다는 어느정도 이론적으로 이해하고 실습용으로 쓰는 걸 추천한다. 아무런 이해없이 해당 문제를 전부 푼다고 flex를 마음대로 다룰 수 있는건 아닌 것 같다. 몰론 개인차가 있겠지만, 다른분들에게 추천해줬을때 대부분... 그랬던 것 같다.

flex에 대해서는 이전에 포스팅을 했었기에 해당 문서에서는 설명을 생략하도록 하겠다. 꽤 중요한 내용이니 꼭 이론적으로 이해하는걸 추천한다! 정답과 풀이는 아래쪽에 작성되어 있다.

🐸 사이트 방문하기 🐸

Flexbox froggy 풀이

정답은 코드블럭안에 있는 개구리(🐸)를 확인하자! 단계옆에 간단한 풀이를 적어놓긴하지만 꼭! 이론적으로 따로 공부하자!

✋ 1단계 : 가로상의 정렬을 담당하는 justify-content를 이용하여 개구리를 맨 끝으로 이동시킨다.

#pond {
  display: flex;
🐸justify-content: flex-end;🐸
}

✋ 2단계 : 가로상의 정렬을 담당하는 justify-content를 이용하여 개구리들을 가운데로 이동시킨다.

#pond {
  display: flex;
🐸justify-content: center;🐸
}

✋ 3단계 : 가로상의 정렬을 담당하는 justify-content를 이용하여 개구리들을 주위가 동일한 간격을 두도록 이동시킨다.

#pond {
  display: flex;
🐸justify-content:space-around;🐸
}

✋ 4단계 : 가로상의 정렬을 담당하는 justify-content를 이용하여 개구리들을 사이가 동일한 간격을 두도록 이동시킨다.

#pond {
  display: flex;
🐸justify-content:space-between;🐸
}

✋ 5단계 : 세로상의 정렬을 담당하는 align-items를 이용하여 개구리들을 아래로 이동시킨다.

#pond {
  display: flex;
🐸align-items:flex-end;🐸
}

✋ 6단계 : 세로상의 정렬을 담당하는 align-items과 가로상의 정렬을 담당하는 justify-content를 모두 이용하여 개구리를 가운데로 이동시킨다.

#pond {
  display: flex;
🐸justify-content: center;
  align-items: center;🐸
}

✋ 7단계 : 세로상의 정렬을 담당하는 align-items과 가로상의 정렬을 담당하는 justify-content를 모두 이용하여 개구리를 아래로 이동시킨 후, 주위가 동일한 간격으로 정렬한다.

#pond {
  display: flex;
🐸justify-content: space-around;
  align-items: flex-end;🐸
}

✋ 8단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 역순으로 정렬한다.

#pond {
  display: flex;
🐸flex-direction: row-reverse;🐸
}

✋ 9단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 세로로 정렬한다.

#pond {
  display: flex;
🐸flex-direction: column;🐸
}

✋ 10단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 역순으로 정렬한 후 가로상의 정렬을 담당하는 justify-content을 이용하여 끝나는 점으로 이동시킨다. (flex-direction을 이용하여 순서를 뒤집으면 시작점과 끝점도 뒤집힌다.)

#pond {
  display: flex;
🐸flex-direction: row-reverse;
  justify-content: flex-end;🐸
}

✋ 11단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 세로로 정렬한 후, 가로상의 정렬을 담당하는 justify-content을 이용하여 끝나는 점으로 이동시킨다.

#pond {
  display: flex;
🐸flex-direction: column;
  justify-content: flex-end;🐸
}

✋ 12단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 역순세로로 정렬한 후, 가로상의 정렬을 담당하는 justify-content을 사이 간격을 동일하게 이동시킨다.

#pond {
  display: flex;
🐸flex-direction: column-reverse;
  justify-content: space-between;🐸
}

✋ 13단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 역순로 정렬한 후, 가로상의 정렬을 담당하는 justify-content을 이용하여 가운데로 이동시킨다. 마지막으로 세로상의 정렬을 담당하는 align-items을 이용하여 아래로 이동시킨다.

#pond {
  display: flex;
🐸flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;🐸
}

✋14단계 : 개별적으로 요소를 지정하여 이동할 수 있는 order를 이용하여 노란색 개구리를 끝으로 이동시킨다. order는 숫자로 입력을 받는데 -1은 왼쪽으로, 0은 원래자리, 1은 오른쪽으로 이동한다.

#pond {
  display: flex;
}

.yellow {
🐸order: 1;🐸
}

✋15단계 : 개별적으로 요소를 지정하여 이동할 수 있는 order를 이용하여 빨간색 개구리를 같은색 수련잎으로 이동시킨다.

#pond {
  display: flex;
}

.red {
🐸order: -1;🐸
}

✋16단계 : 세로상의 정렬을 담당하는 align-items의 인자값을 받으며 개별로 정렬할 수 있는 align-self을 이용하여 노란색개구리를 아래로 이동시킨다.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
🐸align-self: flex-end;🐸
}

✋17단계 :세로상의 정렬을 담당하는 align-items의 인자값을 받으며 개별로 정렬할 수 있는align-self와 개별이동을 할 수 있는 order를 이용하여 색에 맞는 잎으로 노란색 개구리를 이동시킨다.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
🐸order: 1;
  align-self: flex-end;🐸
}

✋18단계 : flex요소의 줄정렬을 담당하는 flex-wrap를 이용하여 개구리를 두줄로 정렬해준다.

#pond {
  display: flex;
🐸flex-wrap: wrap;🐸
}

✋19단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리를 세로로 정렬해준다. 그 다음 flex요소의 줄정렬을 담당하는flex-wrap를 이용하여 개구리를 두줄로 정렬해준다.

#pond {
  display: flex;
🐸flex-direction: column;
  flex-wrap: wrap;🐸
}

✋20단계 : flex-direction과 flex-wrap를 하나로 요약해서 사용할 수 있게 해주는 flex-flow를 이용해 이전단계의 형태를 구현한다.

#pond {
  display: flex;
🐸flex-flow: column wrap;🐸
}

✋21단계 : 세로상의 정렬을 담당하는 align-item을 이용하여 개구리들이 위쪽으로 정렬해준다.

#pond {
  display: flex;
  flex-wrap: wrap;
🐸align-content: flex-start;🐸
}

✋22단계 : 세로상의 정렬을 담당하는 align-item을 이용하여 개구리들이 아래쪽으로 정렬해준다.

#pond {
  display: flex;
  flex-wrap: wrap;
🐸align-content: flex-end;🐸
}

✋23단계 : 정렬방향을 지정하는 flex-direction을 이용하여 개구리들을 세로역순정렬해준다. 그다음 세로상의 정렬을 담당하는 align-item을 이용하여 가운데로 이동시킨다.

#pond {
  display: flex;
  flex-wrap: wrap;
🐸flex-direction: column-reverse;
  align-content: center;🐸
}

✋24단계 : 지금까지 배운걸 차근차근 한다면 해결할 수 있다!

flex요소의 줄정렬을 담당하는flex-wrap를 이용하여 여러줄로 변경하되 역순으로 정렬해준다.
정렬방향을 지정하는 flex-direction을 이용하여 개구리를 세로역순으로 정렬해준다.
가로상의 정렬을 담당하는 justify-content을 이용하여 가운데로 이동시킨다.
마지막으로 세로상의 여분간격을 조절하는 align-content을 이용하여 개구리 사이 간격을 동일하게 해준다.

#pond {
  display: flex;
🐸flex-wrap: wrap-reverse;
  flex-direction: column-reverse;
  justify-content:center;
  align-content: space-between;🐸
}

👇 혹시 24단계를 이해하기 어렵다면 여기를! 👇

여러가지를 동시에 작성하다보면 이해가 어려울때가 있는데 하나씩 짚으면서 이해해보자!

먼저 지옥철에 타있는것 같은 불쌍한 개구리들을 편하게 해주자, 수련잎이 두줄로 되어 있으니 여러줄로 변경해주는 flex-wrap를 사용한다!

flex-wrap: wrap를 해보니 순서가 반대라는걸 확인할 수 있다. wrap 뒤에 reverse를 붙여 뒤집어주자!

두줄로 만든 개구리들의 정렬방향을 세로로 변경해줍니다. flex-direction: column로 세로변경!

세로로 변경한건 맞았는데, 빨간색개구리의 위치가 반대다. revers를 붙여 반대로 뒤집어주는 작업을 하자!

얼마 안남았다! 힘내서 마무리하자! 오른쪽 개구리는 위치를 전부 맞췄으니 노란개구리를 옮기자! 노란색 수련잎이 가운데에 몰려있는걸로 가운데정렬을 사용하는걸 알 수 있다! justify-content:center을 이용하여 가운데로 이동하자!

이제 수련잎위에 올려주는 일만 남았다. 개구리들 사이의 여백이 동일하니 세로의 여백을 조정하는 align-content: space-between을 사용하자!

완성!

개구리 옮기느라 고생하셨습니다~ 🐸

'Review' 카테고리의 다른 글

Learn Git Branching 정답 - 1편 (0)	2021.03.03
Font Awesome(폰트어썸)의 기능 (0)	2021.02.25
vue native event에 대한 개인적인 고찰 (0)	2021.02.23
v-model 대신 v-on를 사용해야하는 경우 (v-model 한글입력) (2)	2021.02.21
스택(Stack)과 큐(queue) (0)	2021.02.05

Share Link

Fasebook
Twitter

reply

빛나라 지식의별

View