왕진 블로그
반응형
Web Development · JavaScript
JavaScript 스크롤과 윈도우 위치
scrollBy, requestAnimationFrame, moveBy, resizeBy로 화면 이동과 창 제어를 비교합니다.
시작 오늘 분석할 코드
이 예제는 window 객체가 제공하는 인쇄, 스크롤, 창 이동, 창 크기 조절 기능을 다룹니다. 브라우저 보안 정책과 사용자 조작 여부에 따라 일부 메서드는 제한될 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>웹 페이지의 자동 스크롤</title> <script> function startScroll(interval) { setInterval("autoScroll()", interval); } //function autoScroll() { //window.scrollBy(0,10); // 10픽셀 위로 스크롤 } let scrolling = true; // 자동 스크롤 on/off 상태 function autoScroll() { if (scrolling) { window.scrollBy(0, 0.5); // 1프레임당 0.5px 이동 (부드럽게) } requestAnimationFrame(autoScroll); // 매 프레임마다 반복 호출 } window.onload = function() { requestAnimationFrame(autoScroll); }; </script> </head> <body onload="startScroll(1000)"> // 1/1000 초로 생각하면됨 / 30으로하면 엄청 부드럽게 내려감. <h3>자동 스크롤 페이지</h3> <hr> <h3>꿈길(이동순)</h3> 꿈길에<br> 발자취가 있다면<br> 님의 집 창밖<br> 그 돌계단 길이 이미 오래 전에<br> 모래가 되고 말았을 거예요<br><br> 하지만<br> 그 꿈길에서 자취 없다 하니<br> 나는 그것이 정말 서러워요<br><br> 이 밤도<br> 나는 님의 집 창밖<br> 그 돌계단 위에 홀로 서서<br> 혹시라도 님의 목소리가 들려올까<br> 고개 숙이고 엿들어요<br> </body> </html> <!-- 다음 window 메서드 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우의 위치와 크기 조절</title> </head> <body> <h3>윈도우의 위치와 크기 조절</h3> <hr> <button onclick="window.moveBy(-10, 0)">left</button> <button onclick="window.moveBy(10, 0)">right</button> <button onclick="self.moveBy(0, -10)">up</button> <button onclick="moveBy(0, 10)">down</button> <button onclick="resizeBy(10, 10)">+</button> <button onclick="resizeBy(-10, -10)">-</button> // 이거 작동 안했는데 이유는? </body> </html>
실제 출력 미리보기
자동 스크롤이 조금씩 아래로 이동하는 페이지
용어 용어 정리
window브라우저 창과 전역 실행 환경을 나타내는 객체입니다.
print()현재 페이지 인쇄 대화상자를 여는 메서드입니다.
beforeprint인쇄 직전에 발생하는 이벤트입니다.
afterprint인쇄가 끝난 뒤 발생하는 이벤트입니다.
scrollBy현재 스크롤 위치를 기준으로 문서를 상대 이동합니다.
resizeBy현재 창 크기를 기준으로 상대적으로 키우거나 줄입니다.
1 window 메서드의 범위
window 메서드는 HTML 요소 하나가 아니라 브라우저 창 또는 문서 전체를 대상으로 합니다. 그래서 일반 DOM 조작보다 브라우저 정책의 영향을 더 많이 받습니다.
사용자 조작
→
window 메서드
→
인쇄/스크롤/창 제어
2 print 호출
window.print()는 현재 페이지 인쇄 대화상자를 엽니다. 링크의 javascript URL이나 버튼 onclick에서 호출할 수 있습니다.
<a href="javascript:window.print()">프린트</a> <input type="button" onclick="window.print()">
인쇄는 사용자가 최종 확인하는 동작이라 브라우저가 대화상자를 표시합니다.
3 인쇄 전후 이벤트
인쇄할 때만 보이는 로고나 안내 문구가 필요하면 onbeforeprint에서 표시하고 onafterprint에서 숨깁니다.
onbeforeprint
인쇄 직전 로고를 block으로 바꿉니다.
onafterprint
인쇄 후 로고를 다시 none으로 숨깁니다.
반응형
4 자동 스크롤
scrollBy(0, 10)은 현재 스크롤 위치에서 아래쪽으로 10px 이동합니다. 원본에는 setInterval 방식과 requestAnimationFrame 방식이 함께 언급됩니다.
| 방식 | 특징 | 용도 |
|---|---|---|
| setInterval | 시간 간격 기준 반복 | 단순 반복 |
| requestAnimationFrame | 브라우저 렌더링 주기 기준 | 부드러운 애니메이션 |
| scrollBy | 현재 위치 기준 이동 | 자동 스크롤 |
| scrolling flag | 실행 여부 저장 | 일시정지/재개 |
5 moveBy와 resizeBy
moveBy()와 resizeBy()는 브라우저 창 자체를 이동하거나 크기를 바꾸려는 메서드입니다. 현대 브라우저에서는 보안과 사용자 경험 때문에 일반 탭에서 제한될 수 있습니다.
원본 메모의 “작동 안 했는데 이유는?”은 정상적인 의문입니다. 스크립트로 열린 팝업이 아니거나 브라우저가 제한하면 moveBy/resizeBy가 동작하지 않을 수 있습니다.
6 좌표와 크기 변화
moveBy는 x, y 이동량을 받고 resizeBy는 width, height 변화량을 받습니다. 양수와 음수에 따라 이동 방향과 크기 변화가 달라집니다.
| 메서드 | 인자 | 효과 |
|---|---|---|
| moveBy(-10, 0) | x 음수 | 왼쪽 이동 시도 |
| moveBy(10, 0) | x 양수 | 오른쪽 이동 시도 |
| resizeBy(10, 10) | 양수 | 창 크기 증가 시도 |
| resizeBy(-10, -10) | 음수 | 창 크기 감소 시도 |
7 실무 대체 방법
창 자체를 움직이는 기능은 제한이 많으므로, 실제 UI에서는 브라우저 창 대신 페이지 내부 요소를 이동시키거나 크기를 바꾸는 방식이 더 안정적입니다.
1
인쇄 스타일@media print 또는 beforeprint 이벤트를 사용합니다.
2
자동 이동window.scrollBy보다 특정 컨테이너 scrollTop 제어를 고려합니다.
3
크기 조절창이 아니라 DOM 요소의 width/height를 바꿉니다.
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| print가 바로 출력한다고 생각 | 대화상자가 떠서 흐름이 멈춘 것처럼 보입니다. | 브라우저 인쇄 대화상자 동작을 이해합니다. |
| 인쇄용 요소를 다시 숨기지 않음 | 인쇄 후 화면에 로고가 남습니다. | onafterprint에서 display none 처리합니다. |
| setInterval과 requestAnimationFrame을 중복 사용 | 스크롤이 너무 빠르거나 예측이 어렵습니다. | 한 가지 반복 방식으로 정리합니다. |
| moveBy가 항상 된다고 생각 | 버튼을 눌러도 창이 움직이지 않습니다. | 브라우저 제한을 고려하고 대체 UI를 씁니다. |
| 음수/양수 방향 혼동 | 반대 방향으로 이동합니다. | x, y 축 기준을 표로 확인합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 인쇄 | window.print와 before/after 이벤트를 설명합니다. |
| 스크롤 | scrollBy의 상대 이동 개념을 압니다. |
| 애니메이션 | requestAnimationFrame의 목적을 이해합니다. |
| 창 위치 | moveBy 제한 가능성을 알고 있습니다. |
| 창 크기 | resizeBy 대신 DOM 크기 조절 대안을 압니다. |
테스트할 때는 일반 탭, 새로 연 팝업, 모바일 브라우저를 구분해서 봐야 합니다. 같은 코드라도 실행 환경에 따라 창 이동과 크기 변경 허용 여부가 달라질 수 있습니다.
| 확인 항목 | 보는 이유 |
|---|---|
| 사용자 클릭 후 실행 | 브라우저가 자동 실행을 제한하는지 확인합니다. |
| 스크립트로 열린 창인지 | moveBy/resizeBy 허용 가능성이 달라집니다. |
| 스크롤 대상 | window인지 특정 요소인지에 따라 API가 달라집니다. |
| 인쇄 후 화면 복구 | onafterprint에서 임시 스타일을 되돌렸는지 봅니다. |
A
먼저 대상 확인문서 전체를 움직일지, 특정 박스만 움직일지 정합니다.
B
반복 방식 선택간단한 반복은 setInterval, 화면 갱신과 맞출 때는 requestAnimationFrame을 씁니다.
C
중지 조건 준비사용자가 멈출 수 있는 버튼이나 상태값을 같이 둡니다.
핵심 한 줄 요약
scrollByscrollBy는 문서 스크롤을 움직이고, moveBy/resizeBy는 브라우저 창 자체를 제어하려는 메서드입니다.
print인쇄 전후 이벤트로 출력 전용 요소를 제어합니다.
scroll문서 위치 이동은 scrollBy로 처리할 수 있습니다.
policy창 이동과 크기 변경은 브라우저 정책으로 제한될 수 있습니다.
Tags
#JavaScript#window#print#onbeforeprint#onafterprint#scrollBy#moveBy#resizeBy#DOM#티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, window, print, onbeforeprint, onafterprint, scrollBy, moveBy, resizeBy, DOM, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript window.location — 페이지 이동·URL 완전 정리 (0) | 2026.07.06 |
|---|---|
| JavaScript window.print · onbeforeprint 완전 정리 (0) | 2026.07.06 |
| JavaScript 타이머 — setInterval · setTimeout 완전 정리 (0) | 2026.07.05 |
| JavaScript window.open · close — 윈도우 열기·닫기 완전 정리 (0) | 2026.07.05 |
| JavaScript 키 이벤트 — e.key·e.code·방향키 이동 완전 정리 (0) | 2026.07.05 |
댓글