웹 페이지 콘텐츠를 적절하게 표시할 수 있는 유연성을 원하는 개발자에게는 CSS 크기 조정 속성을 이해하는 것이 필요합니다.

CSS에서는 길이(px, em), 백분율 및 키워드 값을 사용하여 요소 크기를 정의합니다. 길이 및 백분율 값 유형은 종종 웹페이지 레이아웃에 사용되지만 항상 완벽하게 맞는 것은 아닙니다.

어떤 맥락에서는 fit-content, min-content 및 max-content를 포함한 키워드 값 유형을 사용합니다.

이 가이드에서는 이러한 키워드 값이 무엇인지, 차이점과 실제 프로젝트에 적용할 수 있는 방법을 다룹니다.

계속 진행하기 전에 CSS에 대한 기본적인 이해가 있는지 확인하십시오.

내부 및 외부 크기 조정 

width와 height가 200px로 고정된 콘텐츠가 포함된 div 요소를 고려하세요.

<div class="s_1">
  nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor
  illum praesentium ipsa minus
</div>

여기에서는 크기의 범위를 확인하기 위해 div에 테두리를 주었습니다.

위 이미지에서 볼 수 있듯이 특정 값을 적용하여 요소의 기본 크기를 변경할 때 해당 크기 조정을 외부적이라고 합니다.

반면에 콘텐츠의 크기가 요소의 크기를 정의할 때 우리는 그것을 본질적인 또는 자연적인 크기라고 부릅니다.

블록의 차원을 특정 크기로 제한하면 외부 크기 조정의 단점인 콘텐츠 오버플로가 발생합니다.

그러나 키워드 값을 사용하여 콘텐츠에서 요소의 고유 크기를 결정하여 더 나은 레이아웃을 생성하기 위해 바람직하지 않은 동작을 수정할 수 있습니다.

min-content  키워드 값 

W3C 사양에 따르면 min-content는 내용물이 넘치지 않고 상자가 가질 수 있는 가장 작은 크기입니다.

가로 콘텐츠의 경우 min-content는 요소 상자에서 가장 넓은 콘텐츠 비트의 길이를 사용하고 해당 길이 값을 상자 너비로 자동 설정합니다.

이 경우 콘텐츠에는 텍스트와 이미지 및 비디오와 같은 자산이 포함됩니다.

위의 상자 예제를 다시 방문하면 다음과 같이 상자 요소에 min-content를 적용할 수 있습니다.

.s_2 {
  /* ... */
  width: min-content;
  /* ... */
}

그리고 우리는 이 레이아웃을 얻어야 합니다:

여기에서 min-content의 경우 내용 내에서 가장 긴 단어가 상자의 크기를 정의합니다. 이것은 상자의 본질적인 최소 너비입니다.

min-content 키워드 값의 실제 예 

실제 프로젝트에서 min-content 키워드를 구현하기 위해 다음 사용 사례를 고려해 보겠습니다.

이미지에 캡션 추가 

이미지 너비를 따르는 캡션으로 이미지를 마크업하려는 경우 min-content를 사용하여 원하는 결과를 원활하게 얻을 수 있습니다.

다음 코드를 살펴보겠습니다.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"
    alt="sample"
  />
  <figcaption>
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </figcaption>
</figure>

이것은 크기의 범위를 볼 수 있도록 그림 요소에 테두리를 제공합니다.

Figure는 블록 요소이므로 너비가 자연스럽게 컨테이너 요소를 차지합니다.

Figure 요소에 min-content의 너비를 할당하여 해당 크기는 가장 넓은 콘텐츠 비트로 정의됩니다. 이 경우 가장 넓은 비트는 이미지입니다.

figure {
  /* ... */
  width: min-content;
}

그러면 너비를 정의하는 이미지와 함께 다음 출력이 렌더링됩니다.

그리드 및 플렉스박스 항목 크기 조정 

