CSS를 사용하여 인쇄용 문서 서식 지정

웹에서 티켓 예약이나 호텔로 가는 길 안내를 인쇄해 본 적이 있다면 아마도 그 결과에 그다지 감명을 받지 못했을 것입니다. 따라서 CSS(Cascading Style Sheets)를 사용하여 인쇄된 문서의 스타일을 화면에서와 거의 같은 방식으로 지정할 수 있다는 사실을 모를 수 있습니다.

우려의 분리

CSS의 주요 이점은 프레젠테이션에서 콘텐츠를 분리하는 것입니다. 가장 간단한 용어로 이것은 다음과 같은 매우 구식의 문체 마크업 대신에 의미합니다.

  Heading

시맨틱 마크업을 사용합니다.

훨씬 깨끗할 뿐만 아니라 프레젠테이션이 콘텐츠와 분리된다는 의미이기도 합니다. 브라우저 렌더링 h1 요소는 기본적으로 크고 굵은 텍스트로 표시되지만 스타일시트를 사용하여 언제든지 해당 스타일을 변경할 수 있습니다.

h1 { font-weight: normal; }

이러한 스타일 선언을 별도의 파일에 수집하고 HTML 문서에서 해당 파일을 참조함으로써 분리를 훨씬 더 잘 사용할 수 있습니다. 스타일 시트는 재사용할 수 있으며 언제든지 단일 파일을 변경하여 이를 사용하는 모든 문서의 서식을 업데이트할 수 있습니다.

인쇄 스타일 시트 포함

화면 스타일 시트를 포함하는 것과 유사한 방식으로 인쇄용 스타일 시트를 지정할 수 있습니다. 화면 스타일 시트는 일반적으로 다음과 같이 포함됩니다.

그러나 추가 속성, 반 , 문서가 렌더링되는 컨텍스트를 기반으로 타겟팅을 허용합니다. 기본적으로 이전 요소는 다음과 같습니다.

이는 문서가 렌더링되는 모든 매체에 스타일시트가 적용된다는 것을 의미합니다. 그러나 media 속성은 print 및 screen 값도 사용할 수 있습니다.

이 예에서 인쇄.css 스타일시트는 문서가 인쇄될 때만 사용됩니다. 이것은 매우 유용한 메커니즘입니다. 모든 미디어에 적용되는 스타일시트에서 모든 공통 스타일(글꼴 패밀리 또는 줄 간격)을 수집하고 개별 스타일시트에서 미디어별 서식을 수집할 수 있습니다. 다시 말하지만, 이것은 관심사 분리의 또 다른 용도입니다.

몇 가지 예제 스타일 선언

깨끗한 배경

화려한 배경이나 배경 이미지를 인쇄하는 데 잉크를 낭비하고 싶지는 않을 것입니다. 문서에 설정되었을 수 있는 다음 값의 기본값을 재설정하여 시작하십시오.

body {  
 background: white;  
 color: black;  
}

배경 이미지가 인쇄되지 않도록 할 수도 있습니다. 이러한 이미지는 장식용이어야 하므로 콘텐츠의 필수 부분이 아닙니다.

* {  
 background-image: none !important;  
}

관련된: CSS에서 배경 이미지를 설정하는 방법

심심할 때 컴퓨터에서 하는 일

여백 관리

인쇄와 관련하여 고려해야 할 또 다른 분명한 점은 페이지 여백입니다. CSS는 여백 크기를 설정하는 수단을 제공하지만 브라우저와 프린터도 여백 설정 자체에 영향을 줄 수 있음을 명심해야 합니다.

예를 들어 Chrome의 인쇄 대화 상자에는 다음을 포함하는 값이 있는 여백 설정이 있습니다. 없음 그리고 커스텀 CSS를 통해 지정된 모든 항목을 재정의합니다.

이러한 이유로 공개 웹 페이지에서 여백 결정은 독자에게 맡기는 것이 좋습니다. 그러나 개인적인 용도로 사용하거나 기본 레이아웃을 생성하려면 CSS를 통해 인쇄 여백을 설정하는 것이 적절할 수 있습니다. NS @페이지 규칙은 여백 설정을 허용하며 다음과 같이 사용해야 합니다.

@page {  
 margin: 2cm;  
}

CSS는 페이지가 홀수 페이지(오른쪽), 짝수 페이지(왼쪽) 또는 표지 페이지인지에 따라 여백을 변경하는 것과 같이 보다 정교한 인쇄 레이아웃을 위한 기능도 있습니다.

책 이름이 기억나지 않는다

불행히도 이것은 특히 표지 옵션에서 제대로 지원되지 않지만 최소한의 범위에서 사용할 수 있습니다. 다음 스타일은 위쪽보다 아래쪽 여백이 약간 더 크고 외부 페이지 가장자리의 여백이 척추보다 약간 더 큰 페이지를 생성합니다.

@page {  
 margin-left: 20mm;  
 margin-right: 20mm;  
 margin-top: 40mm;  
 margin-bottom: 50mm;  
}  
@page :left {  
 margin-left: 30mm;  
}  
@page :right {  
 margin-right: 30mm;  
}

링크 수정

하이퍼링크는 분명히 인쇄물과 관련이 없으므로 주변 텍스트와 구별되는 스타일을 제거하는 것이 좋습니다.

a { text-decoration: none; color: inherit; }

그러나 여전히 독자가 원본 URL에 액세스할 수 있기를 원할 수 있으며 간단한 솔루션은 링크된 텍스트 뒤에 자동으로 삽입하는 것입니다.

a[href]:after {  
 content: ' (' attr(href) ')';  
 font-size: 90%;  
 color: #333;  
}

이 CSS는 다음과 같은 결과를 제공합니다.

a[href]:후 특히 ( :후에 ) 각 링크 요소( 에게 ) 실제로 URL( [참조] ). NS 콘텐츠 선언은 여기에 값을 삽입합니다. href 대괄호 사이의 속성. 생성된 콘텐츠의 표시를 제어하기 위해 다른 스타일 규칙을 적용할 수 있습니다.

페이지 나누기 처리

페이지 나누기가 격리된 콘텐츠를 남기거나 중간에 어색하게 끊기는 것을 방지하려면 페이지 나누기 속성을 사용하세요. 페이지 나누기 전 , 페이지 나누기 후 그리고 페이지 나누기 . 예를 들어:

table { page-break-inside: avoid; }

이렇게 하면 단일 페이지보다 큰 테이블이 없는 경우 테이블이 여러 페이지에 걸쳐 있는 것을 방지하는 데 도움이 됩니다. 비슷하게:

h1, h2 { page-break-before: always; }

이것은 그러한 제목이 항상 새 페이지를 시작한다는 것을 의미합니다. 그러나 h1이 자체적으로 페이지에서 끝나기 때문에 페이지의 h1을 즉시 h2로 따라가면 문제가 발생할 수 있습니다. 이를 방지하려면 특정 인스턴스를 대상으로 하는 선택기를 사용하여 페이지 나누기를 취소하기만 하면 됩니다. 예를 들면 다음과 같습니다.

안드로이드에서 기본 앱을 삭제하는 방법

h1 + h2 { page-break-before: avoid; }

인쇄 스타일 보기

모든 경우에 브라우저와 운영 체제는 종종 표준 인쇄 대화 상자의 일부로 인쇄 미리 보기 기능을 제공해야 합니다.

Chrome 브라우저를 사용하면 인쇄 스타일 시트가 있는 CV를 보여주는 이 예제에서 보여주듯이 개발자 도구를 통해 인쇄 스타일을 확인하고 디버그하는 것이 더 편리합니다. 먼저 메인 메뉴를 열고 더 많은 도구 뒤이어 개발자 도구 옵션:

표시되는 새 패널에서 다음을 선택합니다. 메뉴 , 그 다음에 더 많은 도구 , 다음에 표현 :

그런 다음 아래로 스크롤하여 CSS 미디어 유형 에뮬레이션 환경. 드롭다운을 사용하면 문서의 인쇄 보기와 화면 보기 사이를 전환할 수 있습니다.

인쇄 스타일시트를 에뮬레이트할 때 표준 스타일 브라우저 라이브 스타일 규칙을 검사하고 수정할 수 있습니다. 화면에서 인쇄 출력을 에뮬레이트하는 것은 여전히 100% 정확하지 않습니다. 브라우저는 용지 크기에 대해 아무것도 알지 못하며 @페이지 규칙을 에뮬레이트할 수 없습니다.

PDF로 인쇄

최신 운영 체제의 편리한 기능은 PDF 파일로 인쇄하는 기능입니다. 실제로 인쇄할 수 있는 모든 것을 PDF 파일로 보낼 수 있습니다. PDF 파일은 인쇄된 문서를 나타내야 하기 때문에 전혀 놀라운 일이 아닙니다.

이것은 인쇄 스타일시트와 결합된 HTML을 첨부 파일로 보내거나 인쇄할 수 있는 고품질 문서를 만들기 위한 훌륭한 수단으로 만듭니다.

다양한 문서 인쇄

인쇄 스타일시트를 사용하여 이력서에서 레시피 또는 이벤트 공지사항에 이르기까지 모든 것을 포함하여 고품질 문서를 작성할 수 있습니다. 웹 페이지는 일반적으로 인쇄할 때 보기 흉하고 원치 않는 세부 정보를 포함하지만 약간의 스타일 조정으로 인쇄 결과를 크게 향상시킬 수 있습니다. 최종 결과를 PDF로 저장하면 매력적이고 전문적인 문서를 빠르게 만들 수 있습니다.

공유하다 공유하다 트위터 이메일 Microsoft Edge를 사용하여 웹 페이지를 PDF로 인쇄하는 방법

나중에 저장하고 싶은 흥미로운 기사를 본 적이 있습니까? 글쎄, 당신은 세 가지 간단한 단계를 통해 Edge를 사용하여 PDF로 저장할 수 있습니다.

다음 읽기 관련 항목

프로그램 작성
인쇄
CSS

저자 소개 바비 잭(게시된 기사 58건)

Bobby는 거의 20년 동안 소프트웨어 개발자로 일한 기술 애호가입니다. 그는 게임에 열정적이며 Switch Player Magazine에서 리뷰 편집자로 일하고 있으며 온라인 출판 및 웹 개발의 모든 측면에 몰두하고 있습니다.

바비 잭이 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.