더 나은 인쇄를 위해 CSS를 사용하여 인쇄 스타일 시트를 만들려면 화면이 아닌 인쇄 된 페이지에 최적화 된 특정 스타일을 정의해야합니다. 다음은 다음 방법에 대한 단계별 안내서입니다.
print.css
와 같은 이름을 지정할 수 있습니다. 이 파일에는 인쇄와 관련된 모든 스타일이 포함됩니다. 인쇄 스타일 시트를 HTML에 연결하십시오 : HTML 파일에서 <link>
태그 내 media
속성을 사용하여 인쇄 스타일 시트를 연결하십시오. 예를 들어:
<code class="html"><link rel="stylesheet" type="text/css" media="print" href="print.css"></code>
인쇄 별 스타일 정의 : print.css
파일에서 화면 스타일 시트에서 스타일을 대체 할 수 있습니다. 일반적인 조정에는 다음이 포함됩니다.
@media print
규칙 사용 : 또는 @media print
규칙을 사용하여 기본 CSS 파일 내에 직접 인쇄 별 스타일을 포함 할 수 있습니다. 모든 스타일을 하나의 파일로 유지하려는 경우 유용합니다. 예를 들어:
<code class="css">@media print { body { font-size: 12pt; } nav, .sidebar { display: none; } }</code>
이 단계를 수행하면 웹 페이지의 인쇄 품질과 유용성을 향상시키는 인쇄 스타일 시트를 만들 수 있습니다.
인쇄용 컨텐츠를 최적화 할 때 여러 CSS 속성이 특히 유용합니다. 주요 속성 목록과 활용 방법은 다음과 같습니다.
글꼴 크기 : 인쇄 된 페이지에서 더 나은 가독성을 위해 글꼴 크기를 조정하십시오. 예를 들어:
<code class="css">body { font-size: 12pt; }</code>
라인 높이 : 가독성을 높이기 위해 선 높이를 늘리고 텍스트를 쉽게 읽을 수 있도록합니다. 예를 들어:
<code class="css">p { line-height: 1.5; }</code>
색상 : 인쇄 친화적 인 색상을 사용하십시오. 흑백 인쇄의 경우 텍스트 및 배경색 대비가 높는지 확인하십시오. 예를 들어:
<code class="css">body { color: #000000; background-color: #ffffff; }</code>
디스플레이 : 내비게이션 메뉴 또는 사이드 바와 같이 인쇄 버전에서 필요하지 않은 요소를 숨 깁니다. 예를 들어:
<code class="css">nav, .sidebar { display: none; }</code>
Page-Break-Bee-Be-Beefore 및 Page-Break-FAFTER : 컨텐츠를 함께 유지하기 위해 페이지 브레이크가 발생하는 위치 제어. 예를 들어:
<code class="css">h1 { page-break-before: always; } .section { page-break-after: avoid; }</code>
과부 와 고아 : 페이지 상단 또는 하단에 텍스트 한 줄이 남아 있지 않도록합니다. 예를 들어:
<code class="css">p { widows: 2; orphans: 2; }</code>
이러한 CSS 속성을 신중하게 선택하고 적용하면 웹 콘텐츠의 인쇄 품질을 크게 향상시킬 수 있습니다.
인쇄 할 때 이미지와 레이아웃이 올바르게 형식화되도록하려면 세부 사항에 특별한주의를 기울여야합니다. 다음은이를 달성하기위한 몇 가지 전략입니다.
이미지 크기 및 해상도 : max-width
속성을 사용하여 이미지가 인쇄 여백 내에 맞는지 확인하고 고품질 이미지에 resolution
사용하는 것을 고려하십시오. 예를 들어:
<code class="css">img { max-width: 100%; } @media print { img { resolution: 300dpi; } }</code>
이미지 포지셔닝 : 이미지가 가장 효과적인 위치에 배치되도록하십시오. float
또는 clear
속성을 사용하여 이미지 주변의 컨텐츠 흐름을 관리하십시오. 예를 들어:
<code class="css">.article-image { float: left; margin: 0 15px 15px 0; }</code>
레이아웃 조정 : 인쇄 형식을 수용하도록 레이아웃을 조정하십시오. display: none
인쇄물에 필요하지 않은 요소를 숨기고 인쇄 영역에 맞게 폭을 조정하십시오. 예를 들어:
<code class="css">.sidebar { display: none; } .main-content { width: 100%; }</code>
페이지 브레이크 : page-break-before
- page-break-after
사용하여 페이지 브레이크가 발생하는 위치를 제어하여 이미지와 중요한 콘텐츠가 함께 유지되도록합니다. 예를 들어:
<code class="css">.figure { page-break-inside: avoid; }</code>
배경 이미지 및 색상 : 대부분의 프린터는 배경 이미지 나 색상을 인쇄하지 않음을 기억하십시오. background
속성을 사용하여 중요한 콘텐츠가 손실되지 않도록하십시오. 예를 들어:
<code class="css">.important-section { background: none; }</code>
이러한 기술을 구현하면 이미지와 레이아웃이 인쇄에 적합한 지 확인할 수 있습니다.
인쇄 스타일 시트에서 페이지를 효과적으로 중단하는 것은 인쇄 된 컨텐츠의 흐름과 일관성을 유지하는 데 중요합니다. 모범 사례는 다음과 같습니다.
원치 않는 휴식 방지 : page-break-inside: avoid
. 예를 들어:
<code class="css">table, figure { page-break-inside: avoid; }</code>
요소 전후에 페이지를 제어하는 데있어 : page-break-before
-Be- page-break-after
사용하여 특정 요소 전후에 페이지가 나눌 수 있습니다. 예를 들어, 각 H1 전에 새 페이지를 시작하려면 :
<code class="css">h1 { page-break-before: always; }</code>
고아와 과부를 피하십시오 : widows
과 orphans
사용하여 한 줄의 텍스트 라인이 페이지의 시작 또는 끝에 남아있는 것을 방지합니다. 예를 들어:
<code class="css">p { widows: 2; orphans: 2; }</code>
긴 콘텐츠 처리 : 긴 콘텐츠의 경우 page-break-after: avoid
사용하십시오. 예를 들어:
<code class="css">.section { page-break-after: avoid; }</code>
논리적 브레이크 사용 : 관련 컨텐츠를 함께 그룹화하여 논리적 휴식을 보장합니다. 예를 들어, 다음 단락으로 제목을 유지하십시오.
<code class="css">h2 p { page-break-before: avoid; }</code>
이러한 모범 사례를 따르면 페이지 브레이크를 효과적으로 관리하는 인쇄 스타일 시트를 만들어 응집력 있고 전문적인 인쇄 문서를 보장 할 수 있습니다.
위 내용은 CSS를 사용하여 더 나은 인쇄를 위해 인쇄 스타일 시트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!