CSS 그리드 트랙 크기 조절: 내재적 및 외재적 제어 마스터하기

CSS 그리드 레이아웃은 복잡하고 반응형인 웹 레이아웃을 만드는 강력한 도구입니다. 그 핵심 강점 중 하나는 유연한 트랙 크기 조절 기능에 있으며, 이를 통해 행과 열의 크기를 정밀하게 제어할 수 있습니다. 다양한 트랙 크기 조절 키워드와 함수를 이해하는 것은 적응성 있고 유지보수 가능한 레이아웃을 구축하는 데 매우 중요합니다. 이 글에서는 CSS 그리드의 내재적(intrinsic) 및 외재적(extrinsic) 크기 조절의 고급 개념을 깊이 파고들어, 다양한 콘텐츠와 화면 크기에 우아하게 적응하는 레이아웃을 만드는 방법을 탐구합니다.

그리드 트랙과 크기 조절 이해하기

내재적 및 외재적 크기 조절의 구체적인 내용을 살펴보기 전에, CSS 그리드 트랙의 기본 개념을 다시 한번 짚어보겠습니다.

그리드 트랙이란?

그리드 트랙은 그리드 레이아웃의 행과 열입니다. 그리드 항목이 배치되는 구조를 정의합니다. 이 트랙의 크기는 전체 레이아웃과 그리드 내 콘텐츠 배포 방식에 직접적인 영향을 미칩니다.

트랙 크기 지정하기

grid-template-rows와 grid-template-columns 속성을 사용하여 트랙 크기를 정의할 수 있습니다. 이 속성들은 공백으로 구분된 값 목록을 받으며, 각 값은 해당 트랙의 크기를 나타냅니다. 예를 들어:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

이 코드는 세 개의 열과 두 개의 행이 있는 그리드를 생성합니다. 첫 번째와 세 번째 열은 각각 사용 가능한 공간의 1 비율(fr)을 차지하고, 두 번째 열은 2 비율을 차지합니다. 행은 콘텐츠에 따라 자동으로 크기가 조절됩니다.

내재적 크기 조절 vs. 외재적 크기 조절

고급 그리드 트랙 크기 조절의 핵심은 내재적 크기 조절과 외재적 크기 조절의 차이점을 이해하는 데 있습니다. 이 개념들은 트랙의 크기가 콘텐츠와 사용 가능한 공간에 따라 어떻게 결정되는지를 정합니다.

내재적 크기 조절: 콘텐츠 기반

내재적 크기 조절은 그리드 트랙의 크기가 해당 트랙에 배치된 그리드 항목 내의 콘텐츠에 의해 결정됨을 의미합니다. 트랙은 특정 한도 내에서 콘텐츠를 수용하기 위해 확장되거나 축소됩니다. 내재적 크기 조절 키워드는 다음과 같습니다:

• auto: 기본값입니다. 트랙 크기는 해당 트랙에 있는 그리드 항목들의 가장 큰 최소 크기 기여도에 의해 결정됩니다. 대부분의 경우, 이는 트랙이 모든 콘텐츠를 넘치지 않고พอดี하게 만들 만큼 커진다는 것을 의미하지만, 그리드 항목에 설정된 min-width/min-height 값의 영향을 받을 수 있습니다.
• min-content: 트랙은 콘텐츠가 넘치지 않고 필요한 최소한의 공간에 맞춰 크기가 조절됩니다. 예를 들어, 텍스트는 단어를 어색하게 자르더라도 가능한 가장 작은 지점에서 줄 바꿈됩니다.
• max-content: 트랙은 콘텐츠가 넘치지 않고 필요한 최대한의 공간에 맞춰 크기가 조절됩니다. 텍스트의 경우, 이는 가능한 한 줄 바꿈을 피하려고 하므로 매우 넓거나 높은 트랙이 될 수 있습니다.
• fit-content(length): 트랙은 max-content와 지정된 length 중 더 작은 값으로 크기가 조절됩니다. 이를 통해 트랙의 최대 크기를 설정하면서도 콘텐츠에 따라 축소될 수 있도록 할 수 있습니다.

예제: `min-content`와 `max-content`를 사용한 내재적 크기 조절

두 개의 열이 있는 시나리오를 생각해 봅시다. 첫 번째 열은 min-content로, 두 번째 열은 max-content로 크기가 조절됩니다. 첫 번째 열의 콘텐츠가 긴 단어라면, 최소 콘텐츠 크기에 맞추기 위해 가능한 모든 지점에서 잘릴 것입니다. 그러나 두 번째 열은 줄 바꿈 없이 콘텐츠를 수용하기 위해 확장될 것입니다.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

이 예제에서 "Supercalifragilisticexpialidocious"라는 단어는 첫 번째 열에서 여러 줄로 나뉘는 반면, "Short text"는 두 번째 열에서 한 줄에 유지됩니다. 이것은 내재적 크기 조절이 콘텐츠의 고유한 크기 요구사항에 어떻게 적응하는지를 보여줍니다.

