CSS로 인쇄할 웹사이트 스타일을 지정하는 방법
게시 됨: 2015-08-28인쇄는 웹과 어떤 관련이 있습니까?
우리 대부분은 온라인에서 생활하며 웹에서 모든 정보를 얻습니다. 우리는 하루 종일 많은 장치에서 연결되어 있습니다. 인쇄가 죽었다는 말을 들었을 수도 있지만 실제로는 사실이 아닙니다! 우리는 예전만큼 자주 인쇄하지 않을 수 있지만 장치에서 콘텐츠를 보는 것이 보기 위해 인쇄된 사본을 갖는 것을 대체할 수 없는 상황이 있습니다. 유용한 방법 콘텐츠, 교환 가능한 쿠폰, 지침, 포트폴리오 예시 또는 사용자가 인쇄본으로 보고 싶어하는 기타 내용이 있습니까? 그렇다면 웹 사이트에서 사용자 지정 인쇄 규칙을 설정하면 사용자 경험을 형성하는 데 확실히 도움이 될 것입니다.
인쇄용으로 디자인하는 방법
모든 마법은 인쇄별 스타일을 정의하여 CSS에 포함됩니다. 다른 모든 스타일과 분리되도록 별도의 print.css 스타일시트를 만드는 것이 도움이 될 수 있습니다. 모든 사이트에 인쇄 스타일 시트가 있는 것은 아닙니다. 이것은 개발 프로세스의 추가 기능이자 단계입니다. 인쇄 스타일을 지정하지 않으면 기본 스타일이 인쇄에 사용됩니다. 모든 기본값을 재정의하는 인쇄 작업을 보다 효율적으로 만들기 위해 스타일을 정의할 것입니다.
명명 규칙 및 특정 스타일은 프로젝트의 스타일시트에 고유하지만 이러한 개념이 적용됩니다. 기본 사항을 추가한 후 웹사이트의 기본 스타일시트를 살펴보고 최상의 인쇄 경험을 보장하기 위해 인쇄 스타일이 필요한 고유한 상황을 찾습니다.
색상 및 레이아웃 고려 사항
대부분의 사람들은 컬러 잉크의 비용 때문에 흑백으로 인쇄하는 것을 선호합니다. 또한 텍스트가 검은색이고 흰색 종이에 인쇄될 때 대비가 더 높습니다. 미디어 쿼리는 최신 반응형 웹 디자인에서 매우 중요하기 때문에 미디어 쿼리에 익숙할 것입니다. 인쇄 스타일을 생성하려면 미디어 쿼리도 필요합니다.
이것은 본문의 텍스트를 검은색으로 만들고 최상의 인쇄를 위해 배경색을 제거합니다.
@media print { body { color: #000; background: #fff; } }텍스트가 Times New Roman으로 인쇄될 가능성이 있습니다. 아무 문제가 없지만 다른 글꼴을 지정하려면 어떻게 해야 합니까? 기본 스타일에서 했던 것처럼 인쇄에서도 수행할 수 있습니다. 그 동안 줄 높이를 잊지 말자.
body { font: 13pt Tahoma, Geneva, sans-serif; line-height: 1.5; }불필요한 요소 숨기기
display: none를 최소한으로 유지하도록 조절되었을 수 있지만 이것은 인쇄 스타일에 전혀 문제가 없습니다. 일부 요소를 숨김으로써 사용자에게 더 나은 인쇄 방법을 제공하고 하드 카피에서 불필요한 것을 유지합니다. 목표는 정확한 웹 페이지가 아닌 가장 중요한 내용을 효과적으로 인쇄할 수 있도록 하는 것입니다.탐색, 바닥글, 사이드바 및 배경 이미지와 같이 필요하지 않은 페이지 요소가 있으므로 여기에
display: none유용하지 않습니다.@media print { nav, aside, footer { display: none; } section { background: none } /* section had a patterned background in the default styling which is best removed in the print style */ }기사는 종종 인쇄되므로 각 기사를 별도의 페이지에서 시작하는 것이 좋습니다. 주요 정보가 여러 페이지에 걸쳐 있지 않고 함께 그룹화되어 있으면 사용자가 인쇄물을 훨씬 쉽게 구성할 수 있습니다.
이것을 인쇄 스타일시트에 추가하면 기사가 항상 새 페이지에서 시작됩니다.
article { page-break-before: always; }같은 페이지에 정렬되지 않은 목록을 함께 유지하는 것도 좋은 아이디어입니다.
ul { page-break-inside: avoid; }한 단계 더 나아가 표제, 이미지, 큰따옴표, 표 및 기타 목록 요소에 대해 동일한 작업을 수행해 보겠습니다.
h1, h2, h3, h4, h5, h6 { page-break-after:avoid; page-break-inside:avoid } img { page-break-inside:avoid; page-break-after:avoid; } blockquote, table, pre { page-break-inside:avoid } ul, ol, dl { page-break-before:avoid } [/code] </pre> <img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" /> <pre> <h3>Page margin measurements</h3> We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing. body, article { width: 100%; margin: 0; padding: 0; }여기에서 출력물을 위해 간격을 미세 조정할 수 있습니다. 웹 디자인에서 센티미터를 보는 경우는 그리 흔하지 않지만 페이지의 테두리를 결정하는 목적으로는 훌륭합니다.
@page규칙은 간격을 타겟팅하는 방법입니다. 이 예에서는 모든 테두리 주위에 2cm를 허용합니다. 이 측정은 더 많거나 더 적은 공간을 허용하도록 사용자 정의할 수 있습니다. 예를 들어, 사용자가 메모를 하고 더 큰 여백을 허용하는 것이 도움이 될 수 있습니다.
@page { margin: 2cm; }페이지를 인쇄하여 바인더에 넣으려는 경우 다른 모든 페이지의 여백을 조정할 수 있는 옵션이 있다는 점에 유의하십시오. 왼쪽 페이지는 1, 3, 5페이지… 오른쪽 페이지는 2, 4, 6페이지…
@page :left { margin: 1cm 3cm 1cm 2cm; } @page :right { margin: 1cm 2cm 2cm 3cm; }첫 번째 페이지 사용자 지정은 특정 경우에 유용합니다.
:firstpage 의사 클래스를 사용하여 첫 번째 인쇄 페이지의 스타일을 결정할 수 있습니다.@page :first { margin: 1cm 2cm; }
인쇄가 스트레스를 받습니까? 다음은 전문가처럼 프로젝트를 인쇄하기 위한 몇 가지 팁입니다. 이미지 및 소개 텍스트 아이디어
이것들은 귀하의 사이트에 적용되거나 적용되지 않을 수 있지만 그럼에도 불구하고 참고하는 것이 좋습니다.
이미지가 잘리고 인쇄된 페이지 가장자리 위로 번지는 것을 방지하기 위해 최대 너비 선언을 추가하면 이를 방지할 수 있습니다.
img { max-width: 100% !important; }멋진 환영 메시지는 큰 도움이 됩니다. 인쇄 콘텐츠는 잠시 동안 주변에 있을 것이므로 항상 친근한 메시지나 알림을 포함하는 것이 좋습니다.
header:before { display: block; content: "Thank you for visiting my website at www.mysite.com. Please check back for upcoming specials and new products."; margin-bottom: 15px; padding: 5px 8px; font-style: italic; }이제 인쇄 고려 사항의 기본 사항 중 일부를 다루었으므로 이러한 아이디어를 인쇄 스타일시트에 쉽게 통합할 수 있습니다. 인쇄는 우리가 웹을 사용할 때 궁극적으로 생각하는 것은 아니지만 사용자가 콘텐츠에 액세스하는 방식에 관계없이 동일한 훌륭한 경험을 제공할 수 있는 좋은 방법입니다.
