왕진 블로그
반응형
Web Development · JavaScript
JavaScript window.print
print() 호출과 onbeforeprint/onafterprint 이벤트로 인쇄 전후 화면을 제어합니다.
시작 오늘 분석할 코드
이 예제는 window 객체가 제공하는 인쇄, 스크롤, 창 이동, 창 크기 조절 기능을 다룹니다. 브라우저 보안 정책과 사용자 조작 여부에 따라 일부 메서드는 제한될 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>웹 페이지 프린트</title> </head> <body> <h3>웹 페이지 프린트</h3> <hr> <p>window 객체의 print() 메소드를 호출하면 window 객체에 담겨 있는 웹 페이지가 프린트 됩니다. <p> <a href="javascript:window.print()">이곳을 누르면 프린트 됩니다.</a><p> <input type="button" value="프린트" onclick="window.print()"> </body> </html> <!-- 다음 window 메서드 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onbeforeprint와 onafterprint</title> <style> #logoDiv { display : none; position : absolute; left : 0; top : 0; width : 100%; height : 100%; z-index : -1; /* 로고 이미지를 문서의 밑바닥에 배치 */ } </style> <script> window.onbeforeprint=function (e) { let logoDiv = document.getElementById("logoDiv"); logoDiv.style.display = "block"; // block으로 변경. 로고가 화면에 나타나게 함 } window.onafterprint=hideLogo; function hideLogo() { let logoDiv = document.getElementById("logoDiv"); logoDiv.style.display = "none"; // 로고를 보이지 않게 함 } </script></head> <body> <h3>onbeforeprint, onafterprint 이벤트 예</h3> <hr> <div id="logoDiv"> <img src="media/logo.png" alt="이미지 없습니다."> </div> <p>안녕하세요. 브라우저 윈도우에서는 보이지 않지만, 프린트시에는 회사 로고가 출력되는 예제를 보입니다. 마우스 오른쪽 버튼을 눌러 인쇄 미리보기 메뉴를 선택해 보세요.</p> </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 크기 조절 대안을 압니다. |
테스트할 때는 일반 탭, 새로 연 팝업, 모바일 브라우저를 구분해서 봐야 합니다. 같은 코드라도 실행 환경에 따라 인쇄 이벤트와 창 제어 허용 여부가 달라질 수 있습니다.
| 확인 항목 | 보는 이유 |
|---|---|
| 사용자 클릭 후 실행 | 브라우저가 자동 실행을 제한하는지 확인합니다. |
| beforeprint 동작 | 인쇄 직전 로고나 안내 문구가 표시되는지 봅니다. |
| afterprint 동작 | 인쇄 후 임시 요소가 다시 숨겨지는지 확인합니다. |
| 인쇄 CSS와 이벤트 중복 | @media print와 JS가 서로 충돌하지 않는지 봅니다. |
A
출력 전 상태인쇄용 안내, 로고, 숨길 영역을 먼저 정리합니다.
B
인쇄 호출버튼 클릭처럼 사용자가 시작한 동작에서 window.print()를 실행합니다.
C
출력 후 복구onafterprint에서 화면용 상태로 되돌립니다.
인쇄 대화상자가 닫히는 시점과 afterprint 발생 시점은 브라우저마다 조금 다를 수 있습니다. 중요한 데이터 저장은 인쇄 이벤트에만 의존하지 않는 편이 안정적입니다.
| 구분 | 권장 처리 |
|---|---|
| 출력 전 표시 | beforeprint 또는 @media print로 처리합니다. |
| 출력 후 정리 | afterprint에서 임시 DOM 상태를 되돌립니다. |
| 사용자 취소 | 취소해도 화면이 깨지지 않게 복구 로직을 둡니다. |
| 모바일 확인 | 모바일 인쇄 UI는 데스크톱과 다를 수 있습니다. |
인쇄 기능은 화면에서 바로 눈에 보이는 결과가 적기 때문에 체크리스트를 남겨두는 편이 좋습니다. 특히 출력 전 표시, 출력 후 복구, 취소 시 상태를 각각 따로 확인하면 문제를 빨리 찾을 수 있습니다.
D
미리보기 확인브라우저 인쇄 미리보기에서 실제 출력 영역을 확인합니다.
E
복귀 확인대화상자를 닫은 뒤 화면 요소가 원래대로 돌아왔는지 확인합니다.
F
재실행 확인인쇄 버튼을 다시 눌러도 같은 흐름으로 동작하는지 확인합니다.
핵심 한 줄 요약
window.printwindow.print()는 인쇄 대화상자를 열고, 인쇄 전후 이벤트로 출력용 요소를 제어할 수 있습니다.
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 navigator · screen 완전 정리 (0) | 2026.07.06 |
|---|---|
| JavaScript window.location — 페이지 이동·URL 완전 정리 (0) | 2026.07.06 |
| JavaScript 스크롤·위치·크기 — scrollBy·moveBy·resizeBy 완전 정리 (1) | 2026.07.05 |
| JavaScript 타이머 — setInterval · setTimeout 완전 정리 (0) | 2026.07.05 |
| JavaScript window.open · close — 윈도우 열기·닫기 완전 정리 (0) | 2026.07.05 |
댓글