HTML 소스를 사용하여 인쇄영역(페이지)를 나누는 방법. 페이지 분리.

아래에서는 div를 사용하여 block-level element를 지정했지만

<p>, <span>, <br> 태그를 사용해도 됩니다.


.

.

.


출력할 내용1

<div style='page-break-before:always'></div>    <!--여기를 기준으로 앞의 내용이 한 페이지-->


출력할 내용2

<div style='page-break-before:always'></div>    <!--여기를 기준으로 앞의 내용이 한 페이지-->

.
.
.


출력할 내용을 지정한 블록마다 페이지가 설정되어 페이지 나누기를 할 수 있습니다.


page-break-before와 page-break-after, page-break-inside가 있습니다. 

대체적으로 page-break-before를 사용합니다.

page-break-before는 이 엘리먼트가 나오기 전까지의 문자를 한 페이지로 구분합니다.

page-break-after는 이 엘리먼트가 나온 이 후의 문자를 한 페이지로 구분합니다.


각 속성의 의미(대체적으로 always만 사용함)

auto     -    자동으로 계산하도록 지정

always -    뒤에서 항상 분리하도록 지정

avoid    -    뒤에서 절대 분리되지 않도록 지정

left       -    뒤에서 분리된 페이지가 왼쪽 면에 위치하도록 지정

right     -    뒤에서 분리된 페이지가 오른쪽 면에 위치하도록 지정

inherit   -    부모 요소의 값을 상속하도록 지정

 

Posted by 준콩ol 준콩ol

댓글을 달아 주세요

  1. ㅎㅎ 2013.02.21 14:21  댓글주소  수정/삭제  댓글쓰기

    감사합니다.

  2. 소셜데브 2013.10.16 15:05 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.

  3. 김나영 2014.09.04 15:49  댓글주소  수정/삭제  댓글쓰기

    이거 모야, 구글링 해서 들어왔는데ㅋ 이준빈이네.ㅋㅋㅋ

  4. 강동준 2016.05.04 22:16  댓글주소  수정/삭제  댓글쓰기

    하나 궁금해서 댓글남깁니다!
    html게시판에서 글을 작성할때,

    홈페이지 제목칸이 두줄로 설정되어있는상태에서
    글을 작성할때 첫째줄을 꽉 채우지 않은 상태에서 (엔터)기능을 하고
    두번째 줄을 작성하고 싶은데 방법이 없을까요?
    br이나 다른 코딩은 글쓰기 제목창에선 먹히지 않더라구요ㅜㅜ

  5. 해보진 않았지만 2016.10.28 10:46  댓글주소  수정/삭제  댓글쓰기

    최곱니다!! ㄳ!!

  6. js_un_master 2018.11.26 18:54  댓글주소  수정/삭제  댓글쓰기

    역시 호박머리!!

  7. 화방사 2018.12.19 13:02  댓글주소  수정/삭제  댓글쓰기

    화방사 이준빈님은 아니시죠?

  8. 나그네 2018.12.19 17:01  댓글주소  수정/삭제  댓글쓰기

    혹시 <p style='page-break-before:always'></p> 이후에 특정문구를 출력하고 내용이 이어서 출력하고싶은데 어떻게 해야할까요 ?