JavaScript에서 요소의 최소 너비를 설정하려면 minWidth 속성을 사용하면 됩니다. 이 속성은 CSS의 min-width 속성에 대응하며, 요소의 너비가 지정한 값보다 작아지지 않도록 보장해 줍니다.
예제
다음 코드는 버튼을 클릭하면 div 요소의 최소 너비를 500px로 설정하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 50%;
background-color: gray;
}
</style>
</head>
<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. This is a div. This is a div.</p>
<p>This is a div. This is a div. 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. This is a div. This is a div.</p>
<p>This is a div. This is a div. 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. This is a div. This is a div.</p>
</div>
<br>
<script>
function display() {
document.getElementById("box").style.minWidth = "500px";
}
</script>
</body>
</html>
동작 방식 설명
버튼을 클릭하면 display() 함수가 실행되고, document.getElementById("box")를 통해 id가 "box"인 요소에 접근합니다. 그런 다음 style.minWidth 속성에 "500px" 값을 할당하여 해당 요소의 최소 너비를 설정합니다.
이렇게 하면 브라우저 창의 크기와 관계없이 요소의 너비가 항상 500px 이상으로 유지됩니다. 반응형 웹 디자인에서 콘텐츠가 지나치게 좁아지는 것을 방지하고 싶을 때 유용하게 활용할 수 있습니다.