마크업 언어 - 인쇄 스타일_HTML/Xhtml_웹 페이지 제작

웹 교육 네트워크의 HTML 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요. 위: 마크업 언어 - 웹 페이지에 적용되는 CSS 스타일입니다. 11장 인쇄 스타일 이전 10장에서 문서에 CSS를 적용하는 여러 가지 방법을 논의했습니다. 이 장에서는 인쇄 스타일을 살펴보고 몇 가지 CSS 규칙만 사용하여 페이지 인쇄를 위한 CSS 규칙을 지정하는 방법에 대해 설명했습니다. Script House HTML Tutorial 칼럼으로 돌아가려면 여기를 클릭하세요. CSS 튜토리얼을 보려면 여기를 클릭하세요.
위: 마크업 언어 - 웹 애플리케이션 CSS 스타일 . 11장 인쇄 스타일
이전 10장에서 문서에 CSS를 적용하는 여러 가지 방법에 대해 논의했습니다. 이 장에서는 인쇄 스타일을 연구하고 페이지 인쇄를 위한 CSS 규칙을 구체적으로 지정하는 방법에 대해 설명했습니다. 이를 통해 구조화된 마크업 콘텐츠가 보장됩니다.
먼저 미디어 유형과 기기별 CSS 제공과의 관계를 살펴보겠습니다. 인쇄할 때 사용되는 스타일을 지정하는 방법은 무엇입니까?
이 질문에 답하기 전에 CSS에 대한 미디어 유형(미디어)을 지정할 수 있다는 개념을 숙지해야 합니다. 미디어 유형을 선언하면 특정 미디어에 대해 스타일이 작동하게 됩니다. .
예를 들어 링크의 스타일 시트를 컴퓨터 화면에만 적용하려면 다음과 같이 태그에 미디어 속성을 추가할 수 있습니다.

media="screen" href="screenstyles.css" />

이전 코드는 태그가 연결되었는지 확인할 수 있습니다. to 스타일은 컴퓨터 화면에만 사용됩니다. "컴퓨터 화면 외에 어떤 다른 미디어를 타겟팅할 수 있습니까?"라고 질문하고 싶을 수도 있습니다. 미디어 유형
위의 예에 사용된 화면 외에도 선택할 수 있는 다양한 미디어 유형이 있습니다. 다음은 CSS2.1 표준에서 W3C가 정의한 대로 모두 인식되는 미디어 유형입니다(http://www에서 사용 가능). .php.cn/found): all: 모든 장치에 적용 가능 점자: 점자 촉각 피드백 장치에 적합 양각: 점자 페이지 프린터에 적합 handeld: 휴대용 장치에 적합합니다(일반적으로 화면이 작고 대역폭이 제한됨). 인쇄: 페이지가 매겨진 콘텐츠 및 인쇄 미리보기 모드를 사용하여 화면에 표시된 문서에 적합합니다. 프로젝션: 오버헤드 프로젝터와 같은 프로젝션 프레젠테이션에 적합합니다. 페이지가 매겨진 미디어 형식에 대한 자세한 내용은 페이지가 매겨진 콘텐츠(//m.sbmmt.com/)를 참조하세요. 화면: 주로 컬러 컴퓨터 화면에 적합합니다. speech: 음성 합성기에 적합합니다. 참고: CSS2에는 aural이라는 유사한 기능을 가진 미디어 유형이 있습니다. 자세한 내용은 청각 스타일 시트 부록(//m.sbmmt.com/)을 참조하세요. tty: 고정 너비 텍스트 형식을 사용하는 미디어(예: 전신 스위치, 터미널 또는 디스플레이 기능이 제한된 휴대용 장치)에 적합합니다. 개발자는 tty에서 픽셀 길이 단위를 사용해서는 안 됩니다. tv: TV 유형 장치용(낮은 해상도, 낮은 색상, 제한된 스크롤 기능, 음향 효과 사용 기능).
이 장에서는 인쇄, 스크린 등 모든 미디어 유형에 초점을 맞춥니다.
                                                                                      #p# 미디어를 지정하는 두 가지 방법
W3C에는 CSS에 대한 미디어 유형을 지정하는 두 가지 방법이 있습니다. 그 중 하나는 태그와 미디어 속성을 사용하는 것입니다. 이 두 가지 방법을 비교해 보겠습니다. 방법 A: 미디어 속성

media="screen" href="screenstyles.css" />

앞의 예와 유사하게, 방법 A는 screenstyles.css가 컴퓨터 화면에만 사용되어야 한다고 지정합니다. 이렇게 하면 인쇄, 프로젝션, 휴대용 장치 탐색, 화면 판독기 사용 등이 필요하지 않습니다. . 그렇게 하면 screenstyles.css의 규칙이 적용됩니다. 부분 지원
한 가지 중요한 점은 모든 미디어 유형을 엄격하게 지원하는 것은 다소 비현실적이라는 것입니다.

media="handheld" href="screenstyles.css" />

방법 B: @media 또는 @import

두 번째 사양 방법 미디어 유형은 @import와 @media 선언을 결합하는 것입니다. 예를 들어 @import를 사용하여 외부 스타일 시트를 도입할 때 이에 대한 미디어 유형을 지정할 수도 있습니다.
마찬가지로 @media 규칙은 target 방법 A와 유사한 특정 미디어에 대한 규칙 단락은 @media를 사용하여 인쇄용 스타일을 구체적으로 지정합니다. 안에 넣거나
방법 A에서는
이전 예에서는 여러 미디어 유형을 지정하여 screenandprint.css가 화면 표시와 인쇄 미디어 모두에 사용되고 @media가 사용되었습니다. 규칙은 인쇄별 스타일을 구분하는 데 사용됩니다.
미디어 유형을 지정하는 두 가지 방법을 살펴본 후 실제로 이를 사용하여 화면 표시 및 인쇄에 대한 스타일을 제공하는 방법을 살펴보겠습니다.
                                                                        #p#
화면 표시와 인쇄를 위한 별도의 스타일
동일한 문서에 대해 하나는 표시용이고 다른 하나는 인쇄용 CSS를 제공한다고 가정해 보겠습니다.
I. 전체 웹사이트의 기본 스타일 시트(styles.css)를 참조하려면 태그를 사용하세요. styles.css의 콘텐츠는 다른 외부 스타일 시트를 도입하는 단순한 @import 규칙일 뿐입니다. Netscape 4.x) 스타일 설정을 숨깁니다.
페이지의 에서 기본 스타일 시트 styles.css에 대한 링크

