Flex4 재미있게 Grid를 마스터하는 - Grid Garden 2/3 (문제풀이 11~20) 재미있게 Grid를 마스터하는 - Grid Garden 2/3 (문제풀이 11~20) 1~10번 문제 풀이가 궁금하시면, 이전 포스팅을 참고하세요. 문제 11 Grid의 grid-column 속성과 span 키워드를 함께 사용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다. 문제 분석:부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.자식 요소 (item): Grid 아이템 역할을 하며, grid-column 속성과 span 키워드를 사용하여 Grid 컨테이너 내에서 특정 영역에 배치됩니다. 해결 방법:grid-template-columns 이해: grid-template-col.. 2025. 2. 6. 재미있게 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. 재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3 재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3 CSS를 공부하다 보면, Flexbox는 꼭 만나게 되는 핵심 기술입니다. 저도 예전에 배웠던 Flex를 다시 복습하며, 라는 게임으로 개념을 익히고 있습니다. 개구리를 움직이며 Flex 속성을 배우는 이 게임은 지루한 이론을 넘어 직관적인 이해를 도와줍니다. Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com 또는 Codepip에서 Grid 연습도 가능하니 참고하세요! CodepipLearn to code by playing gamescodepip.com 문제 풀이 & 핵심 개념 정리게임을 하다 보면 Flex의 동작 원리가 머릿속에 쏙쏙 들어옵니다. 아래 문제 해.. 2025. 2. 2. 이전 1 다음
