[활용팁] CSS를 이용한 프린트 제어하기(새로운 페이지, 여백 처리하기)

교육

공공정보 2021. 4. 21. 00:14

728x90

CSS를 이용한 프린트 제어하기

웹페이지를 만들다 보면 프린트로 출력할 때가 생긴다..

이럴때 활용 가능한 팁을 소개 한다...

여백주기 예제...

다음은 기본여백에 상단 30미리 여백을 주기 위한 스타일 입니다.

<style type="text/css" media="print">  

    @page{  size:auto; margin-top : 30mm;  }

</style>

마진 탑을 이용하여 상단 여백 3cm 여백을 주었습니다.

결과 이미지..

다음은 왼쪽만 여백 주기..

<style type="text/css" media="print">  

    @page{  size:auto; margin-left : 30mm;  }

</style>

왼쪽 여백 오른쪽은... right

여백은 마진으로 처리 했는데....

새로운 페이지는 어떻게 처리 해야 할까?

간단하게 처리 가능하다...

<div style="page-break-before:always"></div>

다음은 페이지 처리 결과..

이렇게 붙어 있는 내용이 이 스타일을 만나면...

page-break-before:always

새로운 페이지로 이동한다.

예제 소스 다운로드

#CSS #프린트제어 #여백주기 #다음페이지

본 블로그의 글은 공공정보와 개인적 생각의 글 임을 알려드립니다.

또한 오류가 있는 부분이 있으면 댓글로 알려주시기 바랍니다.

감사합니다.