Programming/HTML/CSS

프린트 할 때 페이지 나누기

왕계란 2010. 3. 8. 17:31
  1. <html>
  2.     <head>
  3.         <title></title>
  4.         <style type="text/css">
  5.         p.page {
  6.             page-break-before:always;
  7.         }
  8.         </style>
  9.     </head>
  10.     <body>
  11.     <p>페이지 1</p>
  12.     <p class="page">페이지 2</p>
  13.     <p class="page">페이지 3</p>
  14.     <p class="page">페이지 4</p>
  15.     <body>
  16. </html>

프린트 할 때 페이징을 해야 하는 경우가 있다.
뭐 많진 않겠지만 가끔 우리 클라이언트 샛퀴들처럼 300개 가까이 되는 신청서 한꺼번에 인쇄되게 해 달라고 하는 찐따들이 있다.
그런 찐따들을 달래기 위한 게 아닌가 싶다.
사설은 닥치고

코드만 봐도 충분히 이해가 갈 듯하다.
그냥 css 한 줄이면 충분하다.
위 코드를 html 페이지에서 그냥 보면

페이지 1
페이지 2
페이지 3
페이지 4

이렇게만 보이지만 '인쇄 미리 보기'를 하게 되면 페이지가 정상적으로 나누어져 나온다.



FF, IE6에선 정상적으로 확인했지만 IE7에선 아래와 같은 버그(?)가 있습니다.
지금 위처럼 텍스트만 있을 경우엔 페이지가 정상적으로 나누어지지만 테이블이 좀 들어갈 경우엔 페이지가 정상적으로 나누어지지 않네요.