사람들이 웹 페이지에서 "인쇄"라고 표시된 링크 나 버튼을 찾아야한다는 사실이 저를 계속 놀라게합니다. 특히 그 단계를 불필요하게 만드는 기적의 기술이 있다는 점을 고려하면 더욱 그렇습니다. 슬프게도 거의 아무도 사용하지 않습니다. 10 년이 지났는데 도요.
인쇄를 위해 추가 단계를 요구하는 것은 어리석은 일일뿐만 아니라 인쇄 스타일 시트를 사용하면 인쇄 가능한 링크를 사용하지 않는 사람에게 잉크를 절약 할 수 있습니다. 물론 나중에 종이를 낭비하지 않고 기사를 저장하기 위해 PDF로 인쇄를 사용하는 많은 사람들이 있습니다.
인쇄 스타일 시트 란 무엇입니까?
대부분의 웹 사이트는 프린터에 대해 다른 형식의 다른 페이지로 이동하여 인쇄 기능을 구현하지만 실제로는 필요하지 않습니다. 모든 브라우저는 다음과 같은 간단한 CSS 기술을 구현합니다. 스타일 시트 인쇄 , 브라우저가 페이지를 인쇄 할 때 숨길 요소를 지정하는 파일에 지나지 않습니다.
익숙하지 않은 사용자에게 CSS는 CSS (Cascading Style Sheets)를 의미하며 브라우저가 웹 페이지의 HTML 소스 코드를 화면에 실제로 표시되는 형식으로 지정하는 방법을 알고 있습니다. 글꼴, 색상, 테두리 및 배경 이미지의 모든 것을 스타일 시트에 지정할 수 있습니다.
인쇄 스타일 시트를 추가하는 것은이 한 줄을 페이지 HTML에 연결하는 것만 큼 간단합니다. 코드의 media = print 부분은 인쇄 할 때이 스타일 시트 만 사용하도록 브라우저에 지시합니다.
<link rel =”stylesheet”href =”print.css”type =”text / css”media =”print”>
이 파일은 일반적으로 다음과 같습니다.
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }
예, 정말 간단합니다. 그래서 어떻게 작동합니까? 다음은 연결된 ID로 모든 탐색, 로고 및 광고가 명확하게 표시되는 왼쪽에있는 일반 웹 페이지의 예입니다. 오른쪽에는 인쇄 스타일 시트가 적용된 동일한 페이지가 모든 요소를 숨기고 있습니다.
분명히이 중 하나를 다른 것 위에 인쇄하고 싶을 것입니다.
스타일 시트 인쇄 실패의 예
안타깝게도이를 구현하는 데 전혀 신경 쓰지 않은 거대한 웹 사이트가 많습니다. New York Times에서 인쇄하려고 할 때 어떤 일이 발생하는지 살펴보십시오.
Gawker 사이트 네트워크와 같은 일부 사이트는 더 나쁩니다. 인쇄 가능한보기가 없을뿐만 아니라 인쇄를 시도하면 잉크 수프와 비슷합니다. 우리가 알 수있는 한, 가독성과 같은 별도의 서비스를 사용하지 않거나 페이지의 콘텐츠를 수동으로 강조 표시하지 않고 Gawker 사이트에서 인쇄 할 수있는 방법은 없습니다. 이는 새로운 디자인에서는 거의 불가능합니다.
정말 슬프다. 대규모 사이트의로드는이 기능을 구현하는 데 완전히 실패합니다.
고맙게도 일부 사이트에서는이를 사용합니다.
다음은 인쇄 링크를 찾을 필요없이 적절한 형식의 인쇄 가능한보기의 예입니다. BBC News 사이트는 사용자 정의 헤더로 완성 된 기사를 인쇄용으로 깔끔하게 형식화합니다. 인쇄보기에 주석이 포함되어 있지만 여전히 잘된 작업입니다.
같은 작업을 수행하는 다른 사이트가 많이 있습니다. ArsTechnica 그리고 ... 우리 사이트이지만 그들 모두의 스크린 샷을 보여주는 것은 어리석은 일입니다. 우리의 연구에서 그것들을 적절하게 구현 한 사이트는 거의없고 그 사이에 있습니다.
마무리하려면 ... 사이트에 대한 인쇄 스타일 시트를 구현하는 데 필요한 5 분을 투자하십시오!
