HTML / CSS
[CSS] 크롬 print 설정 (@media print / @page)
- 2022.08.09 14:08:26
크롬에서 print 설정시 자주 사용하는 코드. 익스플로러 지원이 중단되었으니 이제는 비교적 자유롭게 사용해도 되겠다. [!]@media print[/!] @media print 는 print시 적용할 스타일을 정의한다. print시 레이아웃 일부나 프린트될 해당 엘리먼트의 스타일을 조정할 때 사용한다. 아래 CSS는 프린트시 html, body 의 여백을 0으로 조정하고 프린트될 엘리먼트(.print-me)의 width값을 조정하는 예시 아래 -webkit-print-color-adjust: exact; 는 프린트시 배경이미지가 인쇄되지 않는 현상 해결. @media print {
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; } html,body{margin: 0;padding: 0;min-width: 0;} .print-me{width: 1200px;} } [!]@page[/!] @page는 인쇄 용지 크기와 여백을 조정한다. A4, B4 등 용지 규격을 입력해도 된다. @page {
size: auto; margin: 0; } |