동시에 특별히 인쇄 디자인을 위한 또 다른 스타일 시트(print.css)도 만듭니다. print.css에는 다음과 같이 썼습니다. 페이지가 인쇄될 때만 적용되는 스타일.

그런 다음 이제 이러한 CSS가 적절한 미디어는 어떻게 작동하나요? 태그에 미디어 속성을 추가하면 됩니다(방법 A와 동일).

media="screen" href="/css/styles.css" />
media="print " href="/css/print.css" />

styles.css에 screen을 지정하면 styles.css에 포함된 스타일이 컴퓨터 화면에서만 사용되도록 할 수 있습니다. 마찬가지로 , 미디어 속성을 인쇄로 설정하면 print.css에 포함된 스타일이 사용자가 페이지를 인쇄할 때만 사용됩니다.
이제 화면 스타일과 인쇄 스타일이 분리되었으니 어떤 스타일이 적합한지 살펴보겠습니다. 인쇄 스타일 시트에 배치됩니다. 인쇄 스타일 시트 디자인
이 style.css에는 레이아웃, 글꼴, 위치, 배경 등과 같은 규칙이 포함될 수 있지만 print.css는 빈 종이 시트이므로 적용할 스타일을 사용자 정의하기를 기다리고 있습니다.
인쇄 스타일을 디자인할 때 주의해야 할 핵심은 미디어 유형입니다(브라우저 창이 아닌). 픽셀 길이와 크기는 최선의 선택이 아닙니다. 포인트 단위로 크기 지정
인쇄 스타일 시트에서는 글꼴 크기를 지정하기 위해 포인트를 사용하는 것이 매우 합리적입니다. 이 인쇄 스타일 시트에서는 먼저 "포인트" 단위를 사용하여 >body {

글꼴 패밀리: "Times New Roman", serif;
글꼴 크기: 12pt;
}

