CSS3의 resize 속성을 사용하면 사용자가 직접 요소의 크기를 조절할 수 있습니다. 이 속성은 주로 다음과 같은 세 가지 값을 사용합니다.
- horizontal – 가로 방향으로만 크기 조정 가능
- vertical – 세로 방향으로만 크기 조정 가능
- both – 가로·세로 양방향 모두 크기 조정 가능
resize 속성 사용 시 주의사항
resize 속성은 overflow 값이 visible(기본값)일 때는 작동하지 않습니다. 따라서 반드시 overflow: auto;, overflow: scroll; 또는 overflow: hidden; 중 하나를 함께 지정해야 합니다.
예제 코드
아래 예제는 resize 속성에 both 값을 적용하여, div 요소를 가로와 세로 양쪽 모두 자유롭게 늘리거나 줄일 수 있도록 만든 것입니다.
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>My Website</div>
</body>
</html>실행 결과 설명
위 코드를 브라우저에서 실행하면 테두리가 있는 박스의 오른쪽 하단 모서리에 크기 조정 핸들이 나타납니다. 이 핸들을 마우스로 드래그하면 요소의 너비와 높이를 자유롭게 변경할 수 있습니다.
추가 팁
<textarea>요소는 기본적으로 resize 기능이 활성화되어 있으며, 이를 비활성화하려면resize: none;을 지정하면 됩니다.- resize 속성은 대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원되지만, 구형 Internet Explorer에서는 작동하지 않습니다.