HTML의 Window resizeBy() 메서드는 현재 창 크기를 기준으로 지정한 값만큼 창의 크기를 상대적으로 조절하는 JavaScript 메서드입니다. 절대 크기가 아닌 현재 크기에서 더하거나 빼는 방식으로 동작하기 때문에, 이미 열려 있는 창을 유동적으로 조정할 때 유용합니다.
문법(Syntax)
resizeBy() 메서드의 기본 문법은 다음과 같습니다.
window.resizeBy(w, h)
- w: 창 너비를 조절할 픽셀 값
- h: 창 높이를 조절할 픽셀 값
양수를 입력하면 창이 커지고, 음수를 입력하면 창이 작아집니다.
예제(Example)
아래는 HTML Window resizeBy() 메서드를 활용한 실제 예제입니다. 버튼을 클릭해 새 창을 생성한 뒤, 해당 창의 크기를 변경하는 코드입니다.
<!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 resizeBy() 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.resizeBy(100, 100);
newWindow.focus();
}
</script>
</body>
</html>실행 결과(Output)
먼저 [Create a new window] 버튼을 클릭하면 가로 80px, 세로 80px 크기의 새로운 팝업 창이 생성됩니다.
새 창이 열린 것을 확인할 수 있습니다.
이어서 [Resize the window] 버튼을 클릭하면, 생성된 창이 기존 크기보다 가로·세로 각각 100px씩 커지며 포커스가 해당 창으로 이동합니다.
참고 사항
- resizeBy()는 window.open()으로 직접 연 창에만 적용되며, 일반 브라우저 탭에는 보안상의 이유로 동작하지 않을 수 있습니다.
- 최신 브라우저에서는 사용자 설정에 따라 스크립트를 통한 창 크기 조절이 제한될 수 있으므로, 실무에서는 팝업 창 제어 용도로 주로 활용됩니다.
- 현재 크기와 무관하게 절대 크기를 지정하고 싶다면 resizeTo() 메서드를 사용하는 것이 좋습니다.