HTML DOM의 style minWidth 속성은 HTML 문서 내 특정 요소의 최소 너비(minimum width)를 가져오거나 수정하는 데 사용됩니다. 이 속성을 활용하면 브라우저나 부모 요소의 크기가 줄어들더라도 해당 요소가 일정 너비 이하로 축소되지 않도록 제어할 수 있어, 반응형 웹 레이아웃을 설계할 때 특히 유용합니다.
문법(Syntax)
minWidth 속성의 기본적인 사용 문법은 다음과 같습니다.
1. minWidth 값 반환하기
object.style.minWidth
2. minWidth 값 설정하기
object.style.minWidth = "value"
속성 값(Values)
위 문법에서 value 자리에 지정할 수 있는 값은 다음과 같습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 이 속성 값을 상속받아 적용합니다. |
| initial | 이 속성 값을 브라우저 기본값(default)으로 되돌립니다. |
| length | px, em, rem 등 길이 단위를 사용하여 최소 너비를 지정합니다. |
| percentage(%) | 부모 요소 전체 너비를 기준으로 하는 백분율(%) 값으로 최소 너비를 지정합니다. |
예제(Example)
다음은 style minWidth 속성을 실제로 활용한 예제 코드입니다.
<!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;
width: 30%;
}
.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 minWidth Property Example</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 minWidth</button>
<script>
function add() {
document.querySelector('p').style.minWidth = "300px";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면에서 "Set minWidth" 버튼을 클릭하면, JavaScript의 document.querySelector('p').style.minWidth = "300px"; 구문이 실행되어 단락(p) 요소의 최소 너비가 300픽셀로 설정됩니다. 그 결과, 원래 지정된 너비(30%)보다 작아지지 않고 최소 300px의 너비가 유지되는 것을 아래와 같이 확인할 수 있습니다.
