(IE 포함) 페이지 프린트(print)할때 background 안나오는 현상 해결

페이지 프린트(print)할때 background 안나오는 현상 해결

---

오프라인에서 사용할 문서를 온라인에서 출력할 수 있는 페이지(팝업창)를 작업해달라는 요청이 와서 작업을 진행했다. 진행할 업무 얘기를 들었을때부터 "아 뭔가 프린트할때 이슈가 생기겠구나" 예상은 하고 우선 보내준 엑셀 파일을 참고하여 UI 작업을 진행했다. 

 

엑셀로 만들어 준 참고용 문서

별도 디자인이 없는 상황에서 참고용으로 준 엑셀문서보다는 보기좋게 결과물이 나와야 했기 때문에 여기저기 테이블 스타일을 참고하여 웹페이지 작업은 마무리됐다.

 

출력물이기때문에 th는 좀 짙게 처리했다.

그리고 별 기대없이 해당페이지를 출력해봤다. 결과는?

 

출력화면 미리보기부터 th의 background-color가 보이지 않았다.

첫번째 출력물, th의 background-color가 표시되지 않았다.

역시 보란듯이 background-color가 표시되지 않았다. 예상했기에 덤덤하게 관련 키워드로 검색해보니 @media print 안에 -webkit-print-color-adjust속성을 추가하고 background-color속성값에 !important를 추가하면 된다고 해서 아래와 같이 추가한 뒤 다시 출력(print)해보았다.

/* CSS */
@media print {
	table th {background-color:#e8e8e8 !important; -webkit-print-color-adjust:exact;}
}

@media print안에 -webkit-print-color-adjust:exact속성과 background-color속성에 !important추가

일단 크롬에선 위 사진과 같이 정상적으로 출력되었으나 역시 IE(인터넷 익스플로러)에서는 background-color가 출력되지 않았다. (기대도 안했다) 더 찾아보니 IE에서는 별도 브라우저 설정이 필요했다.

 

IE에서 프린트 시 background-color노출되게 하기 위한 설정 1

먼저 브라우저 메뉴 중 파일 > 페이지 설정을 선택한다. (브라우저 메뉴 자체가 안보인다면 Alt키를 누르면 메뉴가 노출된다)

 

IE에서 프린트 시 background-color노출되게 하기 위한 설정 2

페이지 설정 팝업이 뜨면 항목 중 배경색 및 이미지 인쇄 항목에 체크를 한 뒤, 다시 인쇄를 해보니 정상적으로 background-color가 노출됐다. 결국 IE브라우저를 쓰는 사용자가 브라우저 설정을 별도로 하지 않는다면 페이지 출력(프린트) 시 background-color를 노출할 방법은 없는 것이다. (결론이 슬프지만 이 부분은 내쪽에서 컨트롤 할 수 없으니 여기서 작업은 마무리 됐다)

---

 

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator)

CSS(Animation)로 햄버거 메뉴 애니메이션 구현 (PULIP) UI Clone

CSS 로딩UI 만들기 #1. 회전하는 원(Circle)