HTML DOM의 style resize 속성은 HTML 문서에서 사용자가 특정 요소의 크기를 직접 조절할 수 있는지 여부를 확인(반환)하고 변경(설정)하는 데 사용됩니다. 이 속성을 활용하면 텍스트 영역뿐만 아니라 div 같은 일반 요소도 손쉽게 크기 조절이 가능하도록 만들 수 있습니다.
문법(Syntax)
resize 속성의 기본 문법은 다음과 같습니다.
resize 값 반환하기
object.style.resize
resize 값 설정하기
object.style.resize = "value"
속성 값(Value)
resize 속성에 사용할 수 있는 값은 아래와 같습니다.
| 값 | 설명 |
|---|---|
| inherit | 부모 요소로부터 해당 속성 값을 상속받습니다. |
| initial | 해당 속성 값을 기본값으로 설정합니다. |
| none | 요소의 크기를 조절할 수 없도록 설정합니다. |
| horizontal | 요소의 너비(width)만 조절할 수 있도록 설정합니다. |
| vertical | 요소의 높이(height)만 조절할 수 있도록 설정합니다. |
| both | 요소의 너비와 높이 모두 조절할 수 있도록 설정합니다. |
예제(Example)
다음 예제는 HTML DOM style resize 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 div 요소가 사용자에 의해 크기 조절 가능한 상태로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.resize-div {
border: 2px solid #fff;
margin: 2rem auto;
width: 300px;
overflow: auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style resize Property Example</h1>
<div class="resize-div">
<p>I'm a paragraph element with some dummy text.</p>
</div>
<button onclick="add()" class="btn">Set resize</button>
<script>
function add() {
document.querySelector('div').style.resize = "both";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면의 “Set resize” 버튼을 클릭하면, 자바스크립트의 style.resize = "both" 구문에 의해 div 요소의 오른쪽 하단 모서리에 크기 조절 핸들이 나타나며, 사용자가 마우스로 해당 요소의 너비와 높이를 자유롭게 조정할 수 있게 됩니다.
정리
resize 속성은 기본적으로 textarea 요소에서만 동작하지만, CSS의 overflow 속성이 auto, scroll, hidden 중 하나로 설정된 다른 요소(div 등)에도 적용할 수 있습니다. 위 예제처럼 overflow: auto;를 함께 지정하는 것이 핵심 포인트입니다.