[CSS] print css, html 프린트 인쇄 화면 개선

print 화면의 css를 따로 지정할 수 있습니다.

 

1. 기본 

@media print

@media print {
}

프린트용 css는 미디어 쿼리를 사용합니다.

 

2. 사용방법

@media print {
h1 {font-size:25px;}
.hide {display:none;}
body {background:#fff;}
}

사용방법은 간단합니다. 기존의 css를 사용하는 것처럼 스타일을 적용시켜주면 됩니다.

프린트에서 숨겨질 부분은  display:none 처리를 해주면 됩니다.

 

3. 인쇄 페이지 영역 분할

 

html

<div class="section">1페이지</div>
<div class="section">2페이지</div>
<div class="section">3페이지</div>

 

css

.section{page-break-before:always;}

 

원하는 영역을 선택하여 인쇄할 페이지를 나누고 싶을 때,

class를 주어 영역을 잡고 page-break-before:always; 로 css구문을 추가해주면 됩니다.