1. 인쇄 스타일 추가 1. 아래와 같이 화면 표시 및 인쇄용 CSS 파일을 준비합니다. 화면 표시용 CSS: 인쇄용 CSS: 2. 가져오기 방법: <br> @import url("css/printstylesheet.css") 인쇄;<br> </스타일></p> <p>3. 화면 표시 스타일과 인쇄 스타일을 CSS 파일에 직접 작성: <br> @미디어 인쇄 {}{<br> h1 {<br> 색상: 검정색;<br> }<br> h2 {}{<br> 색상: 회색;<br> }<br> }<br> @media print의 내용은 인쇄된 내용에만 유효하며, 다른 내용은 화면 표시 스타일입니다. </p> <p>기타: <br> 미디어 유형을 지정하지 않는(또는 media="all"을 활용하는) 스타일시트를 만드는 것이 유용한 경우가 많습니다. 뭔가 특별한 것을 정의할 준비가 되었을 때 <br> 인쇄 규칙에 관해서는 별도의 스타일 시트를 만들고 인쇄 시 보기 좋지 않은 스타일을 비활성화할 수 있습니다. 이 접근 방식을 사용할 때의 한 가지 문제점은 프린터 스타일이 실제로 기본 스타일 시트를 재정의하는지 확인해야 한다는 것입니다. 이제 사용할 준비가 되었습니다! 중요합니다.</p> <p>2. 인쇄 스타일에 대한 참고사항: </p> <p>1. 브라우저는 기본적으로 CSS의 배경 콘텐츠를 인쇄할 수 없으므로 인쇄 스타일에 배경을 사용하지 않는 것이 좋습니다. <br> 배경을 인쇄하도록 설정한 경우에만 배경을 인쇄할 수 있습니다(IE 고급 옵션에서 선택 사항). 배경이 인쇄되더라도 그 위에 겹쳐진 텍스트를 압도할 수 있습니다. <br> 이는 특히 색상이 있는 배경의 모니터에서는 강하게 대비되는 텍스트의 경우에 해당되지만 흑백 프린터로 인쇄하면 이 배경과 혼합됩니다. <br> 배경:없음 배경 제거<br> 사진과 색상. </p> <p> 다음과 같이 background-color 속성을 사용하여 배경색을 흰색으로 설정할 수 있습니다. 배경: 흰색. 따라서 배경: 흰색;<br> 이러한 명령문은 배경색을 흰색으로 설정할 뿐만 아니라 모든 배경 이미지를 제거합니다. 이 배경의 바로가기 속성을 사용하세요 <br> 매우 적은 코드로 흰색 배경을 설정하고 이미지를 제거하는 두 가지 작업을 수행할 수 있습니다. <br> <br> 2. 인쇄된 내용에 사진이 필요하면 HTML 코드에 추가하세요. </p> <p>3. 인쇄 설정은 물리적 단위를 사용하므로 크기는 픽셀(px)을 사용하지 않는 것이 가장 좋습니다. </p> <p>4. 불필요하거나 보조적인 콘텐츠를 숨깁니다. 디스플레이: 없음 </p> <p>5. 콘텐츠가 떠다니지 않도록 하세요. 일부 브라우저에서는 플로팅 div를 인쇄할 때 문제가 발생할 수 있으므로 특별한 주의가 필요합니다. <br> float: none;과 같이 인쇄된 스타일시트에 부동 블록을 사용하지 마십시오. 예를 들어 Gecko 기반 브라우저 <br> (예: Netscape 6) 사용자가 이를 사용하여 인쇄물 페이지를 탐색하면 부동 요소의 내용이 잘립니다. <br> 내용은 프린터로 전송되지 않으며 다음 페이지에 내용의 흔적도 없으며 사라집니다. </p> <p>6. HTML 코드에서 중요한 내용에 우선순위를 두도록 최선을 다하세요. 이렇게 하면 인쇄 스타일에서 많은 문제를 줄일 수 있습니다. </p> <p>7. 인쇄는 웹 페이지와 다르므로, 흰색 여백을 남겨두어야 하며, 단위는 인치(in)입니다. </p> <p>8. 페이지의 모든 텍스트가 검은색으로 인쇄되도록 하려면 와일드카드 선택기(54페이지 참조)와 !important를 사용하여 각 텍스트를 구분하는 변수를 만듭니다. <br> 태그는 모두 단일 스타일의 검정색 텍스트로 형식화됩니다. <br> *{ 색상: ##000# !중요 }</p> <p>9. 인쇄 시 링크 URL 정보 표시: 고급 선택기 사용: after 및 content라는 고급 CSS 속성 <br> 스타일 요소 끝에 화면에 표시되지 않는 텍스트를 인쇄합니다. <br> 안타깝게도 :after 선택기와 콘텐츠 속성 트릭은 Internet Explorer 6 이하에서는 작동하지 않습니다. <br> (이 글을 쓰는 시점에서는 IE 7에서도 작동하지 않습니다.) 하지만 Firefox와 Safari에서는 작동하므로 최소한 명확하게 알 수 있습니다. <br> 방문자가 브라우저를 사용할 수 있도록 URL을 설명하십시오. </p> <p> 이렇게 하려면 각 링크 뒤에 URL을 인쇄하는 인쇄 스타일시트에 스타일을 추가하세요. 추가 텍스트 항목을 추가할 수도 있습니다 <br> 보기 좋게 표시하려면 괄호를 사용하세요. <br> a:after {content: " (" attr(href) ") ";}</p> <p> 하지만 이 CSS는 외부 링크와 내부 링크를 구분하지 않기 때문에 동일한 웹사이트의 다른 페이지와 관련하여 쓸모없는 <br>도 인쇄합니다. 문서 링크: "홈페이지 방문(../../index.html)." 약간의 CSS 3 마법을 사용하면 이 스타일을 <br>만 입력하도록 할 수 있습니다. 다음과 같이 절대 URL(예: http://로 시작하는 URL)을 인쇄하세요. <br> a[href^="<a href="http://%22%5D:after">http://"]:after</a> {content: " (" attr(href) ") ";}</p> <p>10. 인쇄에 페이지 나누기 추가: 널리 알려진 두 가지 속성은 페이지 나누기 전과 페이지 나누기 후입니다. <br> page-break-before는 웹 브라우저에 지정된 스타일 앞에 페이지 나누기를 삽입하도록 지시합니다. 이전에 페이지 나누기 사용<br> 이 속성을 사용하면 이미지가 새 페이지에 인쇄되고 전체 페이지에 맞춰집니다. <br> 요소를 인쇄된 페이지의 마지막 항목으로 표시하려면 해당 요소의 스타일에 page-break-after: Always를 추가하세요. </p> <p> 다음과 같이 .break_after 및 .break_before라는 이름의 두 가지 클래스 스타일을 만듭니다. <br> .break_before { 페이지 나누기 전: 항상 }<br> .break_after { 페이지 나누기 후: 항상 }</p> <p> 그런 다음 페이지 상단이나 하단에 인쇄해야 하는 요소에 이러한 스타일을 선택적으로 적용할 수 있습니다. </p> <p>3. 테스트 인쇄 스타일</p> <p>일반적으로 테스트를 위해 프린터를 사용하는 것은 불가능합니다. IE 브라우저의 "파일" 메뉴 표시줄에 "인쇄 미리보기"가 있는데 이를 사용할 수 있습니다. <br> 테스트할 인쇄 미리보기입니다. <br> </p>
