전체 글12 재미있게 Grid를 마스터하는 - Grid Garden 3/3 (문제풀이 21~28) 재미있게 Grid를 마스터하는 - Grid Garden 3/3 (문제풀이 21~28) 이전 문제 풀이는 아래 링크를 참고해주세요. 문제 21 Grid 레이아웃에서 grid-template-columns 또는 grid-template-rows 속성에 같은 값이 반복적으로 나타날 때 repeat() 함수를 사용하면 코드를 간결하게 작성할 수 있습니다. 이 문제는 repeat() 함수를 사용하여 Grid 컨테이너의 열 구조를 효율적으로 정의하는 방법을 익히는 문제입니다. repeat() 함수:repeat(반복 횟수, 값) 형식으로 사용합니다.반복 횟수에는 정수 값을 지정합니다.값에는 열 또는 행의 크기를 지정합니다. fr, px, % 등 다양한 단위를 사용할 수 있습니다. repeat()는 마치 코딩에.. 2025. 2. 7. 재미있게 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. 재미있게 Grid를 마스터하는 - Grid Garden 1/3 (문제풀이 1~10) 재미있게 Grid를 마스터하는 - Grid Garden 1/3 (문제풀이 1~10) 이전 포스팅에서는 어쩌면 Grid와 짝을 이루는(?) Flex에 대해서 문제풀이를 함께 진행해보았습니다. 얼핏 볼 때는 Grid가 왠지 더 직관적이고 좋아 보이지만, Flex 만으로도 사실 어지간한 UI 구조는 대응이 가능합니다. 재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3재미있게 Flex를 마스터하는 - Flexbox Froggy 1/3 CSS를 공부하다 보면, Flexbox는 꼭 만나게 되는 핵심 기술입니다. 저도 예전에 배웠던 Flex를 다시 복습하며, 라는 게임으로 개념을 익히고 있dcsky.co.kr Flex는 플랙스 특성상 쓰임이 좋은 곳이 있고, 또 Grid는 그리드 대로 .. 2025. 2. 5. 재미있게 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 2 다음
