XHTML CSS 페이지를 프린터 페이지로 변환_HTML/Xhtml_웹페이지 제작

과거에는 인쇄용 웹 페이지 버전을 만든다는 것은 인쇄 시 보기 좋게 보이도록 레이아웃과 서식을 수정하여 별도의 페이지를 디자인하는 것을 의미했습니다. 이제 구조화된 XHTML과 CSS를 사용하면 훨씬 적은 노력으로 동일한 효과를 얻을 수 있습니다.
화면 디스플레이부터 프린팅 효과까지
대부분의 웹페이지는 컴퓨터 화면에서 볼 수 있도록 설계되어 있습니다. 그러나 때때로 사용자는 장기간 기록을 유지하거나 편리한 오프라인 참조로 사용하기 위해 특정 페이지를 인쇄해야 할 수도 있습니다.
이제 문제는 웹 페이지를 컬러 컴퓨터 화면에서 눈길을 사로잡고 다채롭게 보이게 만드는 많은 기능이 인쇄된 웹 페이지 버전에서는 동일한 효과를 발휘하지 못한다는 것입니다. 특히 프린터가 흑백인 경우에는 더욱 그렇습니다. 하얀색. . 회색조 인쇄로 다운그레이드하면 색상 조합의 대비가 떨어지고 그래픽이 왜곡되어 인쇄하는 데 시간이 너무 오래 걸리며 웹 페이지에서 중요한 역할을 하는 탐색 버튼도 제대로 인쇄되지 않습니다.
이러한 문제를 극복하기 위해 웹 제작자는 방문자가 인쇄하고 싶은 욕구를 갖도록 페이지의 인쇄용 버전을 디자인하는 경우가 많습니다. 인쇄용 버전은 일반적으로 기본 웹 페이지와 동일한 내용을 포함하지만 대부분의 그래픽, 배경 및 탐색 요소를 생략합니다. 또한 이 페이지는 색상을 어떤 형식으로 변환하여 허용 가능한 회색조 이미지를 생성합니다.
CSS 솔루션
구조화된 XHTML 마크업과 CSS 서식을 사용하여 콘텐츠와 프레젠테이션을 분리할 때의 한 가지 장점은 CSS 스타일을 변경하여 콘텐츠의 형식을 쉽게 다시 지정할 수 있다는 것입니다. 따라서 프린터 친화적인 페이지를 만드는 것은 다른 CSS 파일을 동일한 XHTML 페이지에 연결하는 문제입니다.
화면 스타일시트와 인쇄 스타일시트를 모두 동일한 XHTML 파일에 연결할 수 있으므로 별도의 프린터용 페이지를 만들 필요 없이 프린터용 스타일시트만 만들면 됩니다. 링크 코드에 멀티미디어 유형 파일을 포함하면 화면 출력에 대해 따르거나 무시할 CSS 규칙과 인쇄 출력에 사용할 규칙을 브라우저에 알려주는 것입니다.
다음은 CSS 파일 쌍에 연결하는 예입니다.
인용 내용은 다음과 같습니다.


이전 브라우저를 지원해야 하는 경우 CSS1 미디어 설명자 화면을 고수하고 인쇄해야 합니다. 이는 상호 배타적이므로 브라우저는 화면 표시용 페이지를 생성할 때 인쇄 스타일 시트를 무시하고 그 반대의 경우도 마찬가지입니다. 따라서 각 스타일 시트에는 동일한 스타일 선택기가 포함되어야 하지만 서로 다른 출력 장치에 대해 별도로 페이지 스타일을 생성하려면 서로 다른 규칙 선언이 있어야 합니다.
　CSS 단순화
이전 브라우저 버전 관리를 포기하고 사용자가 CSS2(예: IE5 이상 또는 Netscape6 이상)를 지원하는 브라우저를 사용하고 있다고 가정한다면, 새로운 모든 미디어 설명자를 사용하여 CSS 코드를 크게 단순화할 수 있습니다.
다음은 CSS2 미디어 설명자를 사용하는 링크의 예입니다.
인용 내용은 다음과 같습니다.


