[CSS3] Print 페이지 CSS 적용하는 방법

---

알고있으면 좋은 CSS3 Tip✨

---

@media print

• 인쇄 시 적합한 출력을 위해, 인쇄 페이지용 미디어 쿼리를 사용하여 출력 시 변경되는 섹션을 명시해야한다.

 

(1) 배경출력을 위한 설정

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

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

 

(2) break-before

#page1 {
    break-before: page;
}

• break-before 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용된다.
• 쉽게 말해, 항상 요소 앞에서 새 페이지를 시작하고 싶다면 해당 속성의 break-before:page;를 사용하면 된다.
• break-before 속성은 다음과 같은 값을 설정 할 수 있다.
  1. auto : 자동 분할(기본값)
  2. avoid : 가능한 분할 X
  3. always : 항상 분할
  4. left : 페이지를 눕혀서 출력할 때, 요소 앞에 항상 왼쪽 배치
  5. right : 페이지를 눕혀서 출력할 때, 요소 앞에 항상 오른쪽 배치
  6. page, column, region : 새 페이지, 새 열, 새 영역 강제로 시작

 

(3) break-after

#page1 {
    break-after: page;
}

• break-after 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용된다.
• 쉽게 말해, 항상 요소 뒤에서 새 페이지를 시작하고 싶다면 해당 속성의 break-after:page;를 사용하면 된다.
• break-after 속성은 다음과 같은 값을 설정 할 수 있다.
  1. auto : 자동 분할(기본값)
  2. avoid : 가능한 분할 X
  3. always : 항상 분할
  4. left : 페이지를 눕혀서 출력할 때, 요소 앞에 항상 왼쪽 배치
  5. right : 페이지를 눕혀서 출력할 때, 요소 앞에 항상 오른쪽 배치
  6. page, column, region : 새 페이지, 새 열, 새 영역 강제로 시작

 

(4) break-inside

#page1 {
    break-inside: avoid;
}

• break-inside 속성은 CSS에서 페이지, 열 또는 영역 분할을 제어하는 데 사용된다.
• 쉽게 말해, 페이지나 열, 영역 경계에서 나눠지지 않도록 설정 할 수 있고, 열 분할을 피하고 싶다면 해당 속성의 break-inside:avoid;를 사용하면 된다.
• break-inside 속성은 다음과 같은 값을 설정 할 수 있다.
  1. auto : 자동 분할(기본값)
  2. avoid : 가능한 분할 X
  3. avoid-page : 페이지 분할 피하기
  4. avoid-column : 열 분할 피하기
  5. avoid-region : 영역 분할 피하기

 

(5) portrait & landscape

#page1 {
    @page { size: A4 landscape; margin:0;}
    @page { size: A4 portrait; margin:0; }
}

• portrait 속성은 페이지의 콘텐츠를 세로 모드로 표시한다.
• landscape 속성은 페이지의 콘텐츠를 가로 모드로 표시한다.

 

(6) 같이 사용하기

@media print {
   /* 페이지의 크기 설정 */
   @page { size: A4 portrait; margin:0;}
   
   /* 배경 강제로 설정 */
   * { -webkit-print-color-adjust:exact;  print-color-adjust:exact; }
   
   /* 인쇄 페이지 높이값 및 상황에 따라 옵션들 적용 */
   section#page { height:297mm;  page-break-inside: avoid; page-break-after: auto;}
}

• 인쇄되는 종이의 설정을 CSS로 설정한다고 생각하면 편하고 인쇄 전 미리보기 창에서 적용된 CSS를 화면으로 확인 할 수 있다.