2013. 11. 1.

HTML STYLE CSS 인쇄시 페이지 기본 여백 설정하기.

이전 포스트에서 크롬과 익스플로러에서 각각 인쇄 미리보기 페이지가 팝업 되게 하는 자바스크립트 소스를 봤었습니다. 각각 띄워놓고 보니 여백이 달라서 다른 페이지 처럼 보입니다.

인쇄가 될때 문서의 기본 여백을 설정해 줘야 겠습니다. 간단 하네요.
인쇄하고자 하는 페이지에서 아래와 같이 style 태그를 추가해 줍니다.
<style type="text/css" media="print">   
    @page{  size:auto; margin : 15mm;  }
</style>
크롬 인쇄 미리보기에서 여백이 '기본값' 일때 저 값이 적용 되네요.
익스플로러에서 여백이 제대로 들어가나 확인해보니 19mm가 되있더군요. 적용이 안되나 싶어서 여백 설정 창에서 확인을 눌러보니 문서 내 여백이 커집니다. 이미 15mm로 적용이 되어 있었던 겁니다.

여백값은 margin 값을 변경해 주면 됩니다.

꿀같은 출처는 역시 스택오버플로우.
http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page

댓글 없음 :

댓글 쓰기