HTML 인쇄 잘림 - HTML inswae jallim

인터넷을 돌아다니면서 원하는 자료나 어떤 내용을 내컴퓨터에 저장하고 싶거나 인쇄를 해서 보관하고 싶을 때나, 보고서(리포트) 등을 HTML 형태로 작성해서 인쇄하고자 할 경우가 있을 것이고 이 경우 보통 원하는 자료나 내용을 프린트 할 때에는 윈도우 창 메뉴의 인쇄명령 버튼을 클릭해 인쇄를 하게 됩니다. 인쇄를 하다가 보면 그리 길지 않는 한장의 용지에 다 출력될 것 같은데 많은 공백들로 인해 다음장으로 넘어가 인쇄가 되는 경우가 많이 있습니다. 또는 사용자가 인쇄할 수 있도록 해 놓거나 보고서 등을
만들 때 이런 점을 감안해 적당한 길이씩 한페이지 한페이지씩 나누어 따로따로 인쇄하도록 해놓는 경우도 있습니다.
여기서 팁으로 알아볼 것은 일일이 여백조정이나 인쇄상태에 맞춰 일일이 한페이지씩 만들어 놓는 불편이 없이 프린트 제어속성을 이용해 하나의 HTML 문서에 내용을 모두 작성하고 간편하게 일정 부분씩 나누어 인쇄가 되도록 하는 방법을 익혀봅니다.
참고로 이전에 올려드린(카페의 경우 155번 목록) "선택한 내용만 프린터로 부분 인쇄하기(스크립트)" 팁은 자바스크립트를 이용한 블럭별 프린트 방법이고, 여기서는 CSS 프로퍼티를 이용한 방법임을 참고하세요.

page-break-before Property 와 page-break-after Property

CSS에서의 프린트 제어 Property(속성)으로 page-break-before Property 와 page-break-afterProperty 두 속성이 있습니다.
page-break-before Property 는 이 블럭이 지정된 부분의 바로 뒤부터 인쇄 페이지를 바꾸어 주는 것이고, page-break-after Property 는 이 블럭이 지정된 바로 앞에서 페이지를 바꾸어 주는 것입니다. 이것은 테이블처럼 블럭(Block ; 박스)속에 인쇄할 내용들을 설정해 두고 박스의 앞이나 뒤의 내용을 다음 페이지로 넘기는 것입니다.

HTML	{ page-break-after : sBreak } 또는 { page-break-before : sBreak }
Script code	object.style.pageBreakAfter [ = sBreak ] 또는 object.style.pageBreakBefore [ = sBreak ]

※ 위에서 sBreak 는 속성의 값(Value)을 의미하며 아래와 같은 값을 가진다.

속성값(Value)	속성의 기능(의미)
auto	Default(기본)값으로 사용자의 프린터에 지정된 기본값으로 출력해 준다.
always	page-break 를 지정한 대상 이전에서 항상 페이지를 넘김(다음 페이지에 인쇄).
avoid	페이지를 넘기지 못하도록 함.(Default 기능처럼 작동)
left	always 속성의 기능과 같음.
right	always 속성의 기능과 같음.
Inherit	특정 대상으로부터 상속받는 값

<P> , <br> , <hr> , <div> , <span> ...

아래 예제와 같이 스타일 또는 스크립트로 정의한 다음 프린트 될 내용속에 <태그 class="클래스명" > 또는
<태그 ID="아이디명"> 형태로 삽입해 준다.
예시 ☞ <br class="클래스명"> , <P ID="아이디명"> ... </P>

긴 내용을 여러 페이지로 나누어 인쇄 시키고자 할 때 위의 태그들을 한페이지 정도 길이의 내용마다 하나씩 정의해 줍니다.

※ 스타일(CSS) 또는 스크립트로 정의하는 방법

스타일(CSS) 정의	<style type="text/css"> <!-- .BreakBefore { page-break-before: always; } --> </style>	<style type="text/css"> <!-- .BreakAfter { page-break-after: always; } --> </style>
<P class="BreakBefore"> 인쇄내용.. </P>	<P class="breakAfter"> 인쇄내용.. </P>