그리드 가든2 재미있게 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. 이전 1 다음
