CSS로 인쇄 시 추가 공백 페이지 방지

CSS 속성을 사용하여 HTML 문서를 인쇄할 때 추가 공백이 발생하는 문제가 사용자에게 발생할 수 있습니다. 페이지는 의도한 내용 앞이나 뒤에 인쇄됩니다. 이 문제를 해결하려면 다음 해결 방법을 고려하십시오.

한 가지 접근 방식은 항상 값을 갖는 page-break-after 속성을 사용하는 것입니다. 그러나 이로 인해 콘텐츠 앞에 추가 빈 페이지가 나타날 수 있습니다. 이를 방지하려면 page-break-before를 항상으로 설정해 보십시오.

또는 다음과 같이 인쇄 목적으로 특별히 미디어 쿼리를 활용하는 것이 더 효과적인 방법입니다.

@media print {
    html, body {
        height: 99%;    
    }
}

인쇄 미디어 쿼리 내에서 HTML 및 본문 요소의 높이를 99%로 설정하면 추가 페이지가 인쇄될 수 있는 추가 공백을 제거할 수 있습니다.