HTML의 Window moveTo() 메서드는 현재 열려 있는 브라우저 창의 왼쪽과 위쪽 가장자리를 지정한 좌표로 이동시키는 자바스크립트 메서드입니다. 팝업 창이나 새로 생성된 창의 화면상 위치를 제어할 때 유용하게 활용됩니다.
문법(Syntax)
moveTo() 메서드의 기본 문법은 다음과 같습니다.
window.moveTo(x, y)
여기서 각 매개변수는 다음과 같은 의미를 가집니다.
- x: 창을 수평 방향으로 이동시킬 픽셀 값
- y: 창을 수직 방향으로 이동시킬 픽셀 값
즉, moveTo(550, 250)을 호출하면 창의 좌측 상단 모서리가 화면 기준 x축 550px, y축 250px 위치로 이동합니다.
예제 코드
아래 예제는 새 창을 생성한 후 moveTo() 메서드로 해당 창을 지정한 좌표로 이동시키는 전체 코드입니다.
<!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 moveTo() 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.moveTo(550, 250);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 그라데이션 배경의 페이지에 버튼 하나가 표시됩니다.
버튼을 클릭하면 window.open()으로 크기 150×150px의 새 창이 생성되고, 이어서 moveTo(550, 250)가 호출되어 해당 창이 지정된 좌표로 이동하는 것을 확인할 수 있습니다.
참고 사항
- moveTo() 메서드는 window.open()으로 생성한 창에서만 동작하며, 사용자가 직접 연 일반 브라우저 창에는 적용되지 않습니다.
- 대부분의 최신 브라우저는 보안 및 사용자 경험 보호를 위해 스크립트에 의한 창 이동을 제한할 수 있습니다.
- 현재 창의 위치를 확인하려면 window.screenX, window.screenY 속성을 함께 활용하면 좋습니다.