통합검색

HTML / CSS

[CSS] 크롬 print 설정 (@media print / @page)



크롬에서 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;
}