▲

GN⁺: 종이에 인쇄하기 위한 CSS 정리

 (voussoir.net)
26P by neo 9달전 | favorite | 댓글 2개
  • 회사에서 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에 대한 기본적인 이해를 넘어서 실제로 어떻게 적용되는지에 대한 실질적인 예시와 팁을 제공함으로써, 이론과 실제의 간극을 좁히는 데 도움을 줌.
▲
cosine20 8달전  [-]

다음에 한번 이걸로 토이 프로젝트를 해보고싶네요.

답변달기
▲
neo 9달전  [-]
Hacker News 의견

  • 개인 웹사이트에서 선호하는 인쇄 스타일에 대한 설명:

    • 섹션 헤더가 페이지 하단에 인쇄되어 다음 페이지 상단에 내용이 헤더 없이 남지 않도록 함.
    • 그래픽과 도표가 페이지를 넘어가지 않고 전체 페이지에 인쇄되도록 함.
    • 하이퍼링크의 URL을 인쇄하여 링크가 단순히 밑줄이 그어진 텍스트로만 남지 않도록 함.

  • Pagedjs.org를 사용하여 책을 편집한 경험:

    • 미리보기에 몇 가지 버그가 있었지만 최종 출력물은 완벽했으며, InDesign을 사용하는 것보다 시간을 4분의 1만큼 절약함.
    • HTML/CSS와 InDesign에 모두 익숙하다면 Pagedjs가 장문 레이아웃에 더 나은 선택임.

  • 인쇄용 CSS에 대한 브라우저 지원의 문제점:

    • CSS에서 페이지마다 각주를 넣는 것과 같은 일부 기능에 대한 동등한 기능이 없음.
    • 사용자 정의 CSS 속성을 실험하고 이러한 격차를 메울 수 있는 쉬운 HTML 레이아웃 엔진이 있는지 질문.

  • CSS를 사용한 인쇄의 용이성:

    • 어떤 앱에서도 HTML+CSS를 출력하여 깔끔하고 예쁜 인쇄 문서를 쉽게 준비할 수 있음.
    • PostScript나 TeX를 배우는 것보다 CSS 타이포그래피를 몇 분 만에 작성하는 것이 더 쉬움.

  • 인쇄를 위한 브라우저 지원이 너무 나빠서 네이티브 앱을 만들어야 하는 상황:

    • 현재는 PDF를 다운로드하여 인쇄해야 함.
    • Chrome/Blink, Safari/Webkit, Firefox/Mozilla 개발자들에게 적어도 해킹이 작동하도록 요청.

  • CSS의 역사와 현재 상황에 대한 고찰:

    • CSS는 처음에 인쇄 미디어를 염두에 두고 시작되었으나 브라우저 지원이 뒤처짐.

  • HTML & CSS를 사용하여 인보이스와 일부 전자책을 만드는 방법:

    • print-css.rocks와 Weasyprint을 활용하는 방법을 소개.

  • 브라우저를 통해 PDF를 생성하기 위해 사용한 paper-css에 대한 언급.

  • HTML/CSS를 사용한 인쇄 자료 제작의 장점:

    • 인쇄 자료 제작에 필요한 모든 것을 HTML/CSS로 사용함.

  • CSS 기술을 활용하여 소셜 네트워크의 프로필을 인쇄 형식으로 제공한 경험:

    • 공장 노동자를 대상으로 한 소셜 네트워크에서 프로필을 인쇄할 수 있도록 함.
    • 워크샵과 코스 인증서를 만드는 온라인 에디터를 만든 경험도 공유.
답변달기