예제: `fit-content()`를 사용한 내재적 크기 조절

`fit-content()` 함수는 트랙이 콘텐츠 크기에 맞춰지면서도 최대 크기 제한을 두고 싶을 때 유용합니다. 이를 사용하여 열이나 행이 너무 커지는 것을 방지하면서도 콘텐츠가 작으면 축소되도록 할 수 있습니다.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

이 예제에서 첫 번째 열은 콘텐츠에 맞게 확장되지만 너비가 200px를 초과하지 않습니다. 두 번째 열은 남은 공간을 차지합니다. 이는 열을 유연하게 만들면서도 너무 많은 공간을 차지하지 않도록 하고 싶을 때 유용합니다.

외재적 크기 조절: 공간 기반

반면에 외재적 크기 조절은 그리드 트랙의 크기가 그리드 컨테이너의 사용 가능한 공간이나 고정된 크기 값과 같은 콘텐츠 외부의 요인에 의해 결정됨을 의미합니다. 외재적 크기 조절 키워드는 다음과 같습니다:

• length: 고정된 길이 값 (예: 100px, 2em, 50vh). 트랙은 콘텐츠와 상관없이 정확히 이 크기가 됩니다.
• percentage: 그리드 컨테이너 크기의 백분율 (예: 50%). 트랙은 사용 가능한 공간의 이 백분율만큼 차지합니다.
• fr (분수 단위): 다른 모든 트랙의 크기가 조절된 후 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타냅니다. 이것은 트랙 간에 공간을 분배하는 가장 유연한 방법입니다.

예제: `fr` 단위를 사용한 외재적 크기 조절

fr 단위는 다양한 화면 크기에 적응하는 반응형 레이아웃을 만드는 데 매우 중요합니다. 트랙에 분수 단위를 할당함으로써 사용 가능한 공간을 비례적으로 공유하도록 보장할 수 있습니다.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

이 예제에서 그리드 컨테이너에는 두 개의 열이 있습니다. 첫 번째 열은 사용 가능한 공간의 1 비율을 차지하고, 두 번째 열은 2 비율을 차지합니다. 그리드 컨테이너의 너비가 600px라면, 첫 번째 열은 200px 너비가 되고 두 번째 열은 400px 너비가 됩니다(그리드 간격 제외). 이를 통해 화면 크기에 관계없이 열이 항상 비례 관계를 유지하도록 보장합니다.

예제: 백분율과 고정 길이를 사용한 외재적 크기 조절

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

이 예제에서 첫 번째 열은 `200px`의 고정 너비로 설정됩니다. 두 번째 열은 그리드 컨테이너 너비의 50%를 차지합니다. 마지막으로, 세 번째 열은 `1fr` 단위를 사용하므로 처음 두 열의 크기가 조절된 후 남은 공간을 모두 차지하게 됩니다.

내재적 및 외재적 크기 조절 결합하기: `minmax()`

minmax() 함수를 사용하면 내재적 및 외재적 크기 조절을 결합하여 트랙 크기를 더욱 정밀하게 제어할 수 있습니다. 이 함수는 최소값과 최대값을 모두 지정하여 트랙에 허용되는 크기 범위를 정의합니다.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: 트랙의 최소 크기입니다. 이는 내재적 키워드(auto, min-content, max-content) 또는 외재적 값(length, percentage, fr)을 포함한 모든 유효한 트랙 크기 조절 값이 될 수 있습니다.
• max: 트랙의 최대 크기입니다. 이 또한 모든 유효한 트랙 크기 조절 값이 될 수 있습니다. `max`가 `min`보다 작으면 `max`는 무시되고 `min`이 사용됩니다.

예제: `minmax()`를 사용하여 반응형 열 만들기

minmax()의 일반적인 사용 사례는 최소 너비를 가지면서도 사용 가능한 공간을 채우기 위해 확장될 수 있는 반응형 열을 만드는 것입니다.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

여기서 repeat(auto-fit, minmax(200px, 1fr))는 최소 200px 너비를 가지면서 남은 공간을 채우기 위해 확장될 수 있는 열을 가능한 한 많이 생성합니다. auto-fit 키워드는 빈 열이 축소되도록 하여 유연하고 반응형인 레이아웃을 만듭니다.

예제: `minmax()`와 내재적 크기 조절 결합하기

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

이 예제에서 첫 번째 열은 최소 콘텐츠 크기만큼의 너비를 가지지만 `300px`를 초과하지 않습니다. 두 번째 열은 남은 공간을 차지합니다.

실용적인 적용 사례 및 모범 사례

내재적 및 외재적 크기 조절을 이해하는 것은 견고하고 적응성 있는 레이아웃을 만드는 데 매우 중요합니다. 다음은 염두에 두어야 할 몇 가지 실용적인 적용 사례와 모범 사례입니다:

