Html 페이지 분할
HTML 로 구성된 페이지를 프린트 시 일정 영역을 기준으로 페이지 분할이 필요한 경우 이용할 수 있는 방법을 소개합니다.
아주 간단하게 한줄의 코드를 삽입하는 것으로 처리가 가능하다.
<div> <span> <p> <br> 의 테그를 사용하여 일정 영역이나 기준을 지정하고 해당 테그에 다음의 style 을 삽입한다.
<div style='page-break-before:always'>
<!-- 출력할 내용 -->
</div>
<!-- 여기를 기준으로 뒤의 내용이 한페이지(실제 한페이지가 아닌 새 페이지라 보면 됨 -->
OR
<!-- 여기를 기준으로 앞의 내용이 한페이지(실제 한페이지가 아닌 새 페이지라 보면 됨 -->
<div style='page-break-after:always'>
<!-- 출력할 내용 -->
</div>
적용가능한 style 은 다음과 같습니다.
page-break-before
page-break-after
page-break-inside
각 style 의 세부 속성은 다음과 같습니다.
auto :: 디폴트 속성으로 브라우저가 자동으로 페이지 계산해서 정상적으로 페이지가 끝나면 페이지 브레이크 시키는 속성
always :: <H2>와 같은 HTML의 어떤 특정 요소를 만나면 강제로 페이지 브레이크 시키는 속성
avoid :: 뒤에서 절대 분리되지 않도록 지정
left :: 모든 브라우저에 적용되는 것은 아니며 프린터가 한 페이지에 두 페이지를 인쇄할 수 있는 기능을 제공할 때 사용할 수 있는 속성으로 왼쪽 페이지을 알려 주는 속성
right :: 모든 브라우저에 적용되는 것은 아니며 프린터가 한 페이지에 두 페이지를 인쇄할 수 있는 기능을 제공할 때 사용할 수 있는 속성으로 오른쪽 페이지임을 알려 주는 속성
inherit :: 부모 요소의 값을 상속하도록 지정
위의 CSS 를 잘 사용하면 페이지 프린트 시 편리하게 개발이 가능합니다.
출력할 내용1
<div style='page-break-before:always'></div> <!--여기를 기준으로 앞의 내용이 한 페이지-->
출력할 내용2
<div style='page-break-before:always'></div> <!--여기를 기준으로 앞의 내용이 한 페이지-->
프린트 버튼 만들기
<html>
<head>
<title>Print Test</title>
</head>
<body>
<h1>Print Test</h1>
<input type="button"
onClick="window.print()"
value="Print This Page"/>
</body>
</html>