CSS 미디어쿼리로 print mode

예전에 구글드라이브에 정리해놓은 글이 있어 블로그에 옮겨본다

※ Print mode(인쇄 스타일)를 적용하는 방법

1. <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 2. <style type=”text/css” media=”print”> @import “print.css”;   </style> 3. @media print { /*직접 코드입력*/ }

• 코드 분리, 수정을 위해 @media print{}를 활용하는것을 권장.
  (크롬 개발자도구- 설정에서 media버전을 강제 지정하여 확인할 수 있다.)

• 프린트시 반복적으로 나오거나, 필요없는 부분은 display: none;으로 안보이도록 작업을 먼저 한 후, 프린트 모드에 맞게 수정하면 된다.

• 인쇄물의 제목, 회사의 로고, 카피등을 고정적으로 출력하기위해서 상단과 하단에 출력에만 나오는 헤더와 푸터를 삽입할 수 있다.

• 전체출력 외 브라우저 내 특정부분만 출력하게 하기 위해서
  <script type="text/javascript" src="../folderName/folder/jquery.printElement.js"></script>
  
  

예) <script type="text/javascript"> $(document).ready(function() { $("#btnPrint").click(function() { $("#printForm1").printElement({ printMode:'iframe', overrideElementCSS:['/asset/css/common.css',{ href:'/asset/css/common.css',media:'print'}] //print mode가 있는 css경로 입력 }); return false; }); $('#btnPrint2').hide(); $("#btnPrint2").click(function() { $("#printForm2").printElement({ printMode:'iframe', overrideElementCSS:['/asset/css/common.css',{ href:'/asset/css/common.css',media:'print'}] }); return false; }); }); </script>