프린트용 CSS (배경 강제출력 등)

배경 강제 출력하기

 

프린트를 하는 경우 background-image나 background-color는 출력이 되지 않아 간혹 프린트한 내용물이 깨져보이는 경우가 발생함. 이때 아래 코드와 같이 css에서 강제로 배경을 출력하도록 설정할 수 있음.

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

 

 

 

페이지 속성 지정

 

인쇄 결과물이 예를 들어 A4용지에 딱 맞게 나오게 하고 싶은 경우 아래 코드를 이용하면 됨.

size 속성에 A4, A5, B5 등의 값을 줄 수도 있고, 기타 여백을 주거나 절단면을 만들 수도 있음.

@page {
    size: A4;
    margin: 1cm;
}​

 

 

이외에 인쇄 내용이 A4용지를 넘어갈 정도로 많은 경우 page-break-after: always;를 이용하는 등 여러가지 테크닉은

CSS print Profile이나 PrinceXML 등을 참고해보자.