CSS max-width 속성이란?
max-width 속성은 박스(요소)가 가질 수 있는 최대 너비를 지정하는 데 사용됩니다. 이 속성을 적용하면 콘텐츠가 아무리 많아지더라도 요소의 너비가 지정된 값보다 커지지 않습니다.
max-width 속성의 값은 다음과 같은 형태로 지정할 수 있습니다.
- 숫자 값(px 등) – 픽셀 단위의 고정 최대 너비
- 길이 단위(em, rem 등) – 상대적인 길이 단위 기반의 최대 너비
- 백분율(%) – 부모 요소 너비를 기준으로 한 비율 값
max-width 사용 예제
아래 예제는 문단(p) 요소에 max-width: 100px를 적용한 모습입니다. 높이는 200px로 고정되어 있고, 너비는 100px를 초과할 수 없습니다.
<html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid green; padding:5px; margin:10px;"> 이 문단은 높이 200px이며 최대 너비는 100px입니다. 이 문단은 높이 200px이며 최대 너비는 100px입니다. </p> <img alt = "logo" src="/css/images/logo.png" width = "100" height = "100" /> </body> </html>
max-width 활용 팁
max-width 속성은 특히 반응형 웹 디자인에서 유용하게 사용됩니다. 이미지나 컨테이너에 max-width: 100%를 적용하면 화면 크기에 따라 요소가 부모 영역을 벗어나지 않고 자동으로 조절되므로, 모바일과 데스크톱 환경 모두에서 안정적인 레이아웃을 구현할 수 있습니다.