반응형
웹페이지에서 프린트 출력할때 유용합니다.
HTML
<page size="A4">
<h1>A4 용지 세로 1 이어서</h1>
</page>
<page size="A4">
<h1>A4 용지 세로 2 이어서</h1>
</page>
<hr is-divide="true">
<page size="A4" is-divide="true">
<h1>A4 용지 세로 1 분리</h1>
</page>
<page size="A4" is-divide="true">
<h1>A4 용지 세로 2 분리</h1>
</page>
<page size="A4" layout="portrait">
<h1>A4 용지 가로</h1>
</page>
<page size="A5">
<h1>A5 용지 세로</h1>
</page>
<page size="A5" layout="portrait">
<h1>A5 용지 가로</h1>
</page>
<page size="A3">
<h1>A3 용지 세로</h1>
</page>
<page size="A3" layout="portrait">
<h1>A3 용지 가로</h1>
</page>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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/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;
}
}
</style>
<title>Page Print Example</title>
</head>
<body>
<page size="A4">
<h1>A4 용지 세로 1 이어서</h1>
</page>
<page size="A4">
<h1>A4 용지 세로 2 이어서</h1>
</page>
<hr is-divide="true">
<page size="A4" is-divide="true">
<h1>A4 용지 세로 1 분리</h1>
</page>
<page size="A4" is-divide="true">
<h1>A4 용지 세로 2 분리</h1>
</page>
<page size="A4" layout="portrait">
<h1>A4 용지 가로</h1>
</page>
<page size="A5">
<h1>A5 용지 세로</h1>
</page>
<page size="A5" layout="portrait">
<h1>A5 용지 가로</h1>
</page>
<page size="A3">
<h1>A3 용지 세로</h1>
</page>
<page size="A3" layout="portrait">
<h1>A3 용지 가로</h1>
</page>
<script type="text/javascript">
window.onload = function() {
window.print();
};
</script>
</body>
</html>아 구글링 중에 설명을 깔끔하게 잘 해주신 분입니다.
http://noveloper.github.io/blog/css/2015/04/12/how-to-divide-print-space.html
추가적으로 확인해야 하는 부분은
프린트도 크로스 브라우징 검증 작업은 필요합니다.
인터넷 익스플로러도 감안해서 폰트는 포인트(pt) 로 작성하시는게 정신건강상.. ㅎㅎ
그리고 인터넷 익스플로러에서는 상황에 따라 페이지 설정을 브라우저 기능 설정단에서 바꾸어줘야
하는 경우가 있습니다.
반응형
'Development > HTML' 카테고리의 다른 글
| 웹표준!! 이제는 div (0) | 2013.05.30 |
|---|---|
| 웹표준가이드(11)/테이블(Table) (0) | 2013.05.30 |
| 웹표준가이드(10)/박스모델(Box Model) (0) | 2013.05.30 |
| 웹표준가이드(9)/List (ul, ol, dl, dt, dd) (0) | 2013.05.29 |
| 웹표준가이드(8)/css 레이아웃기초-2 (0) | 2013.05.29 |
댓글