웹페이지 프린터 출력 CSS STYLE 예제

웹페이지 프린터 출력 CSS STYLE 예제

웹에서 특정 영역 출력 안되게 하기, 인쇄여백 정하기, 강제 페이지 나눔 등에 대해서 알아보자.

프린트 하면 약간의 오차는 있다.

▶ 출력을 위한 HTML/CSS 예제

<style type="text/css">

@media print {

@page {

size:auto;

margin-top:2.5cm;

margin-right:2cm;

margin-bottom:1.5cm;

margin-left:2cm;

}

html, body { border:0; margin:0; padding:0; }

#printable { display:block; }

#non-printable { display:none; }

div .breakhere { width:auto;height;0px;page-break-before:always;line-height:0px; }

}

</style>

<div id="non-printable">

여기는 출력이 안되는 영역

</div>

<div id="printable">

여기는 출력이 되는 영역

</div>

<div class="breakhere">&nbsp;</div><!-- 페이지 나눔 -->

<div id="printable">

두번째 페이지

</div>

▶ @media print 설명

⊙ page size

auto, landscape, portrait, 길이를 넣을 수 있다. 길이는 A4 사이즈라면 21cm 29.7cm 를 적어주면 된다.

인치도 가능하다. 인치는 8.3in 11.7in 이런형태로 입력하면 된다.

⊙ margin 은 한번에 적어도 되고 풀어서 적어도 된다.

한번에 하는 방법은 margin: 2.5cm 2cm 1.5cm 2cm; 이렇게 하면 된다.

⊙ 출력영역 지정

<div id="printable">출력될 부분</div>

css 에서 #printable { display:block; } 으로 되어 있어서 출력이 된다.

⊙ 출력안되게 하기

<div id="non-printable">출력이 안되는 부분</div>

css 에서 #non-printable { display:none; } 으로 되어 있어서 출력이 안된다.

⊙ 페이지 나눔

<div class="breakhere">&nbsp;</div>

div .breakhere 클래스에 css로 page-break-before:always 는 다음 페이지로 넘긴다는 의미이다.