Gutenberg.css와 함께 인쇄하기 쉬운 페이지 만들기

웹 디자이너들은 종종 잊어 버린다. 인쇄 그것은 요즘 훨씬 덜 필요하기 때문에. BuzzFeed와 같은 디지털 사이트에서도 마찬가지 일 수 있습니다..

그러나 정보 제공 웹 사이트 제공하는 것이 좋습니다. 사용자 정의 인쇄 스타일 시트. 고맙게도, 자신을 설계 할 필요가 없기 때문에 구텐베르크 도와 주러 왔어..

인쇄기 요하네스 구텐베르크 (Johannes Gutenberg)의 발명가 이름을 따서 명명 한이 CSS 라이브러리는 페이지 디자인 인쇄.

방금 더하기 gutenberg.css 파일 문서 헤드에 넣으면 모든 설정이 완료됩니다..

방문자가 귀하의 페이지를 인쇄 할 때마다 자동으로 재 스타일 인쇄 설정에 따라. 다음을 사용하여 설정할 수 있습니다. media = "인쇄" HTML 속성.

좀 더 배우고 싶다면이 가이드를 확인하십시오. 스타일 시트 인쇄하기 어떻게 작동하는지.

구텐베르크에 대한 좋은 점은 추가 수업 및 스타일 제공 너무.

테마 폴더를 파고 보면 찾을 수 있습니다. 세 가지 대체 인쇄 테마: 책, 현대, 과 구식. 당신은 이들 중 어느 것을 만들 수 있습니다. 태만 기본값 위에 추가하여 gutenberg.css 파일.

또한, 인쇄용으로 페이지 스타일을 다르게 지정한다. 특정 CSS 클래스를 추가하여 예를 들어, .인쇄 안함 계급 의지 완전히 요소를 숨기다. 인쇄 스타일로.

또 다른 예는 링크 URL 추가 텍스트 옆에. Gutenberg는 사람들이 귀하의 페이지에서 URL을 쉽게 찾을 수 있도록이 기능을 추가합니다. 하지만 .포맷을 다시하지 않는다. 클래스를 앵커 요소로 URL 숨기기.

이 모든 것들이 GitHub 레포에서 다루어지며 매우 간단합니다. 구텐베르크를 가질 수 있습니다. 5 분 이내에 설치 전체 사이트가 인쇄 가능합니다..

이것은 가장 단순하고 멋진 라이브러리 구현 더 나은 사이트 성능을 위해. KB가 몇 개 추가 될 수 있지만 전반적인 환경이 크게 향상됩니다..

사이트의 콘텐츠가 어떤 이유로 든 인쇄 Gutenberg.css는 필수 리소스입니다..