CSS min-content 키워드 – 콘텐츠가 차지할 수 있는 최소 크기 값

`min-content`

min-content는
콘텐츠가 차지할 수 있는 최소 크기 값을 나타내는 CSS 키워드입니다.

이 값은 명목상, 콘텐츠가 차지할 수 있는 크기로 인한 오버플로를 방지하려는 목적의 최소 크기입니다.

동일한 콘텐츠가 차지할 수 있는 고유한 크기는 다양

각 요소의 콘텐츠(예: 텍스트, 이미지)가 어떤 레이아웃으로 배치하느냐에 따라 콘텐츠의 너비나 높이 등의 고유한 크기(Intrinsic size)가 각기 달라질 수 있습니다.

예를 들어, 띄어쓰기를 포함하는 텍스트가 있는 요소가 있다고 가정해 보겠습니다.
텍스트가 띄어쓰기를 기준으로 자연스럽게 줄바꿈할 경우와, 반면에 띄어쓰는 유지하지만 줄바꿈을 하지 않는 경우의 텍스트가 차지하는 너비와 높이를 생각해 보세요. 이 두 경우 요소에서 텍스트가 차지하는 고유한 크기, 즉 너비와 높이는 달라집니다.

이처럼 콘텐츠가 차지하는 고유한 크기는 그 배치 방식에 따라 유동적으로 달라지며, 때로는 콘텐츠가 차지할 수 있는 고유한 크기를 기준으로 요소의 크기를 제어할 필요가 있습니다.

콘텐츠가 차지하는 고유 크기는 CSS Box Sizing Module Level 3 - Intrinsic Size Determination 명세서에 정의되어 있습니다.

`min-content`로 요소의 크기 값 제어하기

min-content는 콘텐츠가 차지할 수 있는 고유한 크기를 최소 크기로 지정할 수 있는 키워드 값입니다.
이 값은 명목상, 더 큰 크기를 선택하면 피할 수 있는 오버플로를 피할 수 있는 최소 크기입니다.

'콘텐츠가 차지할 수 있는 최소 크기'의 의미

min-content 값으로 제어되는 '콘텐츠가 차지할 수 있는 최소 크기'의 의미는 다음과 같습니다.
이 값의 의미는 너비 크기 값과 높이 크기 값으로 나누어 아래의 표로 설명하겠습니다.

min-content 값의 구현 방식
너비 크기 값	텍스트나 인라인 콘텐츠의 경우 자동 줄바꿈(soft-wrapping)할 수 있으면 모두 줄바꿈하여 가장 큰 단어나 인라인 콘텐츠만큼 작아짐을 의미합니다. 블록 컨텐츠는 그 고유 너비를 그대로 의미합니다. 명목상 오버플로를 방지하려는 목적의 최소 크기이지만, 자동 줄바꿈할 수 있는 모든 콘텐츠가 자동 줄바꿈했을 때에도 콘텐츠가 차지하는 고유 크기가 공간 크기보다 더 크다면 오버플로됩니다.
높이 크기 값	해당 요소에 설정되어 있는 너비를 기준으로, 콘텐츠가 높이로 인해 오버플로를 방지하려는 목적의 최소 높이를 의미입니다. 블록 컨텐츠는 그 고유 높이를 그대로 의미합니다.

min-content 값은 요소의 너비 크기와 관련된 속성(예: width, min-width, grid-template-columns)과 요소의 높이 크기와 관련된 속성(예: min-height)에서 주로 사용됩니다.

구문

CSS

/* 길이 값으로 사용됨 */
width: min-content;
min-width: min-content;
max-width: min-content;
height: min-content;
min-height: min-content;
max-height: min-content;
flex-basis: min-content;

/* 그리드 트랙에서 사용됨 */
grid-template-columns: 150px 1fr min-content;

예제

다음 예제들에서는 min-content 값이 요소의 크기에 어떻게 적용되는지 살펴보겠습니다.

텍스트 콘텐츠

다음은 텍스트로만 구성된 콘텐츠를 가진 요소에 min-content 값을 적용한 예제입니다.

한글 텍스트 사용 시 주의할 점

한글로만 구성된 콘텐츠에 min-content를 적용하면, 영문과 달리 단어 단위로 줄바꿈이 아닌 글자 단위로 줄바꿈이 발생할 수 있습니다. 이 경우 가독성이나 스타일에 문제가 생길 수 있습니다. 한글에서는 word-break 속성의 값을 keep-all로 설정하여 이러한 문제를 사전에 예방할 수 있습니다.

인라인 요소

다음은 인라인 요소로 구성된 콘텐츠를 가진 요소에 min-content 값을 적용한 예제입니다.

min-content가 적용된 width 속성은 콘텐츠의 최소 크기를 자동으로 계산해, 콘텐츠가 차지하는 만큼만 공간을 할당합니다. 이 경우, 인라인 콘텐츠인 <label>과 <input> 요소는 자동 줄바꿈하며, 가장 큰 인라인 콘텐츠인 <input> 요소의 크기에 맞춰 최소 크기가 설정됩니다.

`grid-template-columns`

다음은 그리드 트랙에서 컬럼의 사이즈로 min-content 값을 적용한 예제입니다.

HTML

<div class="grid-container">
    <div class="grid-item">Item</div>
    <div class="grid-item">Item with more text in it.</div>
    <div class="grid-item">min-content item</div>
</div>

CSS

.grid-container {
    display: grid;
    grid-template-columns: auto auto min-content;
    gap: 10px;
    background-color: lightgray;
}
.grid-item {
    padding: 10px;
    background-color: gold;
}

요소의 높이 크기에 적용하기

min-content 값이 요소의 높이 크기를 제어할 때에는,
해당 요소에 설정되어 있는 너비를 기준으로, 콘텐츠가 높이로 인해 오버플로를 방지하려는 목적의 최소 높이를 의미입니다.

min-content 값은 요소의 최소 높이를 지정할 때 매우 유용합니다. 만약 요소의 최소 높이가 콘텐츠에 맞춰 유동적으로 결정되게 하고 싶을 때 min-height: min-content를 사용하면, height의 설정으로 인한 오버플로를 방지할 수 있습니다.

HTML

<p>
    min-content 값이 요소의 높이 크기를 제어할 때에는,
    해당 요소에 설정되어 있는 너비를 기준으로,
    콘텐츠가 높이로 인해 오버플로를 방지하려는 목적의 최소 높이를 의미입니다.
</p>

CSS

p {
    background-color: gold;
    width: 150px;
    height: 150px;
    min-height: min-content; /* height 설정으로 인한
                                혹시 모를 오버플로 방지 목적으로 유용함 */
}