A4 용지 출력

A4 용지 출력

웹페이지에서 프린트 출력할때 유용합니다.

HTML

A4 용지 세로 1 이어서

A4 용지 세로 2 이어서

---

A4 용지 세로 1 분리

A4 용지 세로 2 분리

A4 용지 가로

A5 용지 세로

A5 용지 가로

A3 용지 세로

A3 용지 가로

CSS

body { background: rgb(204,204,204); } page { background: white; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } page[size="A4"] { width: 21cm; height: 29.7cm; } page[size="A4"][layout="portrait"] { width: 29.7cm; height: 21cm; } hr[is-divide="true"] { height:0; margin:0; padding:0; border:none !important; } [is-divide="true"] { page-break-after: always; } page[size="A3"] { width: 29.7cm; height: 42cm; } page[size="A3"][layout="portrait"] { width: 42cm; height: 29.7cm; } page[size="A5"] { width: 14.8cm; height: 21cm; } page[size="A5"][layout="portrait"] { width: 21cm; height: 14.8cm; } @media print { body, page { margin: 0; box-shadow: 0; } }

JAVASCRIPT

window.onload = function() { window.print(); };

Inline HTML Full Code

A4 용지 세로 1 이어서

A4 용지 세로 2 이어서

---

A4 용지 세로 1 분리

A4 용지 세로 2 분리

A4 용지 가로

A5 용지 세로

A5 용지 가로

A3 용지 세로

A3 용지 가로

아 구글링 중에 설명을 깔끔하게 잘 해주신 분입니다.

http://noveloper.github.io/blog/css/2015/04/12/how-to-divide-print-space.html

추가적으로 확인해야 하는 부분은

프린트도 크로스 브라우징 검증 작업은 필요합니다.

인터넷 익스플로러도 감안해서 폰트는 포인트(pt) 로 작성하시는게 정신건강상.. ㅎㅎ

그리고 인터넷 익스플로러에서는 상황에 따라 페이지 설정을 브라우저 기능 설정단에서 바꾸어줘야

하는 경우가 있습니다.

from http://www.jkun.net/554 by ccl(A)