[CSS]웹페이지 인쇄(출력) 레이아웃(가로세로), 배경인쇄 설정 방법

 

HTML+PHP+JAVASCRIPT+CSS

 

 

웹페이지를 구성하다보면 화면이나 구성물(DIV) 내의 내용을 인쇄할 수 있게 하는 버튼을 만들어 출력할 수 있게 기능을 제공하는 경우가 있다. 그런데 인쇄물의 형태가 이미 가로인지 세로인지 정해져있는 경우 미리 설정을 해주게 되면 사용자가 편하게 출력을 할 수 있게 된다.

 

 

스타일 코드는 다음과 같다.

 

 

<style type="text/css"> @media print { /* 인쇄 미디어 설정 */   @page { size:A4 portrait; /* 인쇄용지는 A4로 세로로 지정 */                  margin:0; /* 인쇄용지 안쪽으로의 여백을 지정 */                }   html, body { border:0; margin:0; padding:0; } /* 문서전체 외부 여백을 지정 */    * { -webkit-print-color-adjust: exact; /* 배경이미지와 색상 등 배경그래픽을 강제 출력설정 */          print-color-adjust: exact; } } </style>

 

위 코드가 인쇄되는 부분 내에 위치해서 스타일이 적용되도록 해주면 된다.

 

즉 html파일 전체를 출력하게 될 경우 html과 body 사이에 위치해도 되지만 만약 특정 위치의 div나 외부 파일을 열어 인쇄를 실행할 경우 인쇄가 되는 부분의 코드 내부에 들어가면 적용이 가능하다.

 

div로 지정된 부분을 출력할 경우 Javascript로 넘기는 경우가 있는데 인쇄에 해당 되는 div가 있는 소스 상단에 태그가 위치하면 적용이 가능하다.

 

☞ 위 코드로 지정을 할 경우 미리보기 화면에서 가로세로 레이아웃의 변경과 배경 그래픽의 변경이 불가하게 되는 경우가 있다.

 

 

 

계단밑 화분의 꽃 - 오스테오펄멈, 아프리카데이지, 아프리카금잔화, 디모르포세카