CSS에서 max-width 속성은 박스(요소)가 가질 수 있는 최대 너비를 지정할 때 사용합니다. 이 속성을 활용하면 화면 크기와 관계없이 요소가 일정 너비 이상 커지지 않도록 제한할 수 있어 반응형 레이아웃을 만들 때 특히 유용합니다.
max-width 속성에 사용할 수 있는 값
- 길이 값: px, pt, cm, em 등의 단위로 고정된 최대 너비를 지정합니다. (예:
max-width: 100px;) - 백분율(%): 부모 요소 너비를 기준으로 비율로 지정합니다. (예:
max-width: 50%;) - none: 최대 너비에 제한을 두지 않습니다. (기본값)
예제
<html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid green; padding:5px; margin:10px;"> This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px </p> <img alt = "logo" src = "/css/images/logo.png" width = "100" height = "100" /> </body> </html>
예제 설명
위 예제에서는 문단(<p>) 요소에 다음과 같은 스타일을 인라인 방식으로 적용했습니다.
max-width: 100px;— 문단의 너비가 아무리 늘어나도 100px를 초과하지 않습니다.height: 200px;— 문단의 높이를 200px로 고정합니다.border: 1px solid green;— 녹색 실선 테두리를 추가해 박스 경계를 시각적으로 확인할 수 있습니다.padding: 5px;— 내용과 테두리 사이에 5px의 안쪽 여백을 줍니다.margin: 10px;— 박스 바깥쪽에 10px의 외부 여백을 줍니다.
결과적으로 텍스트 내용이 많더라도 상자의 너비는 항상 100px로 유지되며, 남는 텍스트는 자동으로 줄바꿈되어 표시됩니다. 이처럼 max-width 속성은 콘텐츠 양에 따라 요소가 과도하게 넓어지는 것을 방지하는 데 효과적입니다.