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>
자바스크립트 기초 이전 게시물
- 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
- window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
- window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
- window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!