css 프린트시 프린트영역 css 수정 및 특정영역 출력 및 감추기

기존에 프린트시에 자바스크립트를 이용하는 방법외 여러가지를 사용해보았지만
css 로 수정하는것이 가장편리 했습니다.
기존에 특정영역에 대해서 css 를 수정해서 사용하면 됩니다.

아래 미디어쿼리를 사용하면서 print 일 경우 처리하는 css 입니다.
브라우저에서 프린트 창이 열렸을 경우 프린트영역의 css 를 수정할 수 있습니다.

display: none 라는 css 를 사용하여 해당 id 나 class 를 숨길 수 있거나
별도로 css 를 수정할 수 있습니다. 프린트 영역에서 수정할 수 있는 css 는 한정적이므로
폰트, 여백등을 설정하는 예제 입니다

@media print{

      /* 아래 breadcrumb-wrap 를 숨깁니다. */

.breadcrumb-wrap {

display: none !important;

}

.top-bar-dark {

display: none !important;

}

#footer{

display: none !important;

}
      /* 사이즈를 100% 늘림 */

.table-print{width:100%;}

      /* 각 테이블 영역에 class 을 p01 부터 ~ p09 까지 별도의 class 의 width 가로 크기를 조정 */

.table{border:1px solid #111; font-size:9px;}

.p01{width:60px;}

.p02{width:60px;}

.p03{width:80px;}

.p04{width:140px;}

.p05{width:80px;}

.p06{width:80px;}

.p07{width:80px;}

.p08{width:80px;}

.p09{width:80px;}

.btn_b01{display: none !important;}

@page { margin: 5px; }

}