- 회사에서 HTML을 이용해 종이/엑셀로 수기로 작성되던 양식을 웹 기반 도구로 재생성 및 대체하는 작업을 하고 있어서 이를 정리함
- 웹 페이지가 인쇄될 때 어떻게 보이는지를 제어하는 CSS 기본 사항과 몇 가지 팁과 요령을 설명
@page
@page는 웹사이트의 인쇄 설정을 브라우저에 알리는 CSS 규칙임.@page는 DOM을 포함하며, 웹에서<html>요소는 화면 가장자리에 의해 제한되지만 인쇄 시에는@page에 의해 제한됨.@page설정은 Ctrl+P를 눌렀을 때 브라우저 인쇄 대화 상자에서 얻는 설정과 대략 일치함.
@media print
- 인쇄 시에만 적용되는 스타일을 작성할 수 있는
print미디어 쿼리가 있음. - 인쇄물에 나타나지 않아야 할 헤더, 옵션, 사용자 도움말 텍스트 등에
display:none을 추가함.
너비, 높이, 여백, 패딩
- 박스 모델에 대한 이해가 필요하며, @page
margin: 0을 설정하는 이유는 DOM 요소에서 여백을 처리하는 것을 선호하기 때문임. <html>이 전체 물리적 종이를 차지하고 여백이 DOM 내부에 있음을 기억하는 것이 더 쉬움.
요소 위치 지정
- 문서를 디자인할 때 적절한 HTML/CSS를 사용하여 요소를 배치함.
- 특정 크기의 스티커 용지에 맞는 사각형을 만들거나, 특별한 레이블이 붙은 용지에 데이터를 인쇄해야 할 때 절대 위치 지정을 사용할 수도 있음.
여러 페이지 문서와 반복 요소
- 인보이스와 같은 표 데이터를 포함하는 인쇄 생성기를 작성할 때,
<table>이 두 번째 페이지로 넘어가면 브라우저가 자동으로<thead>를 각 페이지 상단에 복제함. - 자바스크립트를 사용하여 테이블을 여러 개의 작은 테이블로 분할하여 페이지를 생성함.
세로/가로 모드
- 사용자가 원하는 경우 @page 규칙을 덮어쓸 수 있음.
- 별도의
<style>요소를 세로 및 가로 모드에 대해 생성하고 자바스크립트를 사용하여 스위치할 수 있음.
데이터 소스
- 데이터를 페이지에 가져오는 몇 가지 방법이 있으며, URL 매개변수에 모든 데이터를 포장하거나 자바스크립트를 사용하여 API를 통해 데이터베이스 레코드를 가져올 수 있음.
contenteditable을 설정하여 사용자가 인쇄 전에 작은 변경을 할 수 있도록 함.
GN⁺의 의견
- 이 기사는 웹 개발자들에게 인쇄용 CSS를 작성하는 방법에 대한 유용한 가이드를 제공함. 특히 웹 페이지를 물리적 문서로 변환하는 작업에 종사하는 개발자들에게 도움이 될 것임.
- 인쇄용 CSS는 종종 무시되는 주제이지만, 많은 기업에서 여전히 중요한 서류를 인쇄해야 하는 경우가 많으므로 이러한 지식은 가치가 있음.
- 기사에서 제시된 기술적 접근 방식은 실제 업무 환경에서 테스트되고 검증된 것으로 보이며, 실제 문제를 해결하는 데 실용적인 솔루션을 제공함.
- CSS
@page규칙과@media print쿼리의 사용은 웹 페이지를 인쇄할 때 종이의 크기와 여백을 제어하는 데 중요하며, 이는 웹 개발자가 반드시 알아야 할 내용임. - 이 기사는 인쇄용 CSS에 대한 기본적인 이해를 넘어서 실제로 어떻게 적용되는지에 대한 실질적인 예시와 팁을 제공함으로써, 이론과 실제의 간극을 좁히는 데 도움을 줌.