상장이나 인증서 이미지를 좌우여백없이 깔끔하게 출력하려면?

html로 제작한 파일에서 내부의 이미지 또는 표 부분만 좌우 딱 맞게 출력하고 싶은 경우가 있습니다. 합격증이나 인증서를 출력할 때 자주 이용하게 됩니다.

하지만 css를 조절해주지 않으면 위에는 문서이름이 나오고 좌우 불필요한 여백이 생기는 등 엉망이 될 수 있습니다.

이 때는 스타일 시트 내에 프린트 할 필요 없는 부분은 display:none 처리하고 @media print { } 태그와 @page {} 태그를 이용해 프린트할 부분의 속성을 넣어줍니다.

@media print {
    header, footer {display:none;}
    @page {size:A4 landscape; margin:0; padding:0;}
    <!-- A4 portrait : A4용지 사이즈 세로로 긴 형태 -->
    <!-- A4 landscape: A4용지 사이즈 가로로 긴 형태 --> 
}