resize 예제
<style>
#hz {
border: 1px solid gray;
background-color: yellow;
width: 200px;
overflow: auto;
}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">
<p>홈짱닷컴 Homzzang.com</p>
</div>
<script>
function homzzang() {
document.getElementById("hz").style.resize = "both";
}
</script>
결과보기
※ 버튼 클릭 시, 요소 크기를 드래그로 조정 가능.
resize 정의
사용자의 요소크기 조정가능여부 지정.
1.
overflow 속성 이용해 가시영역 벗어나는 내용 처리.
2.
IE 제외한 모든 브라우저 모두 지원.
3.
기본값 : none
반환값 : 요소의 resize 속성 표시 문자열
CSS버전: CSS3
resize 구문
[반환]
object.style.resize
[설정]
object.style.resize = "none|both|horizontal|vertical|initial|inherit"
[속성값]
none
기본값. 사용자는 요소크기 조정 불가.
both
사용자가 요소너비와 높이 둘 다 조정 가능.
horizontal
사용자가 요소너비만 조정 가능.
vertical
사용자가 요소높이만 조정 가능.
initial
이 속성의 기본값으로 설정.
inherit
부모요소로부터 상속
