page-break-after Property

Home > Document > CSS > Printing > page-break-after

page-break-after Property

page-break-after Property는 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 Property입니다. 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>

위의 소스에서 보는 바와 같이 <HR> 이나 <BR> 같은 Tag에 지정해도 상관 없습니다. 위의 소스를 복사해서 붙여넣기 하여 브라우저로 실행하고 파일 / 인쇄 미리보기(V) 를 하면 4개의 페이지로 분할 된 것을 확인 할 수 있습니다.

Top

Back

New

검색