[html] 웹에서 프린트시 페이지 정확하게 나누어 프린트하기

by 서진우 · 2004년 10월 7일

CSS에서 제공하는 page-break-after와 page-break-before를 주목할 필요가 있다.

이 각각에는 다음과 같은 옵션이 있다.

always | auto | left | right

always : <H2>와 같은 HTML의 어떤 특정 요소를 만나면 강제로 페이지 브레이크 시키

는 속성

auto : 디폴트 속성으로 브라우저가 자동으로 페이지 계산해서 정상적으로 페이지가 끝

나면 페이지 브레이크 시키는 속성

left / right : 모든 브라우저에 적용되는 것은 아니며 프린터가 한 페이지에 두 페이지를

인쇄할 수 있는 기능을 제공할 때 사용할 수 있는 속성으로 왼쪽 페이지 또는 오른쪽 페이

지임을 알려 주는 속성

사용 방법

<HEAD> 태그에 다음과 같은 스타일시트 코드를 넣어 보자.

<STYLE TYPE = “text/css”>

H2 {page-break-before: always}

</STYLE>

위와 같이 적은 코드는 웹 페이지 상에서 <H2> 태그를 만나면 항상 그 전에서 페이지 브

레이크를 일으키라는 뜻이다.

특정 지점에 페이지 브레이크 삽입하기

위와 같이 모든 <H2>를 만났을 때 인쇄되는 것은 원치 않을 때가 있다. 특정 위치에서만

페이지 브레이크가 일爭さ돈?하려면 자신만의 클래스를 만드는 것이 좋다. 다음은 <P>

와 관련된 클래스를 만든 한 예이다.

<STYLE TYPE = “text/css”>

P.breakhere {page-break-before: always}

</STYLE>

이렇게 클래스가 정의되었을 때 아래와 같이 사용하면 된다.

지금 여러분들이 보고 있는 이 페이지에는 2개의 <P

CLASS=”breakhere”>가(사용 방

법, 특정 지점에 페이지 브레이크 삽입하기) 있다. 이 페이지를 한 번 인쇄해 보고 어떤 효

과가 있는지 살펴보기 바란다.

서진우

슈퍼컴퓨팅 전문 기업 클루닉스/ 상무(기술이사)/ 정보시스템감리사/ 시스존 블로그 운영자