(S)CSS
[Flexbox Froggy] flexbox를 게임으로 배우기 (13번~24번 문제풀이)
Hyunsangs
2023. 6. 27. 19:56
1번부터 12번까지 정리해봤고, 그 뒤를 이어서 나머지 문제들도 풀고 정리해보자.
13번문제
일단 처음에 개구리와 연못 순서가 반대로 뒤집어져있다는것을 처음에 알 수 있다. 그래서 flex-direction: row-reverse; 하고, 가운데에 몰려있기때문에, main-axis 인 justify-content: center 로 설정, 그리고 아래로 개구리들을 내리는, cross-axis 인 align-items : flex-end로 설정.
14번문제
order 속성을 사용하는 문제이다. 지금 .yellow 클래스에 order속성을 사용하여 맨 오른쪽으로 보내는 것이다.
order : 1 ; 로 해주면 나머지 그린 과 빨강 개구리들은 order 0; 인 상태이기때문에 (default가 0) 노란 개구리가 오른쪽으로 이동한다.
15번문제
이것 또한 order속성을 사용하는 문제인데 default 가 0 이기 때문에 red에게 -1 을 주면 맨왼쪽으로 이동하게 된다.
16번문제
옐로우 개구리만 이제 맨 아래로 보내야 하는데 이럴때는, align-self 을 사용한다
align-self는 개별 요소로 적용하는 역할을 한다. 그래서 지정한 요소만이 이동이 가능해진다
그래서 align-self : flex-end ; 해주면 옐로우가 밑으로 이동한다.
17번문제
옐로우 개구리들이 뒤죽박죽 섞여있지만, order 속성을 사용하면 옐로우 개구리들만 맨오른쪽으로 2개가 이동한다.
그리고 또한 밑으로 옐로우 개구리들만 내리려면 align-self: flex-end; 해주면 된다.
18번문제
처음 문제를 보면 개구리 친구들이 찌그러져있다. 한줄위에 많은 요소들이 있어서 그거에 맞춰 아마 줄어든 형식인거같다. 이것은 wrap과 nowrap 개념을 이용하면 된다. flex-wrap: wrap 해주면 요소들이 여러줄에 걸쳐 정렬되어 찌그러지지 않는 상태가 되고 그 이상, 넘어가는 요소들은 그다음 줄로 이동하게 된다. flex-wrap: nowrap 하게 되면 다시 찌그러진 형태가 될 것이다.
19번문제
이것도 많은 개구리들이 처음에 찌그러져있다. flex-wrap: wrap; 으로 일단 개구리들을 다 펴주고,
column 으로 개구리들을 세로줄로 정렬시키면 된다.
20번문제
이제 shortcode인 flex-flow는 flex-direction과 flex-wrap을 합쳐놓은 것이다. 그래서 flex-flow: column wrap ; 이렇게해주면 컬럼 형태로 바꾸고, wrap인 형태가 한꺼번에 이루어진다.
21번문제
wrap으로 감싸게되어서 , 만약 요소들이 다음 줄로 넘어가게 되면 그 사이에 자연스럽게 요소들끼리 간격이 발생하게 된다. 이 간격을 이제 다시 정렬하고 싶다면 align-content를 사용하여 flex-start 하면 위로 이쁘게 정렬 된다.
22번문제
이것은 21번 문제에 flex-start에 반대 속성인 flex-end ; 해주면 밑으로 정렬이 된다.
23번문제
딱 처음 문제를 보았을 때, main-axis 와 cross-axis 의 진행방향을 생각해보면 , 이것은 reverse 해야 된다는 것을 알 수 있다. 그래서 flex-direction: column-reverse; 해주고 , 개구리들을 가운데에 모이게 하려면 align-content: center; 해주면 개구리들이 가운데로 모이게 된다.
24번문제
24번문제는 역시 마지막문제라서 생각할게 많았다. 지금까지 배운 css속성으로 하는것이기 때문에 2가지 방법으로 해결을 할 수 있다.
첫번째방법, 일단 개구리들이 찌그러져 있고, 또한 연못과 개구리 위치를 비교해보니 일단 뒤집고, wrap으로 감싸야 된다고 생각했다. 또한, 개구리들이 세로로 정렬을 시켜야 한다. 그래서 처음에 flex-direction : column-reverse; 를해주고,
개구리들이 찌그러져있는 것을 잡기위해 wrap을 해주는데 wrap하고나서 보면, 개구리 5마리가 왼쪽에 치우쳐있다.
그것을 오른쪽으로 5마리를 보내려면 wrap에 -reverse를 해주면 된다. 그러고나서 노란색 개구리들만 아래로 내려져있는데 , 이것은 justify-content: center;로 노란색 개구리들을 가운데로 맞춘다. 오른쪽 5마리는 이미 다 차지하고있기 때문에 위치 변화가없다. 마지막으로 align-content: space-between; 을 해주면 노란색 2마리와 나머지 5마리가 왼쪽끝과 오른쪽 끝으로 가져서 집으로 돌아갈 수 있다.
두번째방법, 2번째 방법은 flex-direction과 flex-wrap을 한꺼번에 설정할수 있는 shortcode로 flex-flow를 사용하는 것이다. flex-flow: (flex-direction설정) (flex-wrap) ; 해주면 한번에 할 수가 있다. 그리고 나머지 코드는 동일한다.
이상으로, 개구리 집보내기 24문제를 다 풀어봤다.
flexbox 개념을 쉽게 게임으로 함으로써, 개념 정리와 이해하기가 더 수월했던 것 같다.
grid버전도 이것과 비슷한 형태가 있다고 해서, 그 게임도 해볼 예정이다.
* 설명이 이상한 부분이 있다면 지적해주시면 감사하겠습니다!