min-content는 그리드 및 플렉스 크기 조정 속성에도 유효한 값입니다. CSS에서 flexbox 시스템의 flex-basis 속성은 콘텐츠 상자의 크기를 설정합니다. 이것은 min-content 키워드를 상자의 본질적인 최소 크기를 자동으로 얻는 이상적인 값으로 만듭니다.

이 경우 flex-basis: min-content를 사용합니다.

마찬가지로 그리드 시스템에서 min-content 키워드를 grid-template-rows 또는 grid-template-columns 속성에 할당하여 고유한 최소 상자 크기를 얻을 수 있습니다.

다음 코드를 고려해 보겠습니다.

<div class="grid">
  <header class="header">
    <!-- ... -->
  </header>
  <div class="content">
    <!-- ... -->
  </div>
  <div class="footer">
    <!-- ... -->
  </div>
</div>

간결함을 위해 요소의 콘텐츠를 제거했습니다.

구조를 그리드 레이아웃으로 변환하고 min-content 키워드를 적용해 보겠습니다.

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}

이를 통해 오버플로를 일으키지 않고 콘텐츠 높이에 대한 본질적인 최소값을 얻습니다.

min-content를 적용하지 않으면 다른 동작이 나타납니다. 이 동작을 시각화하기 위해 grid-template-rows를 일시적으로 제거하고 헤더에 고정 높이를 적용할 수 있습니다.

.grid {
  ...
  /* grid-template-rows: min-content auto min-content; */
  ...
}
.header {
  ...
  height: 40px;
}

이것으로 우리는 더 이상 자연스러운 콘텐츠 크기를 얻지 못합니다. 이 경우 요소 상자가 내용에 비해 너무 커서 내용이 상자를 넘칠 수 있습니다.

max-content 키워드 값 

W3C 사양에 따르면 max-content는 사용 가능한 공간이 무한할 때 주어진 축에서 상자의 이상적인 크기를 나타냅니다.

다시 말해, max-content는 상자가 포장되거나 상자가 오버플로되지 않고 모든 내용을 포함하는 데 필요한 크기를 나타냅니다.

이를 통해 요소 크기에 max-content를 적용해 보겠습니다.

<div id="container">
  <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
  <div class="item2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div> 

이것이 렌더링될 때 우리는 다음과 같은 출력을 받습니다:

여기에서 첫 번째 상자 요소는 자동 기본 너비 값을 사용하므로 컨테이너가 허용하는 한 많은 공간을 수용합니다. 그러나 동일한 상자에 max-content 값을 적용하면 상자의 정확한 내용 크기를 얻습니다.

max-content 키워드 값은 상자의 크기를 결정하기 위해 콘텐츠의 최대 너비가 필요한 상황에 이상적입니다.

max-content value 키워드의 실제 예 

그리드 열에 최대 콘텐츠를 적용하는 그리드 레이아웃 구조를 고려하십시오.

HTML에는 다음이 포함됩니다.

<div class="container">
  <div>Lorem</div>
  <div>
    Lorem ipsum dolor sit amet
  </div>
  <div>Lorem ipsum dolor</div>
</div>

그런 다음 CSS를 추가합니다.

.container {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  /* ... */
}

이렇게 하면 콘텐츠 크기를 사용하는 max-content 값이 있는 열이 렌더링되고 fr 단위가 있는 열은 사용 가능한 나머지 공간이 사용됩니다.

max-content의 바람직하지 않은 효과 

우리가 배운 것처럼 max-content는 상자 요소가 부모 컨테이너를 감싸거나 오버플로하지 않고 모든 내용을 포함할 수 있는 무한한 사용 가능한 공간에 대해 꽤 잘 작동합니다.

그러나 부모 또는 조상 요소가 상자의 크기를 수용할 수 없는 경우 상자가 오버플로되는 경향이 있습니다.

<div id="container">
  <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div> 

CSS를 추가하면 너비가 설정됩니다.

#container {
  /* ... */
  width: 200px;
}

