CSS의 max-width 속성은 요소 콘텐츠 박스(content box)에 최대 너비를 지정하는 속성입니다. 이 속성을 적용하면 지정된 width 값이 max-width보다 크더라도 요소의 콘텐츠 박스가 그 값을 초과하여 확장되지 않습니다.
max-width 속성의 주요 값
- none – 기본값으로, 최대 너비에 제한을 두지 않습니다.
- length – px, em, rem, cm 등 고정 단위로 최대 너비를 지정합니다.
- % – 부모(포함) 요소 너비를 기준으로 백분율로 지정합니다.
- initial – 속성을 기본값(none)으로 되돌립니다.
- inherit – 부모 요소의 max-width 값을 상속받습니다.
문법
CSS max-width 속성의 기본 문법은 다음과 같습니다.
Selector {
max-width: /*value*/
}그럼 실제 예제를 통해 max-width 속성이 어떻게 동작하는지 살펴보겠습니다.
예제 1 – 버튼 클릭으로 maxWidth 변경하기
<!DOCTYPE html>
<html>
<head>
<title>CSS max-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv{
max-width:200px;
overflow: hidden;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<button onclick="add()" class="btn">Set maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv').style.maxWidth = "100%";
}
</script>
</body>
</html>실행 결과
위 예제에서는 콘텐츠 영역(#contentDiv)에 max-width: 200px가 설정되어 있어, 텍스트가 아무리 길어도 요소의 너비는 200px를 초과하지 않고 남은 텍스트는 숨겨집니다.
'Set maxWidth' 버튼을 클릭하기 전 모습입니다.
버튼을 클릭하면 자바스크립트에 의해 max-width가 100%로 변경되어, 콘텐츠 박스가 부모 요소의 전체 너비까지 확장됩니다.
예제 2 – 두 개의 div 요소 비교하기
이번에는 두 개의 div 요소에 서로 다른 width를 적용하고, 버튼 클릭 시 하나의 요소에만 max-width를 설정해 동작을 비교해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS max-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv1, #contentDiv2{
width:100%;
border: 1px solid black;
margin: 0 auto;
}
#contentDiv2{
width: 80%;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy.
</div>
<button onclick="add()" class="btn">Set maxWidth</button>
</div>
<script>
function add() {
document.querySelector('#contentDiv1').style.maxWidth = "80%";
}
</script></body></html>실행 결과
처음에는 두 div 모두 각각 지정된 width(100%, 80%)대로 표시됩니다.
'Set maxWidth' 버튼을 클릭하기 전 모습입니다.
버튼을 클릭하면 첫 번째 div(#contentDiv1)에 max-width: 80%가 적용되어, 원래 width가 100%였음에도 불구하고 너비가 80%로 제한되는 것을 확인할 수 있습니다. 이것이 바로 max-width 속성이 width보다 우선하여 요소의 최대 너비를 강제로 제한하는 방식입니다.
정리
max-width 속성은 반응형 웹 디자인에서 특히 유용합니다. 컨테이너가 화면 전체를 차지하되 일정 크기 이상으로 커지지 않도록 제한하고 싶을 때 width: 100%와 함께 max-width를 지정하면, 작은 화면에서는 유연하게 늘어나고 큰 화면에서는 과도하게 확장되지 않는 레이아웃을 손쉽게 구현할 수 있습니다.