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

 

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

 

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

 

 

 

 

 

예제 소스 다운로드

 

blog.naver.com/spprince/222317261870

 

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

 

---

 

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

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

 

감사합니다.