HTML Window resizeTo() 메서드란?
HTML Window resizeTo() 메서드는 현재 창 크기를 기준으로 지정한 값(픽셀)만큼 창의 크기를 조절하는 메서드입니다. 절대 좌표가 아닌 상대적인 크기 변경이 필요할 때 유용하게 사용됩니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
window.resizeTo(w,h)
여기서 w와 h는 각각 창의 너비와 높이를 얼마나 조절할지 픽셀 단위로 지정하는 값입니다.
참고로, 최신 브라우저에서는 보안 정책상 사용자가 임의로 여는 일반 탭에는 이 메서드가 적용되지 않으며, 주로 window.open()으로 생성한 팝업 창처럼 스크립트가 직접 연 창에서만 동작합니다.
예제
다음은 HTML Window resizeTo() 메서드를 활용한 실전 예제입니다. 버튼을 눌러 새 창을 만들고, 그 창의 크기를 조절해 보겠습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 20%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML Window resizeTo() Method Demo</h1>
<button onclick="create()" class="btn">Create a new window</button>
<button onclick='resize()' class="btn">Resize the window</button>
<script>
var newWindow;
function create(){
newWindow =window.open('','','width=80,height=80');
}
function resize(){
newWindow.resizeTo(240, 240);
newWindow.focus();
}
</script>
</body>
</html>
실행 결과
먼저 "Create a new window(새 창 만들기)" 버튼을 클릭하면 80×80 픽셀 크기의 새 창이 생성됩니다.
이어서 "Resize the window(창 크기 조절)" 버튼을 클릭하면, 방금 생성한 창이 resizeTo(240, 240)에 의해 240×240 픽셀 크기로 조절되는 것을 확인할 수 있습니다.
