[CSS] CSS 를 사용한 프린트시 페이지 나눔 처리 방법 page-break-after: always;

Web페이지에서도, Word의 페이지 나눔 처리가 가능합니다.

객체 태그에 style인라인 값으로 style="page-break-after: always;" 추가해주면,

다음 태그부터는 다음 페이지로 인쇄가 됩니다.

 

(예제: CSS 인라인으로 추가)

<table class="table table-sm table-bordered" style="page-break-after: always;">

 

 

[ 웹페이지 화면 ]

상단 테이블 영역과 하단 테이블 영역이 화면에 보일 때는 붙어 보입니다.

페이지 나눔을 할 부분의 객체에 style="page-break-after: always" 를 주면 다음에 오는 객체 부터 다음 페이지에 인쇄가 됩니다.

 

그러나, 인쇄를 하면 다른 페이지로 인쇄가 됩니다.

 

[ 프린트 인쇄 미리보기 ]

크롬의 프린트 미리보기 화면

page-break-after의 CSS를 이용해서, Word의 페이지 나눔 처리가 가능 해집니다.

 

 

또 다른 적용 방법은 인라인 방식이 아니라,

CSS함수 선언하는 방식을 말한다.

CSS	@media print {   footer { page-break-after: always; }  }
HTML	<footer>객체 이후에 페이지 나눔이 발생합니다.

page-break-after: auto | always | avoid | left | right | initial | inherit;