에티테마

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

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 368회 작성일 20-09-22 00:50

본문

기존에 프린트시에 자바스크립트를 이용하는 방법외 여러가지를 사용해보았지만
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; }


}

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

카테고리

카테고리
 질문답변
팁게시판
 영카트팁
 라이브러리

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트