Print용 CSS 설정

 

@media print

인쇄 시 적합한 출력을 위해, 인쇄 페이지용 미디어 쿼리를 사용하여 출력 시 변경되는 섹션을 명시해야 합니다. 미디어쿼리는 인쇄될 내용에 맞게 화면을 설정할때 사용하는 것으로 생각하시면 됩니다.

 

@media print { }

 

배경출력을 위한 설정

인쇄 시, background속성(background-image, background-color)를 강제로 보이게 지정

 

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

 

화면분할

page-break 속성은 더 이상 권장되지 않고 있으며, 대신 break-before, break-after, break-inside와 같은 속성들이 CSS3에서 도입되었습니다.

 

break-before

break-before 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용됩니다. 이는 요소 앞에 어떤 종류의 페이지, 열 또는 영역 분할이 발생할지 지정합니다.

 

예를 들어, 항상 요소 앞에서 새 페이지를 시작하려면 break-before: page;를 사용할 수 있습니다.

 

h2 {
    break-before: page;
}

 

위의 CSS는 h2 요소 앞에서 항상 새 페이지를 시작하도록 합니다.

 

break-after

break-after 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용됩니다. 이는 요소 뒤에 어떤 종류의 페이지, 열 또는 영역 분할이 발생할지 지정합니다.

 

예를 들어, 항상 요소 뒤에서 새 페이지를 시작하려면 break-after: page;를 사용할 수 있습니다.

 

h2 {
    break-after: page;
}

 

break-before, break-after 속성은 다음과 같은 값들을 가질 수 있습니다

• `auto`: 자동 분할. 기본 값.
• `avoid`: 가능한 분할을 하지 않음.
• `always`: 항상 분할함.
• `left`: 페이지를 눕혀서 출력할 때, 요소 앞에 항상 왼쪽 페이지를 만들기.
• `right`: 페이지를 눕혀서 출력할 때, 요소 앞에 항상 오른쪽 페이지를 만들기.
• `page`, `column`, `region`: 새 페이지, 새 열, 새 영역을 강제로 시작.

 

break-inside

break-inside 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용됩니다. 이는 요소 내부에서 어떤 종류의 페이지, 열 또는 영역 분할이 발생할지 지정합니다.

이 속성을 사용하면 요소가 페이지나 열, 영역 경계에서 나뉘지 않도록 할 수 있습니다. 예를 들어, 페이지나 열 분할을 가능한 한 피하려면 break-inside: avoid;를 사용할 수 있습니다.

 

p {
    break-inside: avoid;
}

 

위의 CSS는 단락 내에서 페이지 또는 열 분할이 가능한 한 발생하지 않도록 합니다.

 

break-inside 속성은 다음과 같은 값들을 가질 수 있습니다:

• auto: 자동 분할. 기본 값.
• avoid: 가능한 분할을 하지 않음.
• avoid-page: 페이지 분할을 피하기.
• avoid-column: 열 분할을 피하기.
• avoid-region: 영역 분할을 피하기.

 

@page

@page는 인쇄용 문서의 페이지 속성을 지정할 때 사용하는 규칙입니다.

size, margin, marks, bleed, orphans, widows 등과 같은 여러 가지 속성을 포함할 수 있습니다.

인쇄되는 페이지의 모양과 크기를 지정하는 데 사용됩니다.

 

@page를 통해 적용되는 CSS는 기존 화면이 아닌 인쇄될 종이에만 적용됩니다.

 

다음은 @page 속성의 예입니다.

 

@page {
    size: A4;
    margin: 1cm;
    margin-top: 2cm;
    margin-bottom: 2cm;
}

 

위의 예제에서는 A4 용지 크기를 사용하고, 모든 여백을 1 cm로 설정하고, 상단 여백을 2 cm로 설정하고, 하단 여백을 2 cm로 설정합니다.

 

@page 규칙은 다음과 같은 선택자를 사용하여 적용할 수 있습니다.

