맛집 여행 캠핑 일상 생활

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

HTML.CSS

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

영은파더♥ 2016. 3. 25. 11:03

웹페이지 프린터 출력 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 는 다음 페이지로 넘긴다는 의미이다.


'HTML.CSS' 카테고리의 다른 글

CSS text-overflow 속성  (0) 2016.05.03
CSS word-break 속성  (0) 2016.05.03
HTML PHP 폼메일 소스  (61) 2016.04.26
HTML CSS 크기 단위  (0) 2016.04.20
HTML/CSS Layer 특정위치에 고정시키기  (0) 2016.03.21
Trackback : | Comments :