이 링크는 이전 링크와 거의 동일합니다. 차이점은 CSS 파일에 인쇄 매체의 스타일이 포함되어 있다는 것입니다.
CSS 파일의 media="all"과 연관된 스타일은 화면 표시, 인쇄 및 기타 모든 미디어에 적용할 수 있으므로 생성한 모든 스타일을 이 파일에 넣을 수 있습니다. media="print"와 관련된 CSS 파일만 페이지가 모든 미디어 파일의 모든 스타일을 상속하므로 훨씬 더 작을 수 있으므로 해당 스타일을 인쇄 미디어 파일에 복제할 필요가 없습니다.
인쇄 매체 CSS 파일에 필요한 유일한 스타일은 인쇄 출력을 위한 페이지 스타일을 변경하거나 추가하는 스타일입니다. 일반적으로 이는 그래픽 및 탐색 콘텐츠가 포함된 div의 표시를 억제하고 본문 태그와 기본 div의 너비 및 여백 설정을 인쇄에 적합한 설정으로 바꾸는 스타일에 지나지 않습니다.
이 트릭은 모든 미디어 CSS 파일과 인쇄 미디어 CSS 파일이 동일한 계단식 스타일 규칙으로 결합되기 때문에 작동합니다. 따라서 이러한 CSS 파일이 링크되는 순서는 매우 중요합니다. 모든 미디어 파일 링크는 인쇄 미디어 파일 링크 앞에 위치해야 합니다.
다음은 인쇄 미디어 CSS 파일 사용에 대한 몇 가지 팁입니다.
div 표시를 비활성화하려면 visible:hidden 대신 display:none을 사용하세요.
포인트(pt)나 인치(in)는 화면 표시의 올바른 측정 단위가 아니지만 인쇄 출력의 올바른 측정 단위입니다.
인쇄 미디어 파일에 사용하는 선택기는 모든 미디어 파일에 사용하는 선택기와 정확히 동일해야 합니다. 예를 들어 div#sidenav를 사용하여 모든 미디어 파일에서 ID가 sidenav인 div를 선택하는 경우 인쇄된 미디어 파일에서 #sidenav를 사용하면 목표를 성공적으로 달성하지 못할 수 있습니다.
한 파일에서 다른 파일로 변경되는 재정의 규칙 선언을 명시적으로 강제하는 것을 잊지 마세요. 예를 들어 모든 미디어 파일의 요소에 대해 패딩을 설정하고 인쇄 출력에서 ​​패딩을 제거하려는 경우 인쇄 미디어 파일에서 패딩 선언을 무시하는 스타일을 추가하는 것만으로는 충분하지 않습니다. 명시적으로 패딩을 설정해야 합니다. :0pt 이전 설정을 대체합니다.
Dreamweaver와 같은 그래픽 편집기를 사용하는 경우 생성된 페이지를 인쇄된 출력이 아닌 화면에서 미리 볼 수 있습니다. Dreamweaver의 디자인 보기 창에서 인쇄 스타일을 미리 보려면 인쇄 미디어 CSS 파일에 대한 링크를 media="screen"으로 변경합니다. 이를 통해 인쇄 매체 파일에서 CSS 스타일을 미리 볼 수 있습니다. 페이지를 게시하기 전에 미디어 설명자를 다시 media="print"로 변경하는 것을 잊지 마세요.
방문자에게 프린터 친화적인 웹페이지를 제공해야 할 때 더 이상 원본 페이지의 별도 버전을 만들 필요가 없습니다. media="print" 미디어 설명자를 사용하여 CSS 스타일시트에 링크를 추가하면 모든 XHTML/CSS 페이지를 인쇄용 페이지로 변환할 수 있습니다.