.item1 {
  width: max-content;
  /* ... */
}

이 코드를 사용하면 상자의 고유 최대 너비가 컨테이너보다 길어서 오버플로가 발생합니다.

이 상황에서는 컨테이너의 사용 가능한 공간에 맞게 상자 내용을 조정해야 합니다. 여기서 fit-content 키워드가 등장합니다.

fit-content 키워드 값 

컨테이너 요소의 크기에 따라 컨테이너 내의 상자 요소에 적합 콘텐츠를 적용할 때 상자는 최대 콘텐츠 크기, 최소 콘텐츠 크기 또는 사용 가능한 컨테이너를 이상적인 크기로 사용합니다.

사용 가능한 공간이 무한할 때 max-content는 상자의 이상적인 크기를 정의합니다. 그러나 뷰포트가 더 좁아지면 상자가 min-content를 사용할 때까지 오버플로를 방지하기 위해 사용 가능한 공간이 상자의 크기가 됩니다.

마지막 예제를 다시 방문하여 box 요소에 fit-content를 적용하면 다음과 같은 결과를 얻을 수 있습니다.

.item1 {
  width: -moz-fit-content;
  width: fit-content;
  /* ... */
}

Mozilla Firefox에서 이 키워드 값을 사용하려면 -moz- 공급업체 접두사를 사용해야 합니다.

아래 GIF에서 볼 수 있듯이 상자는 사용 가능한 공간을 사용하지만 최대 콘텐츠 이상으로 확장되지 않으며 표시 영역이 더 좁아지면 상자가 최소 콘텐츠 이상으로 축소되지 않습니다.

fit-content() 함수 

W3C 사양은 또한 개발자가 요소 크기에 대해 허용 가능한 최대 너비를 정의할 수 있도록 하는 fit-content() 함수에 주목합니다. 이 CSS 함수는 종종 각각 grid-template-columns 및 grid-template-rows를 사용하여 그리드 열과 행의 크기를 조정합니다.

fit-content()를 사용하면 백분율 또는 길이 단위를 인수로 사용할 수 있습니다.

fit-content(percentage | length)

fit-content 키워드와 유사하게, 그리드 레이아웃에서 크기를 결정하기 위해 이 함수 값을 할당할 때 지정된 인수를 최대 허용 상자 크기로 사용하는 동시에 상자가 최대 콘텐츠를 초과하지 않도록 합니다.

그리드 레이아웃 구조를 고려하고 그리드 열에 fit-content()를 적용해 보겠습니다.

<div class="container">     
  <div>Lorem ipsum dolor</div>
  <div>
    Lorem ipsum dolor, sit consectetur adipisicing elit.!
  </div>
  <div>Lorem</div>
</div>

CSS에서 fit-content()를 추가합니다.

.container {
  display: grid;
  grid-template-columns: fit-content(200px) fit-content(250px) auto;
  /* ... */
}

fit-content()에 전달된 인수는 두 함수를 구분합니다.

그리드 레이아웃의 첫 번째 열에서 200px를 인수로 전달했으므로 열의 최대 허용 너비는 200px이고 두 번째 열의 최대 허용 너비는 250px입니다. 세 번째 열은 auto 값이 할당되기 때문에 나머지 컨테이너 공간을 차지합니다.

크기가 fit-content()로 정의된 상자는 지정된 너비를 초과하여 확장되지 않으며 최대 콘텐츠를 초과하지도 않습니다. 그러나 뷰포트가 더 좁아지면 상자가 콘텐츠에 맞게 축소될 수 있습니다.

결론 

고유 키워드 값을 사용하면 가장 적절한 방식으로 페이지 콘텐츠를 유연하게 표시할 수 있습니다. 이 튜토리얼에서는 프로젝트에서 사용할 수 있도록 실제 예제와 함께 min-content, max-content 및 fit-content 키워드 값을 사용하는 방법을 다루었습니다.

https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/