재미있게 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는 플랙스 특성상 쓰임이 좋은 곳이 있고, 또 Grid는 그리드 대로 쓰임이 좋은 장점들이 존재합니다. 중요한 것은 무엇이 더 좋은가를 의미없이 따지기 보다, 둘 다 잘 사용할 줄 아는 것이 더 중요하다 하겠습니다.

 

 

---

 

이번 포스팅에서는 codepip.com에서 제공하는 Grid Garden을 함께 문제풀이 해보면서, 그리드가 어떻게 작동하는 지 재미있는 공부를 진행해보도록 합니다.

 

Codepip

 

 

 

문제 1

 

Grid의 기본적인 배치 속성인 grid-column-start를 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (water): Grid 아이템 역할을 하며, grid-column-start 속성을 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-start 이해: grid-column-start 속성은 Grid 아이템이 어느 열에서 시작할지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. 자식 요소 (water)에 속성 적용: 문제에서 water 요소에 grid-column-start 속성을 적용하여 원하는 위치에 배치합니다.

#water {
  grid-column-start: 3;
}

 

 

 

 

문제 2

 

 

Grid의 기본적인 배치 속성인 grid-column-start를 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (poison): Grid 아이템 역할을 하며, grid-column-start 속성을 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-start 이해: grid-column-start 속성은 Grid 아이템이 어느 열에서 시작할지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. 자식 요소 (poison)에 속성 적용: 문제에서 poison 요소에 grid-column-start 속성을 적용하여 원하는 위치에 배치합니다.

 

#poison {
  grid-column-start: 5;
}

 

 

 

문제 3

 

Grid의 기본적인 배치 속성인 grid-column-end를 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-column-end 속성을 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.
•  

 

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-end 이해: grid-column-end 속성은 Grid 아이템이 어느 열에서 끝날지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column-end 속성을 적용하여 원하는 위치에 배치합니다.

 

#water {
  grid-column-start: 1;
  grid-column-end: 4;
}

 

 

 

문제 4

 

Grid의 기본적인 배치 속성인 grid-column-start와 grid-column-end를 이용하여 Grid 아이템의 배치 방향을 조절하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-column-start와 grid-column-end 속성을 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-start와 grid-column-end 이해:
   • grid-column-start 속성은 Grid 아이템이 어느 열에서 시작할지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
   • grid-column-end 속성은 Grid 아이템이 어느 열에서 끝날지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column-start와 grid-column-end 속성을 적용하여 원하는 위치에 배치합니다. 이때, start와 end 값을 조절하여 아이템의 방향을 조절할 수 있습니다.

#water {
  grid-column-start: 5;
  grid-column-end: 2;
}

 

 

 

문제 5

 

Grid의 grid-column 속성과 음수 index를 활용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다.

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-column 속성과 음수 index를 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column 이해: grid-column 속성은 grid-column-start와 grid-column-end를 한 번에 지정할 수 있는 속성입니다. grid-column: start / end 와 같은 형식으로 사용합니다.
3. 음수 index 이해: Grid의 index는 양수뿐만 아니라 음수도 사용할 수 있습니다. -1은 마지막 열, -2는 마지막에서 두 번째 열과 같이 역순으로 열을 선택할 수 있습니다.
4. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column 속성과 음수 index를 적용하여 원하는 위치에 배치합니다.

#water {
  grid-column-start: 1;
  grid-column-end: -2;
}

 

 

 

문제 6

 

Grid의 grid-area 속성과 grid-template-areas 속성을 활용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-areas 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-area 속성을 사용하여 Grid 컨테이너 내에서 특정 영역에 배치됩니다.

 

 

해결 방법:

1. grid-template-areas 이해: grid-template-areas 속성은 Grid 컨테이너의 영역 이름을 정의하고, 각 영역이 차지하는 칸을 시각적으로 표현합니다. 문자열을 사용하여 각 영역의 이름을 지정하고, 이를 통해 Grid 아이템을 배치할 위치를 정할 수 있습니다.
2. grid-area 이해: grid-area 속성은 Grid 아이템이 어떤 영역에 위치할지 지정합니다. grid-template-areas에서 정의한 영역 이름을 사용하여 아이템을 원하는 위치에 배치할 수 있습니다.
3. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-area 속성을 적용하고, grid-template-areas에서 정의한 영역 이름을 사용하여 원하는 위치에 배치합니다.

