min-content
Baseline | Widely available
Chrome, Edge, Firefox, Safari에서 지원돼요.
이 기능은 잘 확립되어 있고 많은 기기와 브라우저 버전에서 작동해요. 2020년 1월부터 모든 브라우저에서 사용 가능했어요.
min-content 크기 조정 키워드는 요소의 최소 고유 크기를 나타내요. 이 키워드는 콘텐츠의 피할 수 있는 오버플로우를 일으키지 않으면서 요소를 가능한 가장 작은 크기로 축소시켜요. 텍스트 콘텐츠의 경우, 이 키워드는 기회가 있을 때마다 (단어 사이의 공백 같은) 콘텐츠를 래핑하고, 요소는 가장 긴 단어만큼만 넓어질 거예요.
interpolate-size 프로퍼티와 calc-size() 함수를 사용하면 min-content로 또는 min-content에서 애니메이션을 활성화할 수 있어요.
이 친구는 이름 그대로 "안에 있는 내용물이 가질 수 있는 최소한의 너비로 줄여라!"라고 명령하는 거예요. 텍스트라면 단어가 깨지지 않는 선에서(혹은 한 글자씩) 최대한 좁게 줄어든 모습을 상상하면 됩니다. 하나씩 뜯어볼까요?
구문 (Syntax)
/* 크기 조절 속성에서 사용하는 경우 */
width: min-content;
inline-size: min-content;
height: min-content;
block-size: min-content;
/* 그리드 트랙에서 사용하는 경우 */
grid-template-columns: 200px 1fr min-content;예제 (Examples)
min-content를 사용한 박스 크기 조절 (Sizing boxes with min-content)
min-content를 썼을 때 박스가 얼마나 좁아지는지 직접 확인해 봐요.
HTML
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>CSS
.item {
width: min-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}결과 (Result)
결과를 보면, 두 번째 박스에서 텍스트가 단어 단위로 줄 바꿈이 일어나면서 박스 너비가 가장 긴 단어의 길이에 맞춰 아주 좁게 변한 걸 볼 수 있을 거예요. 이게 바로 min-content의 힘입니다.
min-content로 그리드 열 크기 조절하기 (Sizing grid columns with min-content)
그리드 레이아웃에서도 min-content는 특정 열을 최소한의 공간만 차지하게 만들 때 아주 유용하답니다.
HTML
<div id="container">
<div>아이템</div>
<div>내용이 더 많은 아이템입니다.</div>
<div>유연한 아이템 (Flexible item)</div>
</div>CSS
#container {
display: grid;
/* 첫 번째와 두 번째 열은 최소 너비에 맞추고, 세 번째 열은 남은 공간을 다 써요 */
grid-template-columns: min-content min-content 1fr;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}결과 (Result)
그리드 결과를 보면, 첫 번째와 두 번째 칸이 글자가 깨지지 않는 최소한의 너비로 꽉 끼어있는 걸 확인할 수 있죠? 나머지 넓은 공간은 전부 1fr을 준 세 번째 칸이 차지하게 되고요.
자, 여기까지 해서 fit-content, max-content, min-content라는 크기 조절의 3대장을 모두 섭렵하셨네요!
min-content는 보통 이미지 캡션이나 사이드바의 좁은 텍스트 영역처럼, 공간을 최대한 아껴야 할 때 정말 유용해요. 하지만 한글의 경우 단어 사이에 공백이 없으면 제대로 줄 바꿈이 안 될 수도 있으니 word-break 속성과 함께 쓰는 센스를 발휘해 보세요!
궁금한 게 더 있으신가요? 아니면 다음 문서로 또 넘어가 볼까요? 준비되시면 말씀해 주세요!
