아브아카의 세상 빼꼼 바라보기

Html 페이지 분할 본문

컴퓨터/웹 코딩

Html 페이지 분할

아브아카 2015. 6. 25. 00:11

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>




저작자표시 비영리 변경금지

'컴퓨터 > 웹 코딩' 카테고리의 다른 글

생활코딩 강좌 사이트  (0) 2015.05.31
jw player 스크립트  (0) 2014.09.21
팝업 window.open  (0) 2014.09.21
팝업 리사이즈 자바스크립트  (0) 2014.09.21
'컴퓨터/웹 코딩' Related Articles more