재미있게 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 컨테이너 내에서 특정 영역에 배치됩니다.

 

 

해결 방법:

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

#water {
  grid-column: 2 / span 3;
}

 

 

 

문제 12

 

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

 

문제 분석:

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

 

 

해결 방법:

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

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

 

 

 

문제 13

 

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

 

 

 

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

 

#water {
  grid-row: 3 / 6;
}

 

 

 

 

문제 14

 

Grid의 grid-column 속성과 grid-row 속성을 함께 사용하여 Grid 아이템을 배치하는 방법을 이해하고 활용하는 문제입니다.

 

문제 분석:

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

 

 

해결 방법:

1. grid-template-columns 와 grid-template-rows 이해:
   • grid-template-columns 속성은 Grid 컨테이너의 열 (column)을 정의합니다. 각 열의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
   • grid-template-rows 속성은 Grid 컨테이너의 행 (row)을 정의합니다. 각 행의 크기나 개수를 지정하여 원하는 격자 형태를 만들 수 있습니다.
2. grid-column 와 grid-row 이해:
   • grid-column 속성은 grid-column-start와 grid-column-end를 한 번에 지정할 수 있는 속성입니다. / 를 사용하여 시작 열과 끝 열 번호를 지정합니다.
   • grid-row 속성은 grid-row-start와 grid-row-end를 한 번에 지정할 수 있는 속성입니다. / 를 사용하여 시작 행과 끝 행 번호를 지정합니다.
3. 자식 요소 (item)에 속성 적용: 문제에서 item 요소에 grid-column 속성과 grid-row 속성을 함께 적용하여 원하는 위치에 배치합니다.

#poison {
  grid-column: 2;
  grid-row: 5;
}

 

 

 

 

문제 15

 

이 문제는 grid-column과 grid-row 속성에 span 키워드를 함께 사용하여 Grid 아이템의 크기와 위치를 조절하는 방법을 이해하는 문제입니다.

 

개념 이해

• grid-column: Grid 아이템의 시작 열과 끝 열을 지정하는 속성입니다. grid-column: <시작 열> / <끝 열> 형식으로 사용합니다.
• grid-row: Grid 아이템의 시작 행과 끝 행을 지정하는 속성입니다. grid-row: <시작 행> / <끝 행> 형식으로 사용합니다.
• span 키워드: grid-column과 grid-row 속성에서 아이템이 차지할 열 또는 행의 개수를 지정할 때 사용합니다.

 

 

start / end 두 개는 슬래시로 구분하면 되는 것이겠죠?

 

#water {
    grid-column: 2 / span 4;
    grid-row: 1 / span 5;
  }

 

 

 

문제 16

 

Grid 레이아웃에서 grid-column과 grid-row 속성을 각각 사용하는 대신, grid-area 속성 하나로 시작 행, 시작 열, 끝 행, 끝 열을 한 번에 지정할 수 있습니다.

 

grid-area 속성은 grid-row-start, grid-column-start, grid-row-end, grid-column-end 이 네 가지 속성값을 슬래시(/)로 구분하여 간결하게 표현합니다.

 

 

 

grid-area는 grid-column + grid-row의 축약형입니다.

 

#water {
    grid-area: 1 / 2 / 4 / 6;
  }

 

 

 

문제 17

 

이 문제는 grid-area 속성을 이용하여 두 개의 Grid 아이템을 겹치게 배치하는 방법을 익히는 문제입니다. Grid 레이아웃에서는 아이템들을 겹쳐서 배치할 수 있는데, grid-area 속성을 사용하여 각 아이템이 차지할 영역을 명확하게 지정함으로써 겹침을 효과적으로 제어할 수 있습니다.

 

핵심 개념:

