JavaScript에서 HTML 요소의 최대 너비를 지정하려면 maxWidth 속성을 사용하면 됩니다. 이 속성은 CSS의 max-width 스타일에 해당하며, 요소가 늘어날 수 있는 최대 폭을 픽셀(px) 등의 단위로 제한합니다.
기본 문법
document.getElementById("요소ID").style.maxWidth = "값";예제
아래 예제에서는 버튼을 클릭하면 div 요소의 최대 너비가 80px로 설정됩니다. 코드를 직접 실행해 보면서 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 최대 너비가 설정됩니다.</p>
<button type="button" onclick="display()">최대 너비 설정</button>
<div id="box">
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.maxWidth = "80px";
}
</script>
</body>
</html>코드 설명
버튼이 클릭되면 display() 함수가 호출됩니다. 이 함수 내부에서 getElementById("box")로 id가 box인 div 요소를 가져온 뒤, style.maxWidth 속성에 "80px" 값을 할당하여 해당 요소의 최대 너비를 제한합니다.
이처럼 maxWidth 속성을 활용하면 반응형 레이아웃에서 콘텐츠 영역이 화면을 초과하지 않도록 유연하게 제어할 수 있습니다.