CSS min-width 속성이란?
min-width 속성은 상자(box) 요소가 가질 수 있는 최소 너비를 지정하는 데 사용됩니다. 이 속성을 적용하면 콘텐츠 양이나 부모 요소의 크기와 관계없이 상자의 너비가 지정된 값보다 작아지지 않습니다.
min-width 속성에 사용할 수 있는 값은 다음과 같습니다.
- 길이 단위: px, em, rem 등 절대·상대 길이 값 (예:
min-width: 400px;) - 백분율(%): 부모 요소 너비를 기준으로 한 상대적 값 (예:
min-width: 50%;) - 키워드:
none(기본값),max-content,min-content,fit-content등
반응형 웹 디자인에서 요소가 지나치게 좁아지는 것을 방지하고 싶을 때 min-width 속성이 매우 유용합니다.
사용 예제
<html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px </p> <img alt = "logo" src = "/css/images/css.gif" width = "100" height = "100" /> </body> </html>
예제 설명
위 코드에서는 문단(<p>) 요소에 min-width: 400px;를 적용했습니다. 이 문단은 높이가 100px이며, 화면 크기와 관계없이 너비가 최소 400px 이상으로 유지됩니다. 또한 빨간색 테두리(border)와 안쪽 여백(padding), 바깥 여백(margin)을 함께 지정하여 상자 모델의 다양한 속성을 한눈에 확인할 수 있습니다.
참고 사항
min-width 속성은 width 속성보다 우선순위가 높습니다. 즉, width로 지정한 값이 min-width 값보다 작더라도 실제 렌더링 시에는 min-width 값이 적용됩니다. 반대 개념인 max-width(최대 너비) 속성과 함께 사용하면 요소의 너비 범위를 정밀하게 제어할 수 있습니다.