flexbox2 재미있게 Flex를 마스터하는 - Flexbox Froggy 3/3 재미있게 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.. 2025. 2. 4. 재미있게 Flex를 마스터하는 - Flexbox Froggy 2/3 재미있게 Flex를 마스터하는 - Flexbox Froggy 2/3 이전 포스팅에 이어 Flex Froggy 문제풀이를 계속 함께 진행봅시다.아직 앞 문제를 풀지 않으신 분은 1~8번 문제를 먼저 풀고 조인해주세요. 문제 9: 세로 배치 flex-direction 속성은 Flexbox 레이아웃의 방향을 결정하는 핵심적인 요소이며, Flexbox를 이해하는 데 매우 중요한 역할을 합니다. 가볍게 보고 넘어가면 헷갈릴 수 있으니 꼭 잘 알아두어야 합니다. 핵심:flex-direction이 row일 때 ➔ justify-content는 가로 정렬column일 때 ➔ justify-content는 세로 정렬#pond { display: flex; flex-direction: column;} 문제 1.. 2025. 2. 3. 이전 1 다음
