재미있게 Flex를 마스터하는 - Flexbox Froggy 3/3
이제 Flexbox Froggy 문제풀이 마지막 장입니다. 어떤가요? Flex 속성을 다루는 일이 한층 쉬워졌다는 생각이 들지 않으신가요?
자, 그럼 거두절미 하고 마지막 24번 문제까지 함께 또 풀어보도록 합시다!
문제 17:
이 문제는 order와 align-self 속성의 조합을 활용하는 문제입니다.
order 속성은 마치 z-index와 비슷하게 작동합니다. order 값으로 어떤 숫자를 사용하든 Flex 아이템의 순서를 조절할 수 있습니다.
#pond {
display: flex;
align-items: flex-start;
}
.yellow {
order: 1;
align-self: flex-end;
}
문제 18 :
18번 문제는 자식 요소(items)가 많아져서 컨테이너를 넘어치는 상황을 다루며, 이때 요소들을 어떻게 배치할지 결정하는 flex-wrap 속성을 이해하는 데 중점을 둔 문제입니다.
기본 설정(default)에서는 요소들이 한 줄에 계속해서 배치되어 컨테이너 밖으로 넘쳐 흐르는 모습이 됩니다.
wrap의 의미가 기존 CSS의 속성들과는 살짝 다른 느낌이 드는 것은 어쩌면 당연할지도 모릅니다. Flexbox의 flex-wrap 속성은 요소들을 "감싸는" 개념으로, 공간이 부족할 때 다음 줄로 옮기는 방식을 결정합니다. 이는 블록 요소들이 자연스럽게 아래로 쌓이는 방식과는 약간의 차이가 있습니다.
#pond {
display: flex;
flex-wrap: wrap;
}
문제 19 :
19번 문제는 flex-wrap 속성을 사용하여 요소들을 세로 축(column 방향)으로 감싸는 방법을 보여주는 예제 문제입니다.
네, 개구리가 너무 많아서 쭈그러들 정도로 빽빽하게 배치되었네요. ^^
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
문제 20 :
20번 문제는 앞선 19번 문제와 유사하지만, flex-direction과 flex-wrap 두 가지 속성을 flex-flow 속성 하나로 합쳐서 사용하는 방법을 보여줍니다.
#pond {
display: flex;
flex-flow: column wrap;
}
문제 21 :
21번 문제는 align-content와 align-items의 차이점을 이해하는 데 초점을 맞춘 문제입니다. 두 속성 모두 Flexbox의 교차축(cross axis) 방향 정렬에 관여하지만, 그 적용 대상과 방식에 차이가 있습니다.
- align-items: Flexbox 컨테이너 내의 각각의 줄(line) 안에서 아이템들을 정렬합니다.
- align-content: Flexbox 컨테이너 내의 여러 줄(lines) 전체를 정렬합니다.
flex-wrap: wrap 속성이 적용되어 여러 줄이 생성된 경우, align-content는 이 줄들을 묶어서 정렬하는 역할을 합니다.
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
문제 22 :
22번 문제는 앞선 21번 문제와 거의 동일한 유형으로, align-content와 align-items의 차이점을 다시 한번 복습하는 문제입니다.
앞에 풀었으니 이제 이 정도는 식은죽 먹기입니다!
#pond {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
문제 23 :
23번 문제는 아주 살짝 트릭이 숨어 있지만, 풀기 어렵지는 않습니다. 한번 직접 풀어보세요!
트릭 발견하셨나요?
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;
}
문제 24 :
24번 문제는 드디어 마지막 문제입니다! 아마, 여기까지 오신 분들 중 절반 정도는 이 문제에서 머리를 쥐어 뜯게 될 수도(?) 있겠습니다. 끝판왕이라 만만치 않게 느껴질 것도 같습니다.^^
만약 당장 잘 되지 않더라도 트라이 하는 기간을 두고 찬찬히 몇번이고 도전해보세요.
결국에는 정답을 보지 않고 스스로 풀어내게 될 것인데요, 그 때의 성취감과 쾌감은 정말 짜릿할겁니다! 파이팅입니다!!
그래서!! 마지막 문제에 대한 해답은! 공개하지 않는 것으로 마무으리~ 하겠습니다.^^ 꼭 직접 풀어보시기 바랍니다.
아마도 많은 분들이 아래 화면처럼 헤매고 있으실 확률이 꽤나 높은 문제랍니다.^^
물론 AI에게 질문한다면 한 방에 해결을 해주겠지만~ 그렇게 공부하면 실력은 안드로메다로 가게 될 것입니다.
문제를 모두 다 풀면 엔딩 보너스 화면도 있으니, 꼭 모두 풀어보시길 권해드립니다.
마치며
이상으로 Flexbox Froggy 24 개의 문제를 함께 풀어보았습니다. 한 번에 Flex를 이해하기에는 다소 어려움이 있을 수도 있겠습니다. 하지만, 흥미를 갖고 반복적으로 사용하다 보면 자연스레 체득이 되더라구요.
저에게는 무척 흥미로운 과제였는데, 여러분들에게도 흥미로운 여행이었다면 더욱 바랄 나위 없겠습니다.