[css] print 영역 지정

프린트에 대한 미디어 쿼리를 이용하고  display:none으로 된 부분은 출력되지 않는다는 것을 활용하면 다음과 같이 하면 된다.

@media print{    
    .no-print{
        display: none !important;
    }
}

no-print 라는 클래스를 프린트 시 출력하고 싶지 않은곳에 넣어주면 끝!

 

그리고 프린트시에만 출력하고 싶은 영역이 있을것이다 

 

@media screen{    
    .print{
        display: none !important;
    }
}

 

화면에 보이지 않지만, print에서는 출력될 것이다.

 

그리고 위에 css처리만으로는 되지 않는 경우가 있을 것이다. 

그때는 javascript로 열심히 짜고 css를 이용하면 된다.  간단한 원리는 print시에 출력 전에 실행되는

window.onbeforeprint와 print후 실행되는 window.onafterprint 메소드를 활용하는 것이다.