JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과


웹페이지 프린트 에 해당되는 글 1개가 검색 되었습니다.

  1. 2016.09.23 A4 용지 출력

Blog

A4 용지 출력

2016.09.23 11:06 Development/HTML / XHTML


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

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) 로 작성하시는게 정신건강상.. ㅎㅎ

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

하는 경우가 있습니다.





저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment