CSS의 min-width(최소 너비) 속성은 요소 박스가 가질 수 있는 최소 너비를 지정하는 데 사용됩니다. 이 속성을 적용하면 콘텐츠 양이나 부모 요소의 크기와 관계없이, 해당 요소의 너비가 지정된 값보다 작아지지 않도록 보장할 수 있습니다.
min-width 속성의 값은 숫자와 단위를 조합한 길이 값(px, em, rem 등) 또는 백분율(%)로 지정할 수 있습니다.
주요 속성값
- 길이 단위 – px, em, rem 등 고정 크기로 최소 너비를 지정합니다.
- 백분율(%) – 부모 요소(컨테이닝 블록) 너비를 기준으로 최소 너비를 지정합니다.
- max-content / min-content / fit-content – 콘텐츠에 따른 내재적 크기를 기준으로 지정할 수 있습니다.
사용 예제
<html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> 이 문단은 높이 100px이며 최소 너비는 400px입니다. 이 문단은 높이 100px이며 최소 너비는 400px입니다. <img alt = "logo" src = "/css/images/css.gif" width = "100" height = "100" /> </body> </html>
위 예제에서 문단에는 min-width:400px가 적용되어 있습니다. 따라서 화면이 좁아지거나 콘텐츠가 줄어들더라도 이 문단의 너비는 절대 400px보다 작아지지 않습니다.
min-width 활용 팁
min-width 속성은 특히 반응형 웹 디자인에서 유용합니다. 유동적인 레이아웃에서 버튼, 입력 필드, 카드 컴포넌트 등이 화면이 좁아질 때 지나치게 찌그러지는 것을 방지할 수 있습니다. 반대로 요소의 최대 너비를 제한하려면 max-width 속성을 함께 사용하면 됩니다.
또한 min-width는 width 속성보다 우선순위가 높습니다. 즉, width로 지정한 값이 min-width보다 작더라도 실제 적용되는 너비는 min-width 값을 따르게 됩니다.