Web/WEB기본

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

saltdoll 2015. 8. 28. 08:51
반응형

프린트 할때, 특정 영역 출력되지 않게 하는 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 TypeDescription
allUsed for all media type devices
auralUsed for speech and sound synthesizers
brailleUsed for braille tactile feedback devices
embossedUsed for paged braille printers
handheldUsed for small or handheld devices
printUsed for printers
projectionUsed for projected presentations, like slides
screenUsed for computer screens
ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals
tvUsed for television-type devices


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

반응형