선택자(Selector)
Class 선택자
block-level과 inline-level
table
border-collapse
table-layout
스크롤 테이블
마우스 커서
스크롤바 색상
링크 색상
필터
인쇄
@media print
page-break-before
ime-mode
포지셔닝(Positioning)
보다 간단하게 특정 요소를 인쇄 안되게 하는 방법

인쇄용 CSS 파일을 독립적으로 만들지 않고 페이지 내에서 간단하게 특정 요소를 인쇄하지 않도록 하는 방법도 있습니다.

<style type="text/css">
<!--
@media print {
    .advertising {display:none;}
}
//-->
</style>

<div class="advertising">광고</div>

본문

위와같이 HTML 문서를 제작하면 모니터상에서는 광고와 본문이 모두 보여지지만 인쇄화면에서는 광고는 보여지지 않고 본문만 출력이 됩니다.

인쇄미리보기 화면에서도 바로 확인할 수 있습니다.

물론 클래스(.advertising)를 사용하지 않고 앞의 강좌에서처럼 아이디(id)를 사용하여 광고와 메뉴 부분을 인쇄되지 않게 지정할 수 있습니다.

그리고 인쇄화면에서 보여지지 않게 하는 처리외에도 인쇄화면만의 스타일을 달리 적용할 수 있습니다.

즉 인쇄화면에서의 스타일을 지정하기 위해서는 @media print 라는 속성을 사용하여 일반적인 스타일과 구분을 해주는 겁니다.

Copyright © Homejjang.com All rights reserved.