과거에는 웹 페이지의 프린터 친화적 인 버전을 만드는 것은 레이아웃과 서식을 수정하여 별도의 페이지를 디자인하여 인쇄 할 때 만족스러운 결과를 얻을 수 있도록하는 것을 의미합니다. 이제 구조화 된 XHTML 및 CSS를 사용하면 훨씬 적은 노력으로 동일한 효과를 얻을 수 있습니다. 화면 디스플레이에서 인쇄 효과까지 대부분의 웹 페이지
과거에는 웹 페이지의 프린터 친화적 인 버전을 만드는 것은 레이아웃과 서식을 수정하여 별도의 페이지를 디자인하여 인쇄 할 때 만족스러운 결과를 얻을 수 있도록하는 것을 의미합니다. 이제 구조화 된 XHTML 및 CSS를 사용하면 훨씬 적은 노력으로 동일한 효과를 얻을 수 있습니다.
화면 디스플레이에서 인쇄 효과까지
대부분의 웹 페이지는 컴퓨터 화면에서보기에 적합하도록 설계되었습니다. 그러나 때때로 사용자는 특정 페이지를 인쇄하거나 장기 기록을 유지하거나 편리한 오프라인 참조로 사용하기 위해서는 특정 페이지를 인쇄해야합니다.
문제는 이제 웹 페이지를 컴퓨터 컬러 화면에서 시선을 사로 잡고 다채롭게 보이게하는 많은 기능이 웹 페이지의 인쇄 된 버전 (특히 프린터가 흑백 일 때 동일한 효과를 보여줄 수 없다는 것입니다. 그레이 스케일 인쇄에 감동 할 때, 색상의 조합은 (원래) 대비 효과를 잃게됩니다. 그래픽은 왜곡되어 인쇄하는 데 너무 오래 걸립니다. 웹 페이지에서 중요한 역할을하는 탐색 버튼은 인쇄 페이지에서 쓸모가 없습니다.
이러한 문제를 극복하기 위해 웹 제작자는 종종 방문자가 인쇄하고자하는 프린터 친화적 인 페이지 버전을 설계합니다. 프린터 친화적 인 버전에는 일반적으로 기본 웹 페이지와 동일한 컨텐츠가 포함되지만 대부분의 그래픽, 배경 및 탐색 요소가 생략됩니다. 이 페이지는 또한 색상을 어떤 형태로 변환하여 허용 가능한 회색차 이미지를 생성합니다.
CSS 솔루션
구조화 된 XHTML 태그 및 CSS 형식을 사용하여 컨텐츠 및 표현을 분리하는 한 가지 장점은 CSS 스타일을 변경함으로써 컨텐츠를 쉽게 재구성 할 수 있다는 것입니다. 따라서 프린터 친화적 인 페이지를 만드는 것은 다른 CSS 파일을 동일한 XHTML 페이지에 연결하는 것입니다.
스크린 스타일 시트와 인쇄 스타일 시트를 동시에 동일한 XHTML 파일에 연결할 수 있으므로 프린터 친화적 인 페이지를 개별적으로 만들 필요가 없습니다. 프린터 친화적 인 스타일 시트만으로도 충분합니다. 링크 코드에 멀티미디어 유형 파일을 추가하면 화면 출력에 대해 팔로우하거나 무시할 CSS 규칙 및 인쇄용 규칙이 브라우저에 알려줍니다.
다음은 한 쌍의 CSS 파일에 링크하는 예입니다.
다음은 인용 된 내용입니다.
<linkrel = stylesheettype = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print.css/>
이전 브라우저를 지원 해야하는 경우 CSS1의 미디어 디스크립터 화면 및 인쇄를 사용해야합니다. 그것들은 상호 배타적이므로 화면 디스플레이 용 페이지를 생성 할 때 브라우저는 인쇄 스타일 시트를 무시하고 그 반대도 마찬가지입니다. 따라서 각 스타일 시트에는 동일한 스타일 선택기가 포함되어야하지만 다른 출력 장치에 대해 페이지 스타일을 별도로 생성하기위한 다른 규칙 선언이 있습니다.
CSS를 단순화하십시오
이전 브라우저를 관리하고 사용자가 CSS2 지원 브라우저 (예 : IE5 이상 또는 NetscApe6 이상)를 사용하고 있다고 가정하면 새로운 모든 미디어 디스크립터를 사용하여 CSS 코드를 크게 단순화 할 수 있습니다.
다음은 CSS2 미디어 디스크립터를 사용한 연결의 예입니다.
다음은 인용 된 내용입니다.
<linkrel = stylesheettype = text/cssmedia = allhref = mysite-all.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print2.css/>
이 링크는 이전 링크와 거의 동일합니다. 차이점은 CSS 파일에 인쇄 매체 스타일이 포함되어 있다는 것입니다.
CSS 파일의 Media = All과 관련된 스타일을 화면 디스플레이, 인쇄 및 기타 모든 미디어에 적용 할 수 있으므로 모든 생성 된 스타일을이 파일에 넣을 수 있습니다. 미디어 = 인쇄와 개별적으로 연관된 CSS 파일은 페이지가 모든 미디어 파일의 모든 스타일을 상속하기 때문에 훨씬 작을 수 있으므로 인쇄 매체 파일에 이러한 스타일을 복사 할 필요가 없습니다.
인쇄 매체 CSS 파일에 필요한 유일한 스타일은 인쇄용 페이지 스타일을 변경하거나 추가하는 스타일입니다. 일반적으로 이것은 그래픽 및 내비게이션 내용을 포함하는 DIV를 표시하고 본체 라벨 및 기본 DIV의 너비 및 빈 설정을 인쇄물에 적합한 설정으로 대체하는 것을 금지하는 일부 스타일에 지나지 않습니다.
이 트릭은 모든 미디어 CSS 파일 및 인쇄 매체 CSS 파일이 동일한 계단식 스타일 규칙으로 결합되기 때문에 작동합니다. 따라서 이러한 CSS 파일의 링크 순서가 매우 중요합니다. 미디어 파일 링크를 인쇄하기 전에 모든 미디어 파일 링크를 배치해야합니다.
인쇄 매체 CSS 파일 사용에 대한 몇 가지 팁은 다음과 같습니다.
DIV의 표시를 금지하는 경우 디스플레이를 사용해야합니다. 가시성 대신 없음 : 숨겨진.
도트 나 인치는 화면 디스플레이를위한 올바른 측정 단위는 아니지만 인쇄물에 대한 올바른 측정 단위입니다.
미디어 파일을 인쇄하는 데 사용되는 선택기는 모든 미디어 파일에서 사용하는 선택기와 정확히 동일해야합니다. 예를 들어, div #sidenav를 사용하여 모든 미디어 파일에서 id를 sidenav로 divs를 선택하는 경우 미디어 파일을 인쇄하는 데 #sidenav를 사용하면 목표를 성공적으로 달성하지 못할 수 있습니다.
한 파일에서 다른 파일로 변경되는 규칙 선언을 명시 적으로 강제로 대체하는 것을 잊지 마십시오. 예를 들어, 모든 미디어 파일에서 요소에 대한 패딩을 설정하고 인쇄물 에서이 패딩을 제거하려는 경우 인쇄 매체 파일에서 패딩 선언을 무시하는 스타일을 추가하는 것만으로는 충분하지 않습니다. 이전 설정을 대체하려면 패딩 : 0PT를 명시 적으로 설정해야합니다.
DreamWeaver와 같은 그래픽 편집기를 사용하는 경우 인쇄 효과 대신 생성 된 페이지의 화면 효과를 미리 볼 수 있습니다. DreamWeaver 디자인보기 창에서 인쇄 스타일을 미리 보려면 인쇄 매체 CSS 파일로의 링크를 Media = Screen으로 변경하십시오. 이를 통해 인쇄 매체 파일에서 CSS 스타일을 미리 볼 수 있습니다. 페이지를 게시하기 전에 미디어 디스크립터를 미디어 = 인쇄로 다시 변경하는 것을 잊지 마십시오.
방문자에게 프린터 친화적 인 웹 페이지를 제공 해야하는 경우 더 이상 원래 페이지의 별도 버전을 만들 필요가 없습니다. Media = Print Media Descriptor와 함께 CSS 스타일 시트에 링크를 추가하면 모든 XHTML/CSS 페이지를 프린터 친화적 인 페이지로 변환 할 수 있습니다.