웹 페이지 인쇄 형식 설정 요약

작성 자: wasw100 주소: http://www.wasw100.com/html_js_css/page_print_summary.html
 
 1. 페이지 문자 추가
 

.page_break{
	page-break-after:always;
}

 페이지 를 나 눌 때 추가: < div class = "page break" > < / div >
 
2. 각 브 라 우 저 디 스 플레이 효 과 를 최대한 일치 시 키 기 위해 추가
 

*{
	margin:0;
	padding:0;
}

 
3. A4 세로 인쇄, 브 라 우 저 디 스 플레이 와 인쇄 효과 차이 가 크 지 않 습 니 다. body 의 폭 을 설정 합 니 다.
 

body{
	width:640px;
	font-size:12px;
}

 
 
4. css 는 스타일 제어 에 능 하고 table 은 형식 표시 에 능 합 니 다.css 수식 테이블
참고 글: http://www.w3schools.com/css/css_table.asp
Table 테두리 추가
 

table{
	border-collapse:collapse;
}
table, th, td{
	border:1px solid #000000;
}

 한 페이지 에 여러 개의 table 이 있다 면 이 table 은 다른 table 형식 과 약간 다 르 므 로 아래 방법 을 사용 할 수 있 습 니 다.
 

<div id="t1">
  <table>
    <tr>
      <th scope="col">&nbsp;</th>
    </tr>
  </table>
</div>

 css 에서 다른 형식 제어
 

#t1 table{
	width:640px;
}
#t1 table,#t1 th,#t1 td{
	text-align:center;
}

 
 5. 인쇄 시 표시 할 지 여부 제어
 

@media print{<!--      ，        -->            
  .print   {display:block;}      
  .notPrint {display:none;}      
}

 html 에 css: < link rel = "stylesheet" type = "text / css" media = "screen" href = "styles / basic. css" / > 를 도입 합 니 다.
 media = "screen", 시 media = "print" 는 각각 브 라 우 저의 형식 을 제어 하거나 인쇄 할 때의 형식 을 대표 합 니 다. media 속성 을 쓰 지 않 으 면 css 는 브 라 우 저 디 스 플레이 를 제어 할 뿐만 아니 라 인쇄 디 스 플레이 를 제어 합 니 다.
 
그래서 위의 css 는 인쇄 를 단독으로 제어 합 니 다.
 
-- 문자 간격 줄 간격

.space{
	word-spacing:20px;
	letter-spacing:20px;
	line-height:60px;
}

 
 
 
 
--EOF--