• grid-area: 아이템의 위치와 크기를 지정하는 속성입니다. grid-area: <시작 행> / <시작 열> / <끝 행> / <끝 열> 형식으로 사용하며, "로컬로칼로" 규칙을 이용하여 순서를 기억할 수 있습니다.
• 겹침: 두 개 이상의 아이템이 동일한 Grid 셀을 차지하도록 하여 겹치는 효과를 만듭니다. z-index 속성을 사용하여 겹치는 순서를 조절할 수 있습니다.

 

 

먼저 #water-1에는grid-area가 적용된 점을 참고하고 #water-2에 grid-area를 적용해보겠습니다.

 

 

 

 

 

문제 18

 

 

Grid 레이아웃에서도 Flexbox처럼 order 속성을 사용하여 아이템의 배치 순서를 변경할 수 있습니다.

기본적으로 Grid 아이템은 HTML 소스 코드에 작성된 순서대로 배치됩니다. 하지만 order 속성을 사용하면 이 순서를 변경하여 시각적으로 다른 순서로 아이템을 표시할 수 있습니다.

 

order 속성 사용 방법:

• order 속성은 정수 값을 가집니다.
• 값이 작을수록 아이템이 먼저 배치됩니다.
• 기본값은 0입니다.
• 음수 값도 사용할 수 있습니다.

 

 

poison에 order를 주는 방법은 어떨까요?

 

#poison {
    order: 1;
  }

 

 

 

문제 19

 

이 문제 또한  Grid 레이아웃에서 order 속성을 사용하여 아이템의 배치 순서를 변경하는 연습 문제입니다.

 

문제 상황:

• 여러 개의 Grid 아이템이 있습니다.
• 아이템들은 HTML 소스 코드에 작성된 순서대로 배치되어 있습니다.
• order 속성을 사용하여 아이템의 시각적인 배치 순서를 변경해야 합니다.

 

 

해결 방법:

1. 원하는 배치 순서 결정: 문제에서 요구하는 아이템의 배치 순서를 파악합니다.
2. order 속성 적용: 각 아이템에 order 속성을 적용하여 원하는 순서대로 배치되도록 값을 지정합니다.
   • order 값이 작을수록 아이템이 먼저 배치됩니다.
   • 필요에 따라 음수 값을 사용할 수도 있습니다.

#poison {
    order: -1;
  }

 

 

 

문제 20

 

Grid 컨테이너, 즉 부모 요소의 속성을 설정하여 전체적인 레이아웃을 구성하는 문제입니다.

 

자식 요소의 위치를 조정하는 것과 달리 컨테이너 속성을 설정하는 것은 Grid 레이아웃의 기본 구조를 결정하기 때문에 처음에는 다소 헷갈릴 수 있습니다. 하지만 컨테이너 속성을 이해하는 것은 Grid 레이아웃을 자유자재로 활용하는 데 필수적입니다.

 

이 문제에서는 grid-template-columns 속성을 사용하여 Grid 컨테이너의 열 구조를 정의합니다.

 

grid-template-columns 속성:

• Grid 컨테이너를 세로선으로 나누어 열을 생성합니다.
• 각 열의 크기를 지정할 수 있습니다.
• fr 단위, 픽셀 (px), 백분율 (%) 등 다양한 단위를 사용할 수 있습니다.

 

 

칼럼과 로우 각각 5개 요소이니, columns를 2개로 만들어보면 어떨까요?

 

#garden {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 20% 20% 20% 20% 20%;
  }

 

 

 

마치며

 

머릿속 생각만으로는 복잡한 레이아웃일 것 같지만, 막상 Grid의 속성들을 알고 보니, 생각보다 간단하게 풀린다는 느낌이 들지 않나요? 그렇습니다! Flex와 Grid를 잘 사용하는 것 만으로도 정말 복잡한 레이아웃들도 간단하게 해결해 나갈 수 있습니다.

 

다음 포스팅에서 이어지는 마지막 문제까지 함께 도전해 보신다면, 강력한 Grid의 매력에 더욱 빠져들 것이라 장담합니다.