[CSS] Print시 출력되지 않게 하는 CSS , 출력 할때만 나오게하기

프린트 할때, 특정 영역 출력되지 않게 하는 CSS 방법

아래의 class="no-print"한 영역은 출력이 되지 않는다.

[ CSS 영역 ]

@media print

{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

[ HTML 영역 ]

<div class="no-print"><button value="print"></div>

참고: http://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page

[ Chrome에서 Print 옵션에 Headers and footers 없애기 ]

@page { margin: 0; }으로 주게 되면, 해당 옵션이 없어집니다.

@media print
{
    .no-print, .no-print * {
        display: none !important;
    }
    @page { margin: 0; }/* for 크롬 Headers and footers 없애기 */

}

<th style="text-align: center" class="no-print">Count</th>



또는
@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

- Chrome Print화면에 설정 

기본 옵션 (@page 설정 없을때)	설정 변경됨 (@page설정 있을때)

참고: http://stackoverflow.com/questions/8228088/remove-header-and-footer-from-window-print

[ Print 할때만 출력되기 ]

@media screen { .hidden_obj { display: none; } }

<h5 class="hidden_obj"><b>[ DAILY REPORT ]</b></h5>

@media CSS

@media screen {
    p {
        font-family: verdana, sans-serif;
        font-size: 17px;
    }
}

@media print {
    p {
        font-family: georgia, serif;
        font-size: 14px;
        color: blue;
    }

}

Other Media Types

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices

참고: http://www.w3schools.com/css/css_mediatypes.asp