CSS의 resize 속성을 사용하면 사용자가 요소의 크기를 직접 조정할 수 있는지 여부를 간단하게 지정할 수 있습니다. 이 속성은 JavaScript에서도 동적으로 제어할 수 있어, 버튼 클릭과 같은 사용자 상호작용에 따라 요소의 크기 조절 기능을 켜거나 끌 때 유용합니다.
resize 속성의 주요 값
resize 속성에는 다음과 같은 값을 사용할 수 있습니다.
- none: 사용자가 요소의 크기를 조정할 수 없습니다. (기본값)
- both: 가로와 세로 모두 크기를 조정할 수 있습니다.
- horizontal: 가로 방향으로만 크기를 조정할 수 있습니다.
- vertical: 세로 방향으로만 크기를 조정할 수 있습니다.
예제
아래 코드를 실행해 보세요. 버튼을 클릭하면 div 요소에 resize 속성이 적용되어, 오른쪽 아래 모서리를 드래그하여 요소의 크기를 자유롭게 조정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
overflow: auto;
background-color: orange;
border: 3px solid red;
}
</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.<p>
<p>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.<p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById("box").style.resize = "both";
}
</script>
</body>
</html>코드 설명
위 예제에서 버튼을 클릭하면 display() 함수가 호출되고, document.getElementById("box").style.resize = "both"; 구문을 통해 id가 "box"인 div 요소의 resize 속성이 "both"로 설정됩니다. 이후 요소의 오른쪽 아래 모서리에 크기 조정 핸들이 나타나며, 사용자는 마우스를 드래그해 가로와 세로 크기를 모두 변경할 수 있습니다.
참고로 resize 속성이 정상적으로 작동하려면 요소에 overflow 속성이 auto, scroll, 또는 hidden 중 하나로 설정되어 있어야 합니다. 위 예제에서는 overflow: auto;가 이미 적용되어 있습니다.