GN⁺: 종이에 인쇄하기 위한 CSS 정리 (voussoir.net)

[admin]

▲
GN⁺: 종이에 인쇄하기 위한 CSS 정리 https://voussoir.net/writing/css_for_printing
13P by neo 2일전 | favorite | 댓글 1개
회사에서 HTML을 이용해 종이/엑셀로 수기로 작성되던 양식을 웹 기반 도구로 재생성 및 대체하는 작업을 하고 있어서 이를 정리함
웹 페이지가 인쇄될 때 어떻게 보이는지를 제어하는 CSS 기본 사항과 몇 가지 팁과 요령을 설명
@page
@page는 웹사이트의 인쇄 설정을 브라우저에 알리는 CSS 규칙임.
@page는 DOM을 포함하며, 웹에서 요소는 화면 가장자리에 의해 제한되지만 인쇄 시에는 @page에 의해 제한됨.
@page 설정은 Ctrl+P를 눌렀을 때 브라우저 인쇄 대화 상자에서 얻는 설정과 대략 일치함.
@media print
인쇄 시에만 적용되는 스타일을 작성할 수 있는 print 미디어 쿼리가 있음.
인쇄물에 나타나지 않아야 할 헤더, 옵션, 사용자 도움말 텍스트 등에 display:none을 추가함.
너비, 높이, 여백, 패딩
박스 모델에 대한 이해가 필요하며, @page margin: 0을 설정하는 이유는 DOM 요소에서 여백을 처리하는 것을 선호하기 때문임.

이 전체 물리적 종이를 차지하고 여백이 DOM 내부에 있음을 기억하는 것이 더 쉬움. 요소 위치 지정 문서를 디자인할 때 적절한 HTML/CSS를 사용하여 요소를 배치함. 특정 크기의 스티커 용지에 맞는 사각형을 만들거나, 특별한 레이블이 붙은 용지에 데이터를 인쇄해야 할 때 절대 위치 지정을 사용할 수도 있음. 여러 페이지 문서와 반복 요소 인보이스와 같은 표 데이터를 포함하는 인쇄 생성기를 작성할 때, 이 두 번째 페이지로 넘어가면 브라우저가 자동으로 를 각 페이지 상단에 복제함. 자바스크립트를 사용하여 테이블을 여러 개의 작은 테이블로 분할하여 페이지를 생성함. 세로/가로 모드 사용자가 원하는 경우 @page 규칙을 덮어쓸 수 있음. 별도의