• @page :first: 문서의 첫 페이지에 대한 규칙을 정의합니다.
• @page :left: 왼쪽 페이지에 대한 규칙을 정의합니다.
• @page :right: 오른쪽 페이지에 대한 규칙을 정의합니다.
• @page :blank: 빈 페이지에 대한 규칙을 정의합니다.

예를 들어, 문서의 첫 페이지에만 헤더와 푸터를 추가하려면 다음과 같이 @page :first 선택자를 사용할 수 있습니다.

 

@page :first {
    margin-top: 1in;
    margin-bottom: 1in;
    @top-center {
        content: "Header for first page";
    }
    @bottom-center {
        content: "Footer for first page";
    }
}

 

위의 예제에서는 첫 페이지의 상단 여백과 하단 여백을 1 인치로 설정하고, 상단 중앙에 "Header for first page"라는 내용의 헤더를 추가하고, 하단 중앙에 "Footer for first page"라는 내용의 푸터를 추가합니다.

• @top-left: 페이지의 왼쪽 상단에 위치하는 콘텐츠를 지정합니다.
• @top-right: 페이지의 오른쪽 상단에 위치하는 콘텐츠를 지정합니다.
• @bottom-left: 페이지의 왼쪽 하단에 위치하는 콘텐츠를 지정합니다.
• @bottom-right: 페이지의 오른쪽 하단에 위치하는 콘텐츠를 지정합니다.
• @left-top: 페이지의 상단 왼쪽에 위치하는 콘텐츠를 지정합니다.
• @left-bottom: 페이지의 하단 왼쪽에 위치하는 콘텐츠를 지정합니다.
• @right-top: 페이지의 상단 오른쪽에 위치하는 콘텐츠를 지정합니다.
• @right-bottom: 페이지의 하단 오른쪽에 위치하는 콘텐츠를 지정합니다.

 

@page에서 사용 가능한 CSS 속성 중 일부는 다음과 같습니다

• size: 페이지 상자의 크기를 지정합니다. auto, portrait, landscape와 같은 값과 A4, B5, letter와 같은 구체적인 길이를 사용할 수 있습니다.
• margin: 페이지 상자의 여백 영역을 지정합니다. 하나, 두 개 또는 네 개의 값 중 하나를 사용하여 모든 면 또는 특정 면에 대한 여백을 지정할 수 있습니다.
• marks: 페이지 상자 외부에 출력할 크롭 및/또는 등록 마크를 지정합니다.
• bleed: 페이지 상자의 bleed 영역을 지정합니다.

이러한 속성은 인쇄된 페이지의 레이아웃과 모양을 정의하는 데 사용됩니다. @page 규칙은 인쇄 스타일 시트에서만 사용되며 HTML 문서에 직접 적용되지 않습니다.

 

@page {
    size: auto | portrait | landscape | A4 | B5 | letter | 6in 9in;
    margin: 1cm;
    marks: crop | cross;
    bleed: 3mm;
}

 

size

auto

사용자 에이전트는 페이지의 크기를 결정합니다. 대부분의 경우 대상 시트의 치수와 방향이 사용됩니다.

landscape

페이지의 콘텐츠는 가로 모드로 표시됩니다(예: 상자의 가장 긴 면이 가로).

portrait

페이지의 내용은 세로 모드로 표시됩니다(예: 상자의 가장 긴 면이 세로임). 이것이 기본 방향입니다.

<length>

