[CSS] 프린트용 웹페이지 미디어쿼리 설정하기

인쇄용 기본 설정

웹페이지를 프린트 출력용으로 구성하려면 다음처럼 미디어쿼리로 크기와 여백을 설정할 수 있습니다.

다음 프린트용 미디어쿼리는 A4용지용 세로 출력을 위한 일반 설정입니다.

여백 값은 적절히 조정해서 사용하면 됩니다.

@media print {
    body{
        width: 210mm;
        height: 297mm;
        margin: 30mm 45mm 30mm 45mm; /* margin: auto auto; 로 자동 여백 설정도 가능 */
   } 
}

프린트용 미디어 쿼리를 설정할 때는 px, em 등으로 크기, 여백 설정을 해서는 안됩니다.

반드시 mm, cm 단위로 크기를 정해야 1:1 크기로 용지 크기에 맞춰 출력이 됩니다.

웹페이지의 픽셀 환산은 웹브라우저가 알아서 하므로 사용자가 알 필요는 없습니다.

픽셀 단위로 크기를 설정하게 되면 실제 출력하는 프린터 해상도에 따라서 크기가 다르게 나오게 됩니다.

예를 들어 해상도 별로 픽셀 크기를 환산하면 다음과 같습니다.

• 72 dpi (for display) = 595 X 842 pixels
• 300 dpi (print) = 2480 X 3508 pixels
• 600 dpi (high quality print) = 4960 X 7016 pixels

화면용 픽셀 단위로 프린트용 크기를 정하면 고해상도 프린터(요즘은 기본 프린터도 600dpi가 기본)에서는 아주 작은 크기로 인쇄가 됩니다.

인쇄 페이지 나누기

웹페이지를 프린터로 출력할 때, 강제로 페이지가 나누어지도록 CSS로 설정할 수 있습니다.

페이지를 나눌 위치에 다음처럼 CSS를 적용한 태그를 하나 넣습니다.

프린트용 미디어쿼리에서만 사용되므로 화면 보기에서는 아무런 기능을 하지 않습니다.

<div class="page-break"></div>

@media print {
    .page-split { 
        height: 0; 
        margin: 0; 
        border: 0; 
        page-break-before: always; 
    }
}

이렇게 하면 실제 인쇄를 할 때 태그가 있는 위치에서 페이지가 나눠져 인쇄가 됩니다.

불필요한 여백 없애기

웹페이지 좌우에 같은 여백을 지정해 가운데 정렬을 한 레이아웃인 경우 인쇄를 할 때 왼쪽에 여백이 추가로 생기는 문제가 있습니다.

이렇게 불필요한 여백이 있으면, 인쇄하는 웹페이지 내용이 오른쪽으로 밀리면서 잘리는 현상이 발생합니다.

이런 현상을 제거하려면 프린트 미디어 쿼리에 가운데 정렬을 한 레이아웃 CSS 속성을 초기화해서 왼쪽으로 붙도록 추가로 처리를 해야 합니다.