page-break-before Property

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

page-break-before Property

page-break-before Property는 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정하는 Property입니다. page-break-before Property의 경우 페이지 넘김을 지정한 block-level element와 이전 block-level element 사이를 경계로 페이지를 넘기게 됩니다.

[표 보는 방법]

page-break-before 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-before: sBreak }
Scripting	object.style.pageBreakBefore [ = sBreak ]

auto
Default 값으로 사용자의 프린터에 지정된 기본값으로 출력합니다.

always
page-break 를 지정한 물체 이전에서 항상 페이지 넘김을 합니다.

avoid
페이지 넘김을 하지 못하게 강제합니다. *Default 처럼 작동합니다.

left
서로 마주보는 페이지가 되도록 제본하기 위해서 한 두 페이지를 넘긴다고 되어 있지만 always 처럼 작동합니다.

right
서로 마주보는 페이지가 되도록 제본하기 위해서 한 두 페이지를 넘긴다고 되어 있지만 always 처럼 작동합니다.

CSS Scripting

onClick="object.style.pageBreakBefore='auto';"

예제

이 page-break-before 같은 경우 type selector로 지정하는 방법은 좋지 않습니다. 예를 들어 p{page-break-before:always}와 같이 type selector로 지정하게 되면 모든 P Tag 이전에서 페이지 넘김을 하게 됩니다. 그러므로 class selector 나 id selector 등을 사용하여 원하는 부분에 있는 특정 Tag 에 지정하여 사용합니다.

입력

<HTML>
    <HEAD>
        <TITLE>page-break-before Property</TITLE>
    <STYLE type="text/css">
    <!-- 
    .breakBefore{page-break-before:always;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <HR>
        <P class="breakBefore">이 문장 위의 수평선이 1 페이지가 됩니다.</P>
        여기 까지가 2페이지가 됩니다.
        <HR class="breakBefore">
        여기 까지가 3페이지가 됩니다.
        <BR class="breakBefore">
        여기가 4페이지로군요. 이렇게 BR Tag에 지정해도 됩니다.
    </BODY>
</HTML>

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

Top

Back

New

검색