HTML 문서에서 DOM Style의 maxWidth 속성은 특정 요소의 최대 너비(maximum width)를 가져오거나 설정하는 데 사용됩니다. 요소가 화면에서 지나치게 넓어지는 것을 방지하고 싶을 때 유용하게 활용할 수 있습니다.
문법(Syntax)
maxWidth 속성의 기본 문법은 다음과 같습니다.
1. maxWidth 값 가져오기
object.style.maxWidth
2. maxWidth 값 설정하기
object.style.maxWidth = "value";
속성 값(Value) 정리
maxWidth 속성에 지정할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| none | 요소의 너비에 제한을 두지 않습니다. (기본값) |
| inherit | 부모 요소로부터 이 속성 값을 상속받습니다. |
| initial | 이 속성 값을 브라우저의 기본값으로 되돌립니다. |
| length | px, em, rem 등 절대 단위를 사용해 최대 너비를 지정합니다. 예: "200px" |
| percentage(%) | 부모 요소 너비를 기준으로 백분율(%) 단위로 최대 너비를 지정합니다. 예: "50%" |
예제 코드
버튼을 클릭하면 문단(p) 요소의 최대 너비가 200px로 변경되는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100vh;
}
p {
border: 2px solid #fff;
}
.btn {
background: coral;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style maxWidth 속성 예제</h1>
<p>
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.
</p>
<button onclick="add()" class="btn">Set maxWidth</button>
<script>
function add() {
document.querySelector('p').style.maxWidth = "200px";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
여기서 [Set maxWidth] 버튼을 클릭하면, 자바스크립트의 document.querySelector('p').style.maxWidth = "200px"; 구문이 실행되어 문단 요소의 최대 너비가 200px로 제한됩니다.
정리
DOM Style의 maxWidth 속성은 반응형 웹 디자인에서 콘텐츠가 일정 폭 이상 늘어나지 않도록 제어할 때 필수적인 속성입니다. querySelector 등으로 요소를 선택한 뒤 style.maxWidth에 원하는 단위(px, % 등)의 값을 할당하면 동적으로 최대 너비를 조절할 수 있습니다.