HTML문서에서 프린트 설정하기 - @media print CSS 설정 및 @page 사용법

 

오늘은 HTML문서에서의 프린트 설정에 대하여 알아볼게요

웹 페이지를 디자인 할때 Screen 에서 보이는 모습을 CSS로 스타일링 하게 되는데요,

페이지 중 인쇄를 제공해야하는 페이지들은 별도로 인쇄용 CSS를 정의하게 됩니다.

그 방법을 몇가지 소개해볼게요

 

1. CSS 파일 내부에서 @media로 프린트 css 지정하기

css 내부에서 사용할때에 할 수 있는 방법입니다.

아래 코드를 보면 @media print 구문을 이용하여 프린트할때에 문서의 배경색과 글자색을 변경하고 있습니다.

 

* { margin:0;padding:0}
body { background-color:black; color:#fff;}
p {
    line-height:2;
    max-width:800px;
    margin:0 auto;
}

@media print {
  	@page { /* 모든 페이지 공통 */
        margin:2cm;
    }

    @page:first { /* 첫번째 페이지에만 적용됨 */
        margin:0 1cm;
    }
    
    body {
        background-color:transparent;
        color:#000;
    }
  
}

 

 

2. CSS 파일을 분리하여 적용하는 경우

만약 screen.css 와 print.css 이렇게 파일이 두개로 분리가 되어있다면 파일자체를 HTML문서에 연결할때 미디어를 지정할 수 있습니다.

<!-- screen용 css -->
<link rel="stylesheet" href="./print.css" media="screen"> 


<!-- print용 css -->
<link rel="stylesheet" href="./print.css" media="print">

@charset "utf-8";

/* print.css */

body {
    background-color:transparent;
    color:#000;
}
@page {
    margin:2cm;
}

@page:first {
    margin:0 1cm;
}

 

3. Style tag에 직접적는 경우

아래와 같이 지정할 수는 있지만, 잘 사용하지 않습니다.

<style media="print">
	body { color:#000; background-color:transparent; }
</style>