HTML Window 객체의 moveBy() 메서드는 현재 좌표를 기준으로 브라우저 창을 상대적으로 이동시키는 메서드입니다. 화면상의 절대 위치를 지정하는 것이 아니라, 창이 현재 있는 자리에서 지정한 픽셀만큼 움직인다는 점이 특징입니다.
문법(Syntax)
moveBy() 메서드의 기본 문법은 다음과 같습니다.
window.moveBy(x, y)
각 매개변수의 의미는 다음과 같습니다.
- x: 창을 수평(가로) 방향으로 이동할 픽셀 값
- y: 창을 수직(세로) 방향으로 이동할 픽셀 값
양수를 입력하면 각각 오른쪽·아래쪽으로 이동하고, 음수를 입력하면 왼쪽·위쪽으로 이동합니다.
예제(Example)
버튼을 클릭하면 새 창을 연 뒤, moveBy() 메서드로 해당 창을 이동시키는 예제입니다.
<!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: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML Window moveBy() Method Demo</h1>
<button onclick="create()" class="btn">Create new window and then move it</button>
<script>
function create(){
var newWindow = window.open('', '', 'width=150,height=150');
newWindow.moveBy(550, 200);
}
</script>
</body>
</html>
실행 결과(Output)
화면의 “Create new window and then move it” 버튼을 클릭하면 크기 150×150의 새 창이 열리고, moveBy(550, 200)에 의해 현재 위치에서 오른쪽으로 550픽셀, 아래쪽으로 200픽셀 이동한 것을 확인할 수 있습니다.
참고 사항
moveBy()는 스크립트로 직접 연 창(window.open())에만 안정적으로 동작합니다. 최신 브라우저는 보안 및 사용자 경험 보호를 위해 사용자가 직접 연 창이나 다른 출처의 창을 임의로 이동하는 것을 제한하는 경우가 많으므로, 실무에서는 팝업 창 제어 용도로 활용하는 것이 좋습니다. 또한 절대 좌표 기준으로 창을 이동하고 싶다면 moveTo() 메서드를 사용하면 됩니다.