window 객체: 브라우저 창 크기와 위치 조절 사용 예제

window 객체: 브라우저 창 크기와 위치 조절 사용 예제

window 객체를 사용하면 브라우저 창의 크기와 위치를 조절할 수 있습니다. 그러나 최근 웹 브라우저들은 보안 및 사용자 경험 상의 이유로 대부분의 window 객체의 크기 조절 메서드를 사용할 수 없습니다. 하지만 새로운 팝업 창을 열어서 크기를 조절하는 것은 여전히 가능합니다. 그럼 브라우저 창 크기와 위치를 조절하는 방법을 예제로 알아보겠습니다.

▼ window 객체의 주요 속성과 메서드

속성/메서드설명
window.innerHeight브라우저
window.innerWidth브라우저 창의 내부 너비를 반환합니다.
window.outerHeight브라우저 창의 외부 높이를 반환합니다.
window.outerWidth브라우저 창의 외부 너비를 반환합니다.
window.pageXOffset문서가 가로로 스크롤된 픽셀 수를 반환합니다.
window.pageYOffset문서가 세로로 스크롤된 픽셀 수를 반환합니다.
window.alert()알림 다이얼로그를 표시합니다.
window.confirm()확인 다이얼로그를 표시하고, 사용자의 선택에 따라 true 또는 false를 반환합니다.
window.prompt()프롬프트 다이얼로그를 표시하고, 사용자의 입력값을 반환합니다.
window.setTimeout()지정된 시간이 경과한 후 함수를 실행하도록 예약합니다.
window.setInterval()지정된 시간 간격으로 함수를 반복 실행하도록 예약합니다.
window.clearTimeout()setTimeout()으로 예약된 함수 실행을 취소합니다.
window.clearInterval()setInterval()로 예약된 함수 실행을 취소합니다.
window.open()새 창이나 탭을 여는 데 사용됩니다.
window.close()현재 창이나 탭을 닫습니다.
window.moveTo()브라우저 창의 위치를 변경합니다.
window.resizeTo()브라우저 창의 크기를 변경합니다.

1. 브라우저 창 크기 조절하기

window.resizeTo()와 window.resizeBy() 메서드를 사용하여 브라우저 창의 크기를 조절할 수 있습니다.

  • window.resizeTo(width, height): 브라우저 창의 크기를 지정한 너비와 높이로 변경합니다.
  • window.resizeBy(width, height): 브라우저 창의 크기를 지정한 너비와 높이만큼 늘리거나 줄입니다.


1. 사용 예제: window.resizeTo()

▼ 부모창

<button onclick="window.open('resizeTo.html', '', 'width=300,height=300');">
resizeTo 예제로 새 창 열기
</button>


▼ 오픈창: resizeTo.html

<script>
    window.onload = function() {
        window.resizeTo(800, 600); // 창 크기 변경하기 (resizeTo)
    }
</script>


2. 사용 예제: window.resizeBy()

▼ 부모창

<button onclick="window.open('resizeBy.html', '', 'width=300,height=300');">
resizeBy 예제로 새 창 열기
</button>


▼ 오픈창: resizeBy.html

<script>
    window.onload = function() {
        window.resizeBy(500, 300); // 창 크기 변경하기 (resizeBy)
    }
</script>

2. 브라우저 창 위치 조절하기

window.moveTo()와 window.moveBy() 메서드를 사용하여 브라우저 창의 위치를 조절할 수 있습니다.

  • window.moveTo(x, y): 브라우저 창을 지정한 x, y 좌표로 이동시킵니다.
  • window.moveBy(x, y): 브라우저 창을 지정한 x, y 좌표만큼 이동시킵니다.


1. 사용 예제: window.moveTo()

▼ 부모창

<button onclick="window.open('moveTo.html', '', 'width=300,height=300');">
moveTo 예제로 새 창 열기
</button>


▼ 오픈창: moveTo.html

<script>
    window.onload = function() {
        window.moveTo(200, 200);
    }
</script>


2. 사용 예제: window.moveBy()

▼ 부모창

<button onclick="window.open('moveBy.html', '', 'width=300,height=300');">
moveBy 예제로 새 창 열기
</button>


▼ 오픈창: moveBy.html

<script>
    window.onload = function() {
      window.moveBy(100, 100);
    }
</script>

자바스크립트 기초 이전 게시물

  1. 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
  2. window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
  3. window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
  4. window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
위로 스크롤