는 픽셀 단위를 사용하는 것에 비해 정말 너무 간단합니다. 12포인트 글꼴이 얼마나 크게 인쇄될지 상상해 보는 것이 좋습니다. 동시에 인쇄가 더 자세하고 읽기 쉬운 세리프 글꼴도 선택합니다. 잉크를 절약하기 위해 불필요한 태그를 숨깁니다

웹사이트에는 인쇄된 버전에서는 전혀 쓸모가 없는 페이지 요소가 많이 있을 수 있습니다. 탐색 링크, 사이드바, 양식, 광고 열과 같은 요소는 인쇄할 때 낭비되는 경우가 많습니다. 인쇄 스타일시트의 표시 속성을 사용하여 표시되지 않도록 설정할 수 있습니다.
예를 들어 웹사이트가 #nav, #sidebar, #advertising 및 #으로 시작하는 경우입니다. search 네비게이션 바, 사이드바, 광고 항목 및 검색 양식을 별도로 저장하는 경우 인쇄 스타일 시트에서 다음 명령문을 사용하여 이러한 내용을 모두 숨길 수 있습니다.

body {

font-family: " Times New Roman", serif;
글꼴 크기: 12pt;
}

#nav, #sidebar, #advertising, #search {
display: 없음 ;
}
인쇄 스타일 시트에서 display:none;을 설정하면 인쇄 결과에서 이러한 요소를 숨길 수 있습니다.

숨기기 위해 불필요한 요소 제거 페이지의 요소를 사용하면 동일한 마크업 코드를 사용하여 웹 사이트의 "인쇄용" 버전을 빠르고 쉽게 만들 수 있습니다. 동일한 웹 사이트 콘텐츠를 서버에 출력하기 위해 축소된 또 다른 템플릿을 사용할 필요가 없습니다. 추가 CSS 파일에 인쇄 매체 유형을 지정하면 끝입니다!
이제 논리적 페이지 "단락"으로 마크업 구조를 구성하면 향후 광고 배너가 있는 경우 스타일을 디자인하기가 더 쉽다는 것이 다시 확인되었습니다. 페이지에서 ID를 지정하면 CSS에 제어권이 부여되기 때문에 의미가 있습니다.
배경 이미지와 색상을 제거하는 것도 잉크를 절약하고 1.
예를 들어 이전에 태그에 배경 이미지나 색상을 지정한 경우 이제 다음과 같이 제거할 수 있습니다.

body {

background: none;
}

물론, 이 방법을 사용하여 다른 태그의 화면 스타일에 지정된 배경 이미지와 색상을 제거할 수도 있습니다.

                                                                        #p#
링크 노출
링크 URL을 노출하고 인쇄 결과에 하이퍼링크로 표시하는 영리한 트릭도 있습니다(불행히도 CSS2 사양을 완전히 지원하는 브라우저에서만 작동함).
:after 의사 클래스를 사용하여 CSS를 작성할 수 있으며, 지원되는 브라우저에서 하이퍼링크 텍스트 뒤에 연결된 URL을 인쇄할 수 있습니다. 현재 Mozilla, Safari 및 Netscape 7.0은 모두 이 기능을 지원합니다. 동시에, :after를 지원하지 않는 브라우저 사용자에게는 하이퍼링크 텍스트 자체만 표시되므로 불이익이 없습니다. (Eric Meyer, "CSS Design: Going to Print", //m.sbmmt.com /).
콘텐츠 부분의 하이퍼링크 URL을 강조 표시하기 위해 인쇄 스타일시트에 새 규칙을 추가하겠습니다:

body {

font-family: "Times New Roman", serif;
글꼴 크기: 12pt;
}
#nav, #sidebar, #search {
표시: 없음;
}

#content a:link:after, # content a :visited:after {
content: " (" attr(href) ") ";
}
이 규칙 will 인쇄된 페이지에서 하이퍼링크 텍스트 뒤에 URL을 추가합니다. URL은 앞뒤에 공백을 두고 괄호 안에 배치됩니다. 이는 가능하지만 페이지의 #content 영역에만 영향을 미칩니다. 모든 하이퍼링크를 노출하는 일반 규칙을 작성하지만 여기서는 상단, 하단 및 기타 영역의 링크를 제외하고 콘텐츠 부분의 하이퍼링크만 노출하도록 선택합니다.