모든 길이 값( 참조 https://developer.mozilla.org/en-US/docs/Web/CSS/length).

첫 번째 값은 페이지 상자의 너비에 해당하고 두 번째 값은 높이에 해당합니다. 하나의 값만 제공되면 너비와 높이 모두에 사용됩니다.

<page-size>

A5 : ISO 치수인 148mm x 210mm와 일치합니다.

A4 : ISO 치수인 210mm x 297mm와 일치합니다. (개인 인쇄용으로 가장 자주 사용되는 치수)

A3 : ISO 치수인 297mm x 420mm와 일치합니다.

B5 : ISO 치수인 176mm x 250mm와 일치합니다.

B4 : ISO 치수인 250mm x 353mm와 일치합니다.

JIS-B5 : JIS 표준 치수인 182mm x 257mm에 해당합니다.

JIS-B4 : JIS 표준 치수인 257mm x 364mm에 해당합니다.

letter : 북미의 편지지 크기, 즉 8.5in x 11in에 해당합니다.

legal : 8.5인치 x 14인치와 같이 북미 지역의 legal 문서 크기와 동일합니다.

ledger : 북미의 ledger 페이지 크기, 즉 11in x 17in에 해당합니다.

 

marks

crop

페이지 상자의 경계를 보여주는 크롭 마크를 지정

cross

인쇄 판을 정렬하는 데 도움이 되는 Registraion 마크를 지정

 

bleed

여백, 도련이라고 불리우는 인쇄영역 밖의 여백을 말합니다.

도련이란, 바탕색이 있는경우 편집을 더 넓게하여 제본시 버리는 부분을 말합니다. 즉 재단 여유분을 말하며 3mm가 기본값입니다.

 

@page {
  size: letter;
  margin: 1cm;
  bleed: 3mm;
}

 

인쇄되는 페이지의 크기를 letter로 설정하고, 모든 여백을 1cm로 지정하며, bleed 영역을 3mm로 설정합니다.

@page에서 bleed 속성을 설정하면, 출력 가능한 영역 외부에 배경이나 이미지가 확장될 수 있는 영역을 정의합니다. 이는 페이지의 가장자리까지 확장되는 이미지나 색상과 같은 요소가 있는 디자인에 유용합니다.

bleed 영역을 정의함으로써 이러한 요소들이 종이의 가장자리까지 인쇄되고 올바르게 잘리도록 할 수 있습니다.

 

함께 사용하기

@media print 규칙은 내용이 인쇄될 때 적용해야 할 스타일을 지정하는 데 사용됩니다. 이는 네비게이션 바나 상호 작용하는 요소와 같은 인쇄 버전에서 필요하지 않은 요소를 숨기기 위해 사용할 수 있습니다. 또한 인쇄 버전에 특정한 글꼴, 크기 및 기타 스타일을 설정하는 데 사용될 수 있습니다.

 

/* 화면용 스타일 */
body {
    font-family: Arial, sans-serif;
    background-color: #eee;
}

/* 인쇄용 스타일 */
@media print {
    body {
        font-family: Times, "Times New Roman", serif;
        background-color: #fff;
    }

    nav, .no-print {
        display: none; /* 네비게이션과 원치 않는 요소 숨기기 */
    }
}

 

body {
    font-family: Arial, sans-serif;
    background-color: #eee;
}

@media print {
    body {
        font-family: Times, "Times New Roman", serif;
        background-color: #fff;
    }

    nav, .no-print {
        display: none; /* 네비게이션과 원치 않는 요소 숨기기 */
    }
}

@page {
    size: A4;      /* 페이지의 크기 설정 */
    margin: 2cm;   /* 페이지의 여백 설정 */
}

@page :first { /* 첫 페이지의 스타일 */
    margin-top: 4cm;
}

 

이 예제에서 내용은 화면과 인쇄시 다르게 표시됩니다.

 

화면에서는 회색 배경과 Arial 글꼴이 있지만 인쇄 버전은 흰색 배경과 Times 글꼴을 사용합니다. .no-print 클래스와 내비게이션 요소는 인쇄 버전에서 숨겨집니다. 또한 인쇄된 페이지는 A4 크기로 2cm의 여백이 있지만 첫 페이지는 추가로 상단 여백이 4cm 있습니다.

 

@media query는 화면의 구성을 위한 설정, @page는 인쇄되는 종이의 설정을 하는 것으로 생각하면 됩니다.