[CSS] 페이지 인쇄 시 배경색이 보이지 않는 문제

인쇄(ctrl + p)

HTML 페이지의 background-color 속성이 인쇄 미리보기에 적용되지 않는 현상을 확인하였습니다.

아래는 전체 문서를 검게 칠하여 극단적으로 표현한 예시입니다.

실제 페이지

인쇄 미리보기 화면 일부

인쇄 미리보기 시 배경색이 전부 사라져 모든 글씨가 보입니다.

---

print-color-adjust

미디어 쿼리를 이용하여 print에 해당할 때, print-color-adjust 속성을 exact로 지정합니다.

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

print-color-adjust는 economy와 exact 둘 중 하나를 지정해야 합니다.

기본값은 economy이며, user agent에 의해 배경색을 칠하지 않는 등의 변경이 발생할 수 있는 상태입니다.

이 속성을 exact로 설정하면 보이는 화면을 정확히(exactly) 표시하게 됩니다.

---

대안

사용자가 인쇄 설정에서 직접 배경 그래픽을 체크하여 인쇄하도록 하는 방법도 있습니다.

사용자 입장에서 알아두면 좋은 옵션입니다.

만약 보이는 페이지가 그대로 인쇄되는 것을 보장해야 하는 개발자의 입장이라면 이것을 사용자가 직접 찾아서 해결해야 할 일이 없도록 해야겠습니다.

 

 

https://stackoverflow.com/questions/2392366/print-background-colours-in-chrome

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust