2018년 인쇄 스타일시트 현황 안내

오늘 저는 과거에 Smashing Magazine에서 이미 다룬 주제인 인쇄 스타일시트 주제로 돌아가고 싶습니다. 이 경우 브라우저에서 직접 페이지를 인쇄하는 것에 대해 이야기하고 있습니다. 엄청난 이미지(그리고 심지어 광고까지)가 출력되는 것에 좌절감을 느낄 수 있는 경험입니다. 그러나 때때로 최소한의 잉크와 종이를 사용하고 모든 것이 읽기 쉽도록 훌륭하게 최적화된 페이지가 프린터에서 나올 때 약간의 기쁨을 더합니다.

이 기사에서는 두 번째 경험을 가장 잘 만들 수 있는 방법을 살펴봅니다. 웹 페이지에 인쇄 스타일을 포함하는 방법을 살펴보고 인쇄 후 실제로 적용되는 사양을 살펴보겠습니다. 브라우저 지원 상태와 인쇄 스타일을 가장 잘 테스트하는 방법에 대해 알아보겠습니다. 그런 다음 인쇄 스타일시트가 인쇄 요구 사항에 충분하지 않을 때 수행할 작업에 대한 몇 가지 지침을 제공합니다.

인쇄 지원을 위한 주요 장소

사이트에 인쇄 스타일을 아직 구현하지 않은 경우 견고한 인쇄 환경이 사용자에게 도움이 될 몇 가지 주요 위치가 있습니다. 예를 들어, 이메일을 통해 세부 정보를 보내더라도 많은 사용자는 구매 또는 예약 후 거래 확인 페이지를 인쇄하기를 원할 것입니다.

방문자가 컴퓨터를 사용하지 않을 때 사용하려는 모든 정보도 스타일시트 인쇄에 적합한 후보입니다. 내가 인쇄하는 가장 일반적인 것은 레시피입니다. 아이패드에 로드할 수도 있지만 요리하는 동안 레시피를 인쇄하여 냉장고 문에 붙이기만 하면 되는 경우가 많습니다. 다른 예로는 길찾기 또는 여행 정보가 있습니다. 해외 여행을 할 때 항상 데이터에 액세스할 수 있는 것은 아닙니다. 이러한 인쇄물은 매우 유용할 수 있습니다.

모든 종류의 참고 자료도 종종 인쇄됩니다. 많은 사람들에게 종이 사본에 메모를 할 수 있는 것이 가장 잘 배울 수 있는 방법입니다. 다시 말하지만 정보는 오프라인 형식으로 액세스할 수 있습니다. 사람들이 웹 페이지를 인쇄하고 싶어하는 이유를 쉽게 알 수 있지만 방문자에게 가장 적합한 형식으로 콘텐츠에 액세스할 수 있도록 하는 것이 우리의 임무입니다. 그 최상의 형식이 종이에 인쇄된다면 우리는 누구를 논하겠습니까?

이 페이지가 인쇄되는 이유는 무엇입니까?

인쇄 스타일시트에 포함하거나 숨길 내용을 결정할 때 묻는 좋은 질문은 "사용자가 이 페이지를 인쇄하는 이유는 무엇입니까?"입니다. 글쎄요, 아마도 부엌에서 요리할 때 따라하고 싶은 레시피나 재료를 사기 위해 쇼핑할 때 가지고 가고 싶은 레시피가 있을 것입니다. 또는 티켓 구매 후 예약 증명으로 확인 페이지를 인쇄하고 싶습니다. 또는 영수증이나 송장을 인쇄(또는 PDF로 인쇄)하여 종이나 전자적으로 계정에 저장하기를 원할 수도 있습니다.

인쇄된 문서의 사용을 고려하면 해당 인쇄물을 참조할 때 사용자가 속한 컨텍스트에서 가장 유용한 콘텐츠의 인쇄 버전을 생성하는 데 도움이 될 수 있습니다.

워크플로

CSS에 인쇄 스타일을 포함하기로 결정했으면 레이아웃을 변경할 때 인쇄 버전에도 해당 변경 사항을 포함하도록 워크플로에 추가해야 합니다.

페이지에 인쇄 스타일 추가하기

"스타일시트 인쇄"를 활성화하기 위해 우리가 하는 일은 문서가 인쇄될 때 이러한 CSS 규칙이 무엇을 위한 것인지 브라우저에 알리는 것입니다. 이를 수행하는 한 가지 방법은 <link> 요소를 사용하여 추가 스타일시트를 연결하는 것입니다.

 <link rel="stylesheet" media="print" href="print.css">

이 방법은 인쇄 스타일을 더 깔끔하다고 생각할 수 있는 다른 모든 것과 분리하여 유지하지만 단점이 있습니다.

연결된 스타일시트는 서버에 대한 추가 요청을 생성합니다. 또한 다른 스타일과 인쇄 스타일을 깔끔하고 깔끔하게 분리하는 것은 단점이 될 수 있습니다. 라이브를 시작하기 전에 별도의 스타일을 업데이트하는 데 주의를 기울일 수 있지만 스타일시트는 눈에 띄지 않아 마음에 들지 않아 문제가 될 수 있습니다. 결국 기능이 사이트에 추가되지만 인쇄 스타일에는 반영되지 않기 때문에 궁극적으로 무용지물이 됩니다.

인쇄 스타일을 포함하는 다른 방법은 반응형 디자인의 특정 중단점에 대해 CSS를 포함하는 것과 같은 방식으로 @media 를 사용하는 것입니다. 이 방법은 기능에 대해 모든 CSS를 함께 유지합니다. 좁은 중단점에서 넓은 중단점에 대한 스타일 및 인쇄 스타일. @supports 가 있는 기능 쿼리와 함께 이것은 디자인 기능에 대한 모든 CSS가 함께 유지되고 유지되도록 하는 개발 방법을 권장합니다.

 @media print { }

화면 CSS 덮어쓰기 또는 별도의 규칙 생성

대부분의 경우 화면 표시에 사용하는 CSS가 약간의 조정으로 인쇄에 적합하다는 것을 알게 될 것입니다. 따라서 기본 CSS를 변경하려면 인쇄용 CSS만 작성하면 됩니다. 글꼴 크기 또는 패밀리를 덮어쓰고 CSS의 다른 요소는 그대로 둘 수 있습니다.

인쇄에 대해 완전히 별도의 스타일을 갖고 백지 상태로 시작하려면 screen 키워드를 사용하여 미디어 쿼리에서 나머지 사이트 스타일을 래핑해야 합니다.

 @media screen { }

참고로, 반응형 디자인에 미디어 쿼리를 사용하는 경우 화면용으로 작성했을 수 있습니다.

 @media screen and (min-width: 500px) { }

인쇄할 때 이러한 스타일을 사용하려면 screen 키워드를 제거해야 합니다. 그러나 실제로 "모바일 우선"으로 작업하는 경우 단일 열 모바일 레이아웃이 내 인쇄 레이아웃을 위한 정말 좋은 출발점이라는 것을 종종 알게 됩니다. 더 복잡한 화면 레이아웃을 가져오는 미디어 쿼리를 사용하면 인쇄용으로 스타일을 덮어쓸 일이 훨씬 줄어듭니다.

패턴 라이브러리 및 스타일 가이드에 인쇄 스타일 추가

인쇄 스타일이 사이트 디자인의 필수적인 부분으로 보이도록 하려면 사이트의 스타일 가이드 또는 패턴 라이브러리(있는 경우)에 추가하십시오. 그렇게 하면 인쇄 스타일이 존재하고 생성된 모든 새 패턴에는 동등한 인쇄 버전이 있어야 한다는 알림이 항상 표시됩니다. 이러한 방식으로 디자인 시스템의 일류 시민으로서 인쇄 스타일에 대한 가시성을 제공합니다.

인쇄용 CSS의 기초

인쇄용 CSS를 만들 때 자신이 하고 있는 세 가지 일이 있습니다. 인쇄할 때 관련 없는 내용을 숨기고 표시하지 않으려고 합니다. 인쇄 버전을 더 유용하게 만들기 위해 콘텐츠를 추가할 수도 있습니다. 또한 페이지의 글꼴이나 기타 요소를 조정하여 인쇄용으로 최적화할 수도 있습니다. 이러한 기술을 살펴보겠습니다.

콘텐츠 숨기기

CSS에서 내용을 숨기고 상자 생성을 방지하는 방법은 값이 none 인 display 속성을 사용하는 것입니다.

 .box { display: none; }

display: none 을 사용하면 요소와 모든 하위 요소가 축소됩니다. 따라서 목록으로 표시된 이미지 갤러리가 있는 경우 인쇄할 때 이를 숨기려면 ul 에 display: none 을 설정하기만 하면 됩니다.

숨기고 싶은 것은 인쇄할 때 불필요할 이미지, 탐색, 광고 패널 및 관련 콘텐츠에 대한 링크를 표시하는 페이지 영역 등입니다. 사용자가 페이지를 인쇄할 수 있는 이유를 다시 참조하면 제거할 항목을 결정하는 데 도움이 될 수 있습니다.

콘텐츠 삽입

페이지가 인쇄될 때 표시해야 하는 내용이 있을 수 있습니다. 화면 스타일시트에 display: none 을 표시하고 인쇄 스타일시트에 표시하도록 일부 콘텐츠를 설정할 수 있습니다. 그러나 CSS를 사용하여 일반적으로 화면에 출력되지 않는 콘텐츠를 노출할 수 있습니다. 이에 대한 좋은 예는 문서에 있는 링크의 URL입니다. 화면 문서에서 링크는 일반적으로 새 페이지나 외부 웹사이트를 방문하기 위해 클릭할 수 있는 링크 텍스트를 표시합니다. 그러나 인쇄된 링크를 따라갈 수 없는 경우 독자가 나중에 링크를 방문하려는 경우에 대비하여 URL을 볼 수 있으면 유용할 수 있습니다.

CSS 생성 콘텐츠를 사용하여 이를 달성합니다. 생성된 콘텐츠는 CSS를 통해 문서에 콘텐츠를 삽입하는 방법을 제공합니다. 인쇄할 때 매우 유용합니다.

문서에 간단한 텍스트 문자열을 삽입할 수 있습니다. 다음 예제는 wrapper 클래스가 있는 요소를 대상으로 하고 그 앞에 "이 정보의 최신 버전은 www.mysite.com을 참조하십시오."라는 문자열을 삽입합니다.

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

문서에 이미 있는 것을 삽입할 수 있지만 링크 href 의 내용이 그 예입니다. 우리는 생성된 콘텐츠를 href 속성을 a 각 인스턴스 뒤에 추가하고 우리가 삽입하는 콘텐츠는 링크가 될 href 속성의 값입니다.

 a[href]:after { content: " (" attr(href) ")"; }

원하는 경우 최신 CSS :not 선택기를 사용하여 내부 링크를 제외할 수 있습니다.

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

Manuel Matuzovic이 작성한 "나는 인쇄 스타일시트에 대해 완전히 잊어버렸습니다" 기사에 이와 같은 유용한 팁이 있습니다.

고급 인쇄 스타일링

인쇄된 버전이 한 페이지에 깔끔하게 들어맞는 경우 마지막 섹션의 기술을 사용하여 비교적 간단하게 인쇄 스타일시트를 만들 수 있어야 합니다. 그러나 여러 페이지에 인쇄할 수 있는 항목이 있으면(특히 표나 그림과 같은 요소가 포함된 경우) 항목이 최적이 아닌 방식으로 새 페이지에 분할되는 것을 발견할 수 있습니다. 여백 크기 변경과 같이 페이지 자체에 대한 사항을 제어할 수도 있습니다.

CSS에는 이러한 작업을 수행할 수 있는 방법이 있지만 앞으로 살펴보겠지만 브라우저 지원은 고르지 못합니다.

페이징된 미디어

CSS 페이지 미디어 사양은 역할에 대한 다음 설명과 함께 열립니다.

“이 CSS 모듈은 페이지 프레젠테이션에서 단편화된 콘텐츠를 보유하기 위해 페이지가 생성되고 배치되는 방식을 지정합니다. 페이지 여백, 페이지 크기 및 방향, 머리글 및 바닥글을 제어하는 ​​기능을 추가하고 생성된 콘텐츠를 확장하여 페이지 번호 매기기 및 머리글/바닥글 실행을 가능하게 합니다."

화면은 연속 미디어 입니다. 콘텐츠가 더 있으면 스크롤하여 확인합니다. 개별 페이지로 분할된다는 개념은 없습니다. 인쇄하는 즉시 사양에서 paged media 로 설명된 고정 크기 페이지로 출력합니다. Paged Media 사양은 콘텐츠가 페이지 간에 단편화되는 방식을 다루지 않으며 나중에 이에 대해 설명합니다. 대신 페이지 자체의 기능을 살펴봅니다.

개별 페이지를 대상으로 하는 방법이 필요하며 @page 규칙을 사용하여 이를 수행합니다. 이것은 @page 를 대상으로 한 다음 페이지에서 사용할 CSS를 작성한다는 점에서 일반 선택기와 매우 유사하게 사용됩니다. 간단한 예는 문서를 인쇄할 때 생성된 모든 페이지의 여백을 변경하는 것입니다.

 @page { margin: 20px; }

:left 및 :right 확산 의사 클래스 선택기를 사용하여 특정 페이지를 대상으로 지정할 수 있습니다. 첫 번째 페이지는 :first 의사 클래스 선택기로 대상이 될 수 있고 페이지 나누기로 인한 빈 페이지는 :blank 로 선택할 수 있습니다. 예를 들어, 첫 페이지에만 상단 여백을 설정하려면:

 @page :first { margin-top: 250pt; }

왼쪽 페이지의 오른쪽과 오른쪽 페이지의 왼쪽에 더 큰 여백을 설정하려면:

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

사양은 생성된 여백에 콘텐츠를 삽입할 수 있는 기능을 정의하지만 이 기능을 지원하는 브라우저는 없습니다. 인쇄 전용 사용자 에이전트와 함께 사용할 스타일시트 생성에 대한 내 기사인 Designing For Print With CSS에서 이에 대해 설명합니다.

CSS 단편화

Paged Media 모듈이 페이지 상자 자체를 다루는 경우 CSS Fragmentation Module은 콘텐츠가 프래그먼트 사이에서 분리되는 방식을 자세히 설명합니다. 프래그먼트테이너(또는 프래그먼트 컨테이너 )는 프래그먼트화된 흐름의 일부를 포함하는 컨테이너입니다. 이것은 넘칠 지점에 도달하면 새 컨테이너로 부서지는 흐름입니다.

현재 단편화가 발생하는 컨텍스트는 페이지 미디어에 있으므로 인쇄할 때와 다중 열 레이아웃을 사용할 때도 열 상자 사이에서 콘텐츠가 나뉩니다. 단편화 사양은 이러한 컨텍스트에서 콘텐츠가 새로운 단편으로 분할되는 방식에 대한 일부 제어를 제공하는 CSS 속성, 분할에 대한 다양한 규칙을 정의합니다. 또한 현재로서는 사용 가능한 크로스 브라우저가 아니지만 CSS 영역 사양에서 콘텐츠가 중단되는 방식을 정의합니다.

그리고 브라우저에 대해 말하자면, 단편화는 현재 지원 측면에서 약간 엉망입니다. MDN의 각 속성에 대한 브라우저 호환성 표는 지원하기에 정확하지만 이러한 속성의 사용을 신중하게 테스트해야 합니다.

CSS2의 이전 속성

CSS Fragmentation Level 3의 break-* 속성 외에도 CSS2에서 가져온 page-break-* 속성이 있습니다. 사양 측면에서 이러한 속성은 보다 일반적이고 다양한 상황에서 사용할 수 있으므로 새로운 break-* 속성으로 대체되었습니다. 페이지와 다중 열 나누기 사이에는 큰 차이가 없습니다. 그러나 브라우저 지원 측면에서 이전 속성에 대한 더 나은 브라우저 지원이 있습니다. 즉, 현재 시간에 차단을 제어하는 ​​데 사용해야 할 수도 있습니다. 최신 속성을 구현하는 브라우저는 이전 속성을 삭제하는 대신 별칭을 지정합니다.

다음 예에서는 새 속성과 기존 속성이 있는 속성을 모두 보여줍니다.

break-before 및 break-after

이러한 속성은 상자 사이의 구분을 처리하고 다음 값을 허용하며 초기 값은 auto입니다. 마지막 4개 값은 페이징된 미디어에 적용되지 않고 대신 다중 열 및 지역에 적용됩니다.

• auto
• avoid
• avoid-page
• page
• left
• right
• recto
• verso
• avoid-column
• column
• avoid-region
• region

page-break-before 및 page-break-after 의 이전 속성은 더 작은 범위의 값을 허용합니다.

• auto
• always
• avoid
• left
• right
• inherit

h2 요소 앞에 항상 페이지 나누기를 발생시키려면 다음을 사용합니다.

 h2 { break-before: page; }

단락이 바로 앞의 제목에서 분리되는 것을 방지하려면:

 h2, h3 { break-after: avoid-page; }

이전 page-break-* 속성은 항상 h2 전에 페이지 나누기를 발생시킵니다.

 h2 { page-break-before: always; }

단락이 바로 앞의 제목에서 분리되는 것을 방지하려면:

 h2, h3{ page-break-after: avoid; }

MDN에서 속성에 대한 정보 및 사용 예를 찾으십시오.

• 휴식 전
• 휴식 후
• 페이지 나누기 전
• 페이지 나누기 후

break-inside

이 속성은 상자 안의 나누기를 제어하고 값을 허용합니다.

• auto
• avoid
• avoid-page
• avoid-column
• avoid-region

앞의 두 속성과 마찬가지로 CSS2 page-break-inside 에는 값을 허용하는 별칭이 있습니다.

• auto
• avoid
• inherit

예를 들어, figure 이나 table 가 있는데 절반은 한 페이지에, 나머지 절반은 다른 페이지에 표시하는 것을 원하지 않을 수 있습니다.

 figure { break-inside: avoid; }

그리고 이전 속성을 사용할 때:

 figure { page-break-inside: avoid; }

MDN에서:

• 침입
• 페이지 나누기 내부

고아와 과부

단편화 사양은 또한 orphans 및 widows 속성을 정의합니다. orphans 속성은 단락과 같은 내용이 두 페이지 사이에 끊어졌을 때 첫 페이지 하단에 몇 줄을 남길 수 있는지 정의합니다. widows 속성은 두 번째 페이지 상단에 몇 줄을 남길 수 있는지 정의합니다.

따라서 페이지 끝에 한 줄, 다음 페이지 맨 위에 한 줄로 끝나는 것을 방지하기 위해 다음을 사용할 수 있습니다.

 p { orphans: 2; widows: 2; }

widows 및 orphans 속성은 잘 지원됩니다(Firefox에서 누락된 브라우저 구현).

MDN에서:

• 과부들
• 고아

box-decoration-break

Fragmentation 모듈에 정의된 마지막 속성은 box-decoration-break 입니다. 이 속성은 테두리, 여백 및 패딩이 콘텐츠를 나누거나 줄 바꿈하는지 여부를 처리합니다. 허용하는 값은 다음과 같습니다.

• slice
• clone

예를 들어 내 콘텐츠 영역에 10픽셀 회색 테두리가 있고 콘텐츠를 인쇄하는 경우 기본 인쇄 방식은 테두리가 각 페이지에 계속되지만 콘텐츠 끝에서만 줄 바꿈되는 것입니다. . 따라서 다음 페이지로 이동하여 계속하기 전에 휴식을 취합니다.

box-decoration-break: clone 을 사용하면 테두리와 모든 패딩 및 여백이 각 페이지에서 완료되어 각 페이지에 회색 테두리가 생깁니다.

현재 이것은 Firefox의 Paged Media에서만 작동하며 MDN에서 box-decoration-break에 대해 자세히 알아볼 수 있습니다.

브라우저 지원

이미 언급했듯이 브라우저 지원은 Paged Media 및 Fragmentation에 대해 고르지 않습니다. 조각화와 관련된 추가 문제는 각 레이아웃 방법에 대해 중단을 지정하고 구현해야 한다는 것입니다. 인쇄 스타일시트에서 Flexbox 또는 CSS Grid를 사용하고자 했다면 아마 실망했을 것입니다. Flexbox 및 Grid에 대한 Chrome 버그를 확인할 수 있습니다.

지금 제가 드릴 수 있는 최선의 제안은 인쇄 스타일시트를 합리적으로 단순하게 유지하는 것입니다. 이전 page-break-* 속성과 새 속성을 모두 포함하여 조각화 속성을 추가합니다. 그러나 이것이 모든 브라우저에서 제대로 작동하지 않을 수 있다는 점을 인정하십시오. 또한 브라우저 지원이 부족하여 실망스럽다면 브라우저에서 이러한 문제를 제기하거나 이미 제기된 문제에 투표하십시오. 특히 단편화는 지원되는 경우에도 명령이 아니라 제안으로 처리해야 합니다. 페이지를 배치하는 것이 거의 불가능할 정도로 물건을 끊고 싶은 위치와 시간에 대해 너무 구체적일 수 있습니다. 때때로 차선책이 깨질 수 있다고 가정해야 합니다.