이 기능은 현재 일부 브라우저에서만 지원됩니다. , :after 의사 클래스를 지원하지 않는 브라우저는 완전히 무해하므로 이 규칙을 무시합니다. 링크 텍스트
링크 URL에 몇 가지 기발한 트릭을 적용했지만 독자가 일반 콘텐츠를 읽을 때 포함된 하이퍼링크를 쉽게 식별할 수 있도록 링크 텍스트를 고유한 방식으로 강조하는 것을 잊지 마세요. body {
글꼴 계열: "Times New Roman", serif;
글꼴 크기: 12pt;

}
#nav, #sidebar, #search {
표시 : 없음;
}

a:link, a:visited {


색상: 파란색;
텍스트 장식: 밑줄;
}#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") "; }
물론 여기서는 어떤 색상이든 선택할 수 있습니다. 대부분의 사람들이 한눈에 하이퍼링크로 볼 수 있기 때문에 기본 파란색을 사용하고 밑줄을 긋습니다. 링크는 일반 텍스트와 충분한 대조를 이룹니다.
                                                                                      #p# 잉크를 절약하기 위한 인쇄 미리보기
잉크를 절약하는 또 다른 팁은 실제로 전체 페이지를 종이에 인쇄하는 대신 브라우저의 인쇄 미리보기 기능을 사용하여 페이지가 어떻게 인쇄될지 확인하는 것입니다.
대부분의 브라우저에서. , 파일-인쇄 대화 상자에는 페이지의 인쇄 효과를 확인할 수 있는 미리보기 옵션이 있습니다. 여기에서 인쇄 스타일 시트의 효과를 잘 살펴볼 수 있습니다. 어떻게 보이는지
내 개인 웹사이트에서 인쇄 스타일 시트를 사용하는 것은 앞서 함께 만든 예와 매우 유사합니다. 그림 11-1과 11-2를 비교하여 내비게이션, 사이드바를 어떻게 디자인했는지 확인할 수 있습니까? , 연결된 콘텐츠를 노출하면서 이 기사를 더 쉽게 읽을 수 있도록 글꼴 및 글꼴 크기를 조정합니다.

그림 11-1 화면 스타일 시트를 사용하여 브라우저에서 본 SimpleBits
그림 11 -2 SimpleBits 인쇄 버전
그림 11-1과 11-2를 보면 작은 CSS 문서만 사용하면 어떤 페이지에도 인쇄 전용 특수 버전을 제공할 수 있다는 것을 알 수 있습니다. 프로젝트에 쉽게 추가할 수 있고 사용자가 페이지를 인쇄하려고 할 때 경험에 추가할 수 있는 기능입니다.
다음번에 상사가 "웹사이트용 새 인쇄 친화적인 템플릿을 만들어야 하는데" 동일한 디렉토리 구조"를 사용하면 뒷주머니에서(또는 이 책이 들어갈 수 있는 어느 곳에서나) 이 작은 트릭을 꺼낼 수 있습니다.
인쇄 스타일에 대한 더 많은 디자인 팁을 알고 싶다면 다음을 읽어보세요. CSS 전문가 Eric Meyer의 기사 " CSS Design: Going to Print "(//m.sbmmt.com/) 및 "다른 인쇄"(//m.sbmmt.com/). 요약
인쇄 스타일 시트에 포함될 수 있는 규칙에 대해 간략하게 살펴보았습니다. 미디어 유형을 지정하여 인쇄 및 화면 표시에 대한 모든 스타일을 구분할 수 있으므로 각 미디어에 대한 세부 사항을 조정하는 것이 매우 간단합니다. 유지 관리가 쉽습니다. 동일한 마크업 소스 코드를 인쇄용 CSS 문서와 함께 사용하여 동일한 기능을 수행할 수 있으므로 더 이상 전체 웹사이트의 인쇄용 사본을 만들 필요가 없습니다. > 앞으로는 다른 장치에서 더 많은 멀티미디어 유형을 지원할 수 있기를 바랍니다. 특정 장치에 대한 CSS 스타일을 디자인하면 PDA, 휴대폰 및 스크린 리더가 동일한 XHTML을 정상적으로 읽을 수 있다면 작업이 훨씬 쉬워질 것입니다.