▲
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 요소에서 여백을 처리하는 것을 선호하기 때문임.
-
-
자유게시판
자유로운 글을 쓰는 곳
-
레고시리어스플레이
레고시리어스플레이
-
RPA(업무자동화)
RPA(업무자동화)