• 반응형 내비게이션: minmax()를 사용하여 최소 너비를 가지면서도 내비게이션 바의 사용 가능한 공간을 채우기 위해 확장될 수 있는 내비게이션 항목을 만듭니다.
• 유연한 카드 레이아웃: repeat(auto-fit, minmax())를 사용하여 다양한 화면 크기에 자동으로 조정되는 카드 레이아웃을 만들어 작은 화면에서 카드가 우아하게 줄 바꿈되도록 합니다.
• 콘텐츠 인식 사이드바: min-content 또는 max-content를 사용하여 콘텐츠에 따라 사이드바 크기를 조절하여 필요에 따라 확장되거나 축소되도록 합니다.
• 고정 너비 피하기: 다양한 화면 크기와 사용자 선호도에 적응하는 레이아웃을 만들기 위해 고정 너비(px) 사용을 최소화하고 상대 단위(%, fr, em)를 선호합니다.
• 철저한 테스트: 항상 다양한 기기와 화면 크기에서 그리드 레이아웃을 테스트하여 올바르게 렌더링되고 일관된 사용자 경험을 제공하는지 확인합니다.

고급 그리드 크기 조절 기술

기본적인 키워드와 함수 외에도 CSS 그리드는 트랙 크기를 미세 조정하기 위한 더 고급 기술을 제공합니다.

`repeat()` 함수

repeat() 함수는 동일한 크기의 여러 트랙 생성을 단순화합니다. 반복 횟수와 트랙 크기, 두 개의 인수를 받습니다.

            repeat(number, track-size)
            

              
                Copy
              
            
          

예를 들어:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

이것은 다음과 같습니다:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

repeat() 함수는 auto-fit 및 auto-fill 키워드와 함께 사용하여 사용 가능한 공간에 자동으로 조정되는 반응형 그리드 레이아웃을 만들 수도 있습니다.

`auto-fit` 및 `auto-fill` 키워드

이 키워드들은 repeat() 함수와 함께 사용되어 그리드의 항목 수와 사용 가능한 공간에 적응하는 반응형 그리드를 만듭니다. 둘 사이의 주요 차이점은 빈 트랙을 처리하는 방식에 있습니다.

• auto-fit: 모든 트랙이 비어 있으면 트랙은 0 너비로 축소됩니다.
• auto-fill: 모든 트랙이 비어 있어도 트랙은 크기를 유지합니다.

예제: `auto-fit`을 사용하여 반응형 열 만들기

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

이 예제에서 그리드는 최소 200px 너비를 가지면서 남은 공간을 채우기 위해 확장될 수 있는 열을 가능한 한 많이 생성합니다. 모든 열을 채울 만큼 항목이 충분하지 않으면 빈 열은 0 너비로 축소됩니다.

국제화(i18n) 및 현지화(l10n) 고려 사항

전 세계 사용자를 위한 레이아웃을 디자인할 때, 다양한 언어와 쓰기 방향의 영향을 고려하는 것이 중요합니다. 텍스트 길이는 언어마다 크게 다를 수 있으며, 트랙 크기가 적절하게 구성되지 않으면 레이아웃에 영향을 미칠 수 있습니다. 국제화된 레이아웃을 디자인하기 위한 몇 가지 팁은 다음과 같습니다:

• 상대 단위 사용: 픽셀과 같은 고정 단위 대신 em, rem, 백분율과 같은 상대 단위를 선호하여 사용자의 글꼴 크기 설정에 따라 텍스트가 확장될 수 있도록 합니다.
• 내재적 크기 조절: min-content, max-content, fit-content()와 같은 내재적 크기 조절 키워드를 활용하여 언어에 관계없이 트랙이 콘텐츠의 크기에 적응하도록 합니다.
• 논리적 속성 사용: left, right와 같은 물리적 속성 대신 inline-start, inline-end와 같은 논리적 속성을 사용하여 왼쪽에서 오른쪽(LTR) 및 오른쪽에서 왼쪽(RTL) 언어를 모두 지원합니다.
• 테스트: 다양한 언어와 쓰기 방향으로 레이아웃을 테스트하여 잠재적인 문제를 식별하고 해결합니다. 다른 언어에서 발견될 수 있는 더 긴 문자열을 시뮬레이션합니다.

결론

CSS 그리드 트랙 크기 조절은 반응형이고 적응성 있는 웹 레이아웃을 만드는 강력하고 다재다능한 도구입니다. 내재적 및 외재적 크기 조절의 개념을 마스터하고, minmax() 함수를 이해하고, repeat() 함수를 활용함으로써 다양한 콘텐츠와 화면 크기에 우아하게 적응하는 레이아웃을 구축할 수 있습니다. 전 세계 사용자를 위해 디자인할 때는 국제화와 현지화의 영향을 고려하는 것을 잊지 마세요.

다양한 트랙 크기 조절 기술을 실험하고 CSS 그리드의 무한한 가능성을 탐색해 보세요. 연습과 이러한 개념에 대한 확실한 이해를 통해 모든 프로젝트에 대해 정교하고 사용자 친화적인 웹 레이아웃을 만들 수 있는 충분한 준비를 갖추게 될 것입니다.