인쇄 스타일시트 테스트

인쇄 스타일시트를 테스트하는 것은 일반적으로 인쇄 미리보기를 사용하거나 PDF로 반복적으로 인쇄해야 하는 지루한 작업이 될 수 있습니다. 그러나 브라우저 DevTools는 우리를 위해 이것을 조금 더 쉽게 만들었습니다. Chrome과 Firefox 모두 인쇄 스타일만 볼 수 있는 방법이 있습니다.

파이어폭스

개발자 도구 모음을 연 다음 프롬프트에서 media emulate print 를 입력합니다.

크롬

DevTools를 열고 점 3개 아이콘을 클릭한 다음 "추가 도구" 및 "렌더링"을 선택합니다. 그런 다음 CSS 미디어 에뮬레이션에서 인쇄를 선택할 수 있습니다.

이것은 CSS 레이아웃, 숨겨진 또는 생성된 콘텐츠에 대한 변경 사항을 테스트하는 데에만 도움이 됩니다. 조각화에는 도움이 되지 않습니다. 이를 위해서는 인쇄하거나 PDF로 인쇄해야 합니다. 그러나 프린터까지 왕복하는 횟수를 줄여주고 사이트의 새로운 부분을 개발할 때 여전히 숨기고 있는 부분과 올바른 것을 보여주는 부분을 확인하는 데 도움이 될 수 있습니다.

인쇄 스타일시트가 충분하지 않을 때 해야 할 일

이상적인 세계에서 브라우저는 브라우저에서 직접 인쇄할 때 Paged Media 사양을 더 많이 구현했을 것이고 단편화는 일관된 방식으로 더 철저하게 구현되었을 것입니다. 관련된 브라우저로 브라우저에서 인쇄할 때 발견하는 버그를 제기하는 것은 확실히 가치가 있습니다. 이러한 사항을 수정하도록 요청하지 않으면 수정해야 할 우선 순위가 낮은 상태로 유지됩니다.

높은 수준의 인쇄 지원이 필요하고 CSS를 사용하려는 경우 현재 Prince와 같은 인쇄 전용 사용자 에이전트를 사용해야 합니다. 내 기사 "Designing For Print With CSS"에서 Prince로 출력할 때 책의 서식을 지정하기 위해 CSS를 사용하는 방법을 자세히 설명합니다.

Prince는 웹에서 CSS를 사용하여 멋지게 인쇄된 문서를 생성하기 위해 서버에 설치할 수도 있지만 가격이 높습니다. 대안은 Prince 렌더링 엔진 위에 API를 제공하는 DocRaptor와 같은 서버입니다.

wkhtmltopdf와 같은 오픈 소스 HTML 및 CSS-PDF 생성기가 있지만 대부분은 브라우저 렌더링 엔진을 사용하여 인쇄 출력을 생성하므로 Paged Media 및 Fragmentation 사양을 구현할 때 브라우저와 동일한 제한이 있습니다. 자체 구현이 있는 것으로 보이며 약간 다른 기능을 지원하는 WeasyPrint는 예외이지만 어떤 식으로든 Prince와 같은 모든 기능을 갖춘 것은 아닙니다.

print-css.rocks 사이트에서 인쇄용 사용자 에이전트에 대한 자세한 정보를 찾을 수 있습니다.

기타 리소스

CSS에서 인쇄하는 작업이 지난 몇 년 동안 거의 진행되지 않았기 때문에 Smashing Magazine과 다른 곳에 있는 많은 오래된 리소스가 여전히 유효합니다. 다음 리소스에서 몇 가지 추가 팁과 요령을 찾을 수 있습니다. 유용한 인쇄 작업 흐름이나 기술 팁을 발견했다면 아래 의견에 추가하십시오.

• "나는 인쇄 스타일 시트를 완전히 잊어 버렸습니다."Manuel Matuzovic, UX Collective
• "인쇄 스타일시트 접근 방식: 블랙리스트 대 화이트리스트", Chris Coyier, CSS-Tricks
• "완벽한 인쇄 스타일시트", Andreas Hecht, Noupe
• "인쇄 스타일시트를 설정하는 방법", Christian Krammer, Smashing Magazine
• "스타일 시트 인쇄를 위한 5가지 강력한 팁과 요령", Dudley Storey, Smashing Magazine