#poison {
  grid-column: -3;
}

 

 

 

문제 7

 

Grid의 grid-column-start 속성과 span 키워드를 활용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-column-start 속성과 span 키워드를 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-start 이해: grid-column-start 속성은 Grid 아이템이 어느 열에서 시작할지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. span 키워드 이해: span 키워드는 Grid 아이템이 지정된 위치에서부터 몇 개의 열을 확장할지를 지정합니다. span 숫자 와 같은 형식으로 사용합니다.
4. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column-start 속성과 span 키워드를 적용하여 원하는 위치에 배치합니다.

 

#water {
  grid-column-start: 2;
  grid-column-end: span 2;
}

 

 

 

문제 8

 

Grid의 grid-column-end 속성과 span 키워드를 활용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-column-end 속성과 span 키워드를 사용하여 Grid 컨테이너 내에서 특정 위치에 배치됩니다.

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column-end 이해: grid-column-end 속성은 Grid 아이템이 어느 열에서 끝날지를 지정합니다. 숫자 값을 사용하여 원하는 열 번호를 지정할 수 있습니다.
3. span 키워드 이해: span 키워드는 Grid 아이템이 지정된 위치에서부터 몇 개의 열을 확장할지를 지정합니다. span 숫자 와 같은 형식으로 사용합니다.
4. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column-end 속성과 span 키워드를 적용하여 원하는 위치에 배치합니다.

#water {
  grid-column-start: 1;
  grid-column-end: span 5;
}

 

 

 

 

문제 9

 

해당 문제는 Grid의 grid-auto-flow 속성을 활용하여 Grid 아이템의 배치 순서를 변경하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

• 부모 요소 (garden): Grid 컨테이너 역할을 하며, grid-template-columns 속성을 사용하여 격자 형태의 레이아웃을 정의합니다.
• 자식 요소 (item): Grid 아이템 역할을 하며, grid-auto-flow 속성을 사용하여 Grid 컨테이너 내에서 자동 배치되는 순서를 변경합니다.

 

 

해결 방법:

1. grid-template-columns 이해: grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-auto-flow 이해: grid-auto-flow 속성은 Grid 아이템이 Grid 컨테이너 내에서 자동 배치될 때 어떤 방향으로 흐를지를 결정합니다. 다음과 같은 값을 사용할 수 있습니다.
   • row (기본값): 행 방향으로 아이템을 배치합니다.
   • column: 열 방향으로 아이템을 배치합니다.
   • row dense: 행 방향으로 아이템을 배치하며, 빈 공간을 채우도록 아이템을 배치합니다.
   • column dense: 열 방향으로 아이템을 배치하며, 빈 공간을 채우도록 아이템을 배치합니다.
3. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-auto-flow 속성을 적용하여 원하는 배치 순서를 설정합니다.

 

#water {
  grid-column-start: span 3;
  grid-column-end: 6;
}

 

 

 

문제 10

 

Grid 레이아웃에서 grid-column-start와 grid-column-end 속성을 사용하여 아이템의 시작 열과 끝 열을 각각 지정할 수 있지만, 이 두 속성을 하나로 합쳐서 사용할 수 있는 grid-column 속성이 있습니다.

 

 

 

grid-column 속성은 grid-column-start와 grid-column-end 값을 슬래시(/)로 구분하여 간결하게 표현할 수 있도록 해줍니다.

 

#water {
  grid-column: 4 / 6;
}

 

 

 

마치며

 

이번 포스팅에서는 Grid Garden 문제풀이 1~10까지를 함께 진행해보았습니다. 어떤가요? Flex와는 또 다른 맛이 Grid에 들어 있지 않은가요? 서로 비슷한듯 닮아 있지만, 또 서로 다르게 제어하는 방식들이 참으로 흥미롭습니다.

 

그러면 다음 포스팅에서 또 만나요!