(page-break) 페이지 인쇄(출력) 나누기
<h1 class="docTitle">page-break-after Property</h1>
page-break-after Property는 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는
Property입니다. <br>
page-break-after Property의 경우 페이지 넘김을 지정한 block-level element와 다음 block-level
element 사이를 경계로 페이지를 넘기게 됩니다.
| page-break-after Property | |
| Value | auto | always | avoid | left | right | Inherit |
| Initial | auto |
| Applies to | block-level elements |
| Inherited | no |
| Percentages | N/A |
| Media | visual, paged |
| HTML Syntax | { page-break-after: sBreak } |
| Scripting | object.style.pageBreakAfter [ = sBreak ] |
auto
Default 값으로 사용자의 프린터에 지정된 기본값으로 출력합니다.
- always
page-break 를 지정한 물체 이후에서 항상 페이지 넘김을 합니다.
- avoid
페이지 넘김을 하지 못하게 강제합니다. *Default 처럼 작동합니다.
- left
서로 마주보는 페이지가 되도록 제본하기 위해서 한 두 페이지를 넘긴다고 되어 있지만 always 처럼 작동합니다.
- right
서로 마주보는 페이지가 되도록 제본하기 위해서 한 두 페이지를 넘긴다고 되어 있지만 always 처럼 작동합니다.
CSS Scripting
onClick="object
.style.pageBreakAfter='auto';
이 page-break-after 같은 경우 type selector로 지정하는 방법은 좋지 않습니다. 예를 들어 p{page-break-after:always}와 같이 type selector로 지정하게 되면 모든 P Tag 다음에서 페이지 넘김을 하게 되는데, 어디 P Tag 을 한 페이지에 한 번 밖에 안 쓰겠습니까? 그러므로 class selector 나 id selector 등을 사용하여 원하는 부분에 있는 특정 Tag 에 지정하여 사용합니다.
<html>
<head>
<TITLE>page-break-after Property</TITLE>
<style type="text/css">
<!--
.breakAfter{page-break-after:always;}
-->
</style>
</head>
<body>
<P class="breakAfter">이 문장 다음이 2 페이지가 됩니다.</P>
아래의 수평선 다음 수평선이 3페이지가 됩니다.
<HR class="breakAfter">
<HR>
<br class="breakAfter">
여기가 4페이지로군요. 이렇게 br Tag에 지정해도 됩니다.
</body>
</html>
<div style='page-break-after:always'></div>