Trio 홈페이지 - HTML 문서에서의 스타일쉬트(style sheet)

14 스타일쉬트(style sheet)

스타일쉬트의 소개
HTML에 스타일 추가
외부(external) 스타일쉬트
1. 선호(preferred)와 대체(alternate) 스타일쉬트
2. 외부 스타일쉬트의 지정
스타일쉬트 카스케이딩(cascading)
1. 메디아에 따른(media-dependent) 카스케이드
2. 전달(inheritance)과 카스케이딩
사용도구로 부터 스타일 데이터 감추기
스타일쉬트의 HTTP 헤더(header)와 연결

14.1 스타일쉬트(style sheet)의 소개

스타일쉬트는 웹 설계자에게 중요 전환점을 주어, 페이지의 외양을 향상하는 확장 능력을 주었다. 웹이 시작되던 과학적 환경에서는, 사람들은 문서의 표현보다 그 내용에 중점을 두었었다. 웹을 발견 함에 따라 넓은 활동 범위의 사람들에게, HTML의 제한들이 곤란의 원인이 되었고, 제작자들은 HTML의 스타일을 주는데 제한을 극복하려고 노력했다. 웹 페이지의 표현을 개선한다는 시도들은 좋았으나, 그렇게 하는 기술들은 예기치 않은 나쁜 결과를 동반했다. 이들 기술은 모든 사람들이 항상 사용 할 수 없었으며, 일부 사람들이 어떤 때 사용하기 위한 것들이었는데, 여기에는 아래 사항들이 포함되어 있었다.

HTML 확장에 대한 소유
텍스트를 이미지로 변환
공간 제어를 위 한 이미지 사용
페이지 배치를 위 한 표의 사용
HTML 사용 대신 프로그램 작성

이들 기술들은 웹 페이지등의 복잡성을 크게 증가시키고, 탄력성을 제한하고, 상호 공통적으로 사용되는 능력을 손상시켰고, 장애자에게 어려움을 주었다.

스타일쉬트(style sheet)는 이들 문제점을 해결하고 동시에 HTML의 제한 된 표현 기능을 향상 시켰다. 스타일쉬트은 텍스트 라인 사이의 공간 크기, 들여 쓰기 정도, 텍스트나 배경의 색상, 폰트 크기와 스타일과 기타 다른 세부사항들 쉽게 지정하게 하였다.

예를 들어, 다음 "special.css"라는 화일로 저장 된 짧은 CSS 스타일쉬트는, 문단의 글자 색상을 초록으로, 테두리를 붉은 굵은 선으로 지정한다.

P.special {
 color: green;
 border: solid red;
}

제작자는 이 스타일쉬트를LINK 엘레멘트로 HTML 문서의 자원에 연결 시킬 수 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
 "http://www.w3.org/TR/REC-html40">
<HTML>
 <HEAD>
   <LINK href="special.css" rel="stylesheet" type="text/css">
 </HEAD>
 <BODY>
   <P class="special">이 문단은 초록 텍스트을 갖는다.
 </BODY>
</HTML>

HTML 4.0는 다음 스타일쉬트 기능을 제공한다.

스타일 정보의 융통성 있는 위치

스타일쉬트를 별도의 화일 안에 만들면 다시 사용하기에 용이하다. 때로는 표현 지시를 그것이 적용되는 문서 안에 포함(문서 시작 부분에 구룹지어서 혹은 문서의 본체(body) 어디서나 엘레멘트의 애트리뷰트에) 시키는 것이 좋다. 전체 문서들에 공통적으로 사용되는 스타일쉬트를 쉽게 다루기 위하여, 이 규격은 문서에 적용 될 스타일쉬트를 설정하기 위한 HTTP 헤더를 사용하는 방법을 설명한다.

특정 스타일쉬트 언어에 영향을 받지 않음

이 규격은 HTML이 어느 특정 스타일쉬트 언어에 제한되지 않는다. 이는 여러 언어들에서 사용 될 수 있다. 예를 들어 대부분의 사용자가 사용하는 간단한 것과 일부 소수 사용자가 특히 전문화 된 용도로 사용하는 아주 복잡 한 것에 사용 될 수 있다. 아래 예제에 모든 사용 CSS 언어(번역문 Cascading Style Sheet: CSS1)가 포함되어 있으나, 다른 스타일쉬트 언어들도 사용 될 수 있다.

카스케이딩(cascading)

이것은 CSS와 같은 일부 스타일쉬트 언어들에 의해 제공되는 스타일 정보를 여러 자원으로 부터 받아 섞는 것을 허용한다. 예를 들어 회사의 스타일 기준과 같은, 이들은 문서들의 구룹에 공통적인 스타일들과 어떤 단일 문서에 맞는 스타일들이 될 수 있다. 이들을 별도로 저장함으로서, 스타일쉬트는 다시 사용 될 수 있어, 간단하게 제작하고 네트워그(network)에서 더 효과적으로 사용 할 수 있게 한다. 카스케이드(cascade)는 스타일쉬트들의 일련의 순서를 정의하는데, 뒤의 쉬트에서 지정 한 것 이 먼저 지정 한 것 보다 우선적으로 적용되는 규칙을 갖는다. 모든 스타일쉬트 언어들이 카스케이딩을 지원하는 것은 아니다.

메디아 의존성(media dependencies)

HTML은 제작자로 하여금 메디아에 관계 없는 방법으로 문서를 지정하도록 허용한다. 이는 사용자가 많은 종류의 장치와 메디아를 사용하여 웹 페이지에 접속하도록 하는 것이다. 예를 들면, Windows, Macintosh OS와 X11로 운영되는 컴퓨터의 그래픽 디스플레이, 텔레비젼를 위한 장치, 특수 적용 전화와 PDA-based 운반용 장치, 음성(speech-based) 브라우저, 점자 장치등이다.

반대로 스타일쉬트는 특정 메디아(media)나 메디아 구룹에 한정적으로 적용 될 수 있다. 스크린에 사용하기 위하여 제공 된 한 스타일쉬트는 인쇄 할 때 사용 될 수 있으나, 음성(speech-based) 브라우저에는 거의 용도가 없다. 이 규격은 넓은 범위의 메디아에 주어진 스타일쉬트가 적용된다. 이는 사용도구에게 부적절 한 스타일쉬트를 피하여 사용할 수 있게 한다. 스타일쉬트 언어들은 같은 스타일쉬트 안에서 메디아를 지정하는 기능을 포함 할 수 있다.

대체(alternate) 스타일

제작자는 읽는 사람에게 몇가지 다른 문서 보이는(view) 방법의 원 할 수 있다. 예를 들어, 치밀 한 문서를 표현하기 위하여 작은 폰트를 사용하는 스타일쉬트, 또는 중요한 표시를 위 한 큰 폰트을 지정 한 스타일쉬트가 될 수 있다. 이 규격은 제작자가 선호(preferred) 스타일쉬트와 특정 목표 사용자 또는 메디아을 위한 대체(alternate) 스타일쉬트를 지정 할 수 있게 한다. 사용도구는 사용자에게 대체 스타일쉬트 중에서 선택 또는 모든 스타일쉬트 를 작동하지 않게 할수 있는 기회를 주어야한다.

성능의 고려

일부 사람들은 스타일쉬트의 선호 문제를 고려하여야 한다고 주장한다. 예를 들어 외부 스타일쉬트를 읽어 사용자에게 완전 한 표현을 하기 위해서는 시간이 지연 될 수 있다. 문서 헤드에 긴 스타일 내용이 포함되면 이와 비슷한 상황이 발생한다.

현재의 제안은 제작자 각 HTML 엘레멘트 안에 표현에 대한 지시를 포함 시킬 수 있도록하여, 이 문제에 대하고 있다. 그러면 이 표현 정보는 사용도구가 각 엘레멘트를 표현을 원 할 때 항상 사용 할 수 있다.

많은 경우, 제작자는 문서들의 구룹을 위 한 공통의 스타일쉬트로 부터 잇점을 얻는다. 이런 경우, 문서 안에 광범위하게 쓰여진 스타일 지정은, 대부분의 문서에 그 스타일쉬트가 이미 존재하기 때문에, 연결 된 스타일쉬트를 사용하는 것에 비해 실제적으로 나쁜 성능을 유발시킬 수 있다. 공통으로 사용하는 좋은 스타일쉬트는 이 효과를 향상시킬 것이다.

14.2 HTML에 스타일 추가

주기: [CSS2]에 포함 된 HTML 4.0의 견본 디폴트 스타일쉬트에는 일반적으로 수용되는 각 엘레멘트의 디폴트 스타일 정보들이 있다. 제작자나 적용자는 공히 여기서 유용한 자원을 찾을수 있을 것이다.

HTML 문서는 그 안에 직접적으로 스타일쉬트 지정 할 수 있고, 또는 스타일쉬트를 읽어(import) 올 수 있다.

어떤 스타일쉬트 언어도 HTML과 같이 사용 될 수 있다. 간단한 스타일쉬트 언어이면 대부분의 사용자의 필요에 충분 할 것이나, 다른 언어들이 특화 된 필요에 더 맞을 수 있다. 이 규격은 스타일 언어로 카스케이딩 스타일쉬트(약자로 CSS: "Cascading Style Sheet": 번역문 CSS1)를 예제들에서 사용한다.

스타일 데이터의 문법은 스타일쉬트 언어에 따라 다르다.

14.2.1 디폴트 스타일쉬트 언어 설정

제작자는 HTML 문서와 관련 된 스타일 정보의 스타일쉬트 언어를 지정하여야 한다.

제작자는 문서의 디폴트 스타일쉬트 언어를 설정하기 위하여, META 엘레멘트를 사용한다.

예를 들어, 디폴트를 CSS로 설정하기 위하여, 제작자는 다음 선언을 문서의 HEAD 안에 하여야 한다,

 <META http-equiv="Content-Style-Type" content="text/css">

디폴트 스타일쉬트 언어는 HTTP 헤더에도 설정 할 수 있다. 위의 META 선언은 다음 HTTP 헤더와 같다.

 Content-Style-Type: text/css

사용도구는 문서의 디폴트 스타일쉬트 언어를 다음 단계에 따라 결정하여야 한다(위가 높은 순위).

만일 META 선언에서 "Content-Style-Type"이 명시되어 있으면, 글자들(stream)의 마지막의 것을 디폴트 스타일쉬트 언어로 결정한다.
아니면, 만일 HTTP 헤더에 "Content-Style-Type"이 명시되어 있으면, 글자들의 마지막의 것을 디폴트 스타일쉬트 언어로 결정한다.
아니면, 디폴트 스타일쉬트 언어는 "text/css"이다.

>문서가 style 애트리뷰트를 설정하는 엘레멘트를 포함하고 있으나 디폴트 스타일쉬트 언어가 정의 되어 있지 않으면 바르지 옳지 않은 것이다. 편집기는 사용도구가 "text/css" 디폴트에 의존하지 않도록, 디폴트 스타일쉬트 언어 정보를 발생(META 선언이 전형적임) 시켜야한다.

14.2.2 인라인(inline) 스타일 정보

애트리뷰트의 정의

style = style [대소문자 중립: CN]: 이 애트리뷰트는 현재 엘레멘트의 스타일 정보를 지정한다.

style 애트리뷰트는 단일 엘레멘트의 스타일 정보를 정의한다. 인라인 스타일 지정의 스타일쉬트 언어는 디폴트 스타일쉬트 언어로 주어진다. 스타일 데이터의 문법은 스타일쉬트 언어에 따라 다르다.

이 예제는 특정 문단에서 텍스트의 색상과 폰트 크기 정보를 설정한다.

 <P style="font-size: 12pt; color: fuchsia">스타일쉬트는 굉장하지 않습니까?

CSS에서, 바른 선언은 "name: value" 양식을 가지며 쎄미콜론(;)으로 분리된다.

style 애트리뷰트는 개별 HTML 엘레멘트의 특유한 스타일을 적용하여 사용 할 수 있다. 만일 그 스타일이 여러 엘레멘트들에서 다시 사용 될 것이면, 제작자는 그 정보를 다시 구룹 지우기 위하여 STYLE 엘레멘트를 사용한다. 적정한 탄력성을 위해서 제작자는 외부 스타일쉬트 안에 스타일들를 정의하여야 한다.

14.2.3 헤더 스타일 정보: `STYLE` 엘레멘트

<!ELEMENT STYLE - - %stylesheet        -- 스타일 정보 -->
<!ATTLIST STYLE
 %i18n;                               -- lang, dir, 제목(title)과 함께 사용 --
 type        %ContentType;  #REQUIRED -- 스타일 언어의 컨텐트 타입(content type) --
 media       %MediaDesc;    #IMPLIED  -- 메디아들에 사용을 위하여 설계 --
 title       %Text;         #IMPLIED  -- 참고 제목 --
>

시작태그: 필요 함, 종료태그: 필요 함

애트리뷰트의 정의

type = content-type [대소문자 구별 없이: CI]: 이 애트리뷰트는 엘레멘트 내용의 스타일쉬트 언어를 지정하고, 디폴트 스타일쉬트 언어를 덮어 씌운다(override). 스타일쉬트 언어는 컨텐트 타입(예: "text/css")으로 지정된다. 이 애트리뷰트의 디폴트 값은 없으므로, 제작자는 이 애트리뷰트의 값을 제공하여야 한다.
media = media-descriptors [대소문자 구별 없이: CI]: 이 애트리뷰트는 의도하는 목표 스타일 정보의 메디아를 지정한다. 이는 단일 메디아 혹은 컴마로 분리된 목록이 될 수 있다. 이 애트리뷰트의 디폴트 값은 "screen"이다.

다른 곳에서 정의 된 애트리뷰트

lang (언어 정보), dir (글자 방향)
title (엘레멘트 제목)

STYLE 엘레멘트는 제작자가 문서의 헤드(head) 안에 스타일 지정을 삽입 할 수 있도록한다. HTML은 문서의 HEAD 항목 안에 STYLE 엘레멘트를 어떤 갯수라도 관계없다.

스타일쉬트를 지원하지 않는 사용도구, 또는 STYLE 엘레멘트가 그 스타일쉬트 언어를 지원하지 않는 경우, STYLE 엘레멘트의 내용을 감추어야한다. 내용을 문서의 텍스트 부분으로 표시하는 것은 오류이다. 일부 스타일쉬트 언어들은 규격에 맞지 않는 사용도구에서 내용 감추기 문법을 지원한다.

스타일 데이터 문법은 스타일쉬트 언어에 따라 다르다.

일부 스타일쉬트 적용들은 style 애트리뷰트에서 보다 STYLE 엘레멘트에서 많은 종류의 지정 할 수 있다. 예를 들어, CSS로 STYLE 엘레멘트 안에서 아래의 지정들을 선언 할 수 있다.

특정 HTML 엘레멘트들의 모든 인스탄스(instance), 예를 들어 P, H1 모든 엘레멘트 등.
특정 클라스에 속 해 있는 HTML 엘레멘트의 모든 인스탄스, 말하자면 class 애트리뷰트가 어떤 값으로 설정 된 경우.
한 HTML 엘레멘트의 단일 인스탄스, 말하자면 id 애트리뷰트가 어떤 값으로 설정 된 경우.

스타일 표시(rule)의 우선 순위와 특성의 전달(inheritance)에 관 한 규칙은 스타일쉬트 언어에 따라 다르다.

다음 예제에서 문서 안의 각 H1 엘레멘트 주위에 테두리(border)를 넣고, 페이지의 가운데 오도록 CSS STYLE 선언을 하였다.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

이 스타일 정보를 특정 클라스(class)를 갖는 H1 엘레멘트에 만 적용하려면 다음과 같이 수정하면 된다.

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<BODY>
 <H1 class="myclass">이 H1는 지정 된 스타일의 영향을 받음.</H1>
 <H1>이 H1는 지정 된 스타일의 영향을 받지 않음.</H1>
</BODY>

마지막으로, H1의 이 스타일 정보의 범위를 단일 인스탄스(instance)에 만 국한 시키기 위해, id 애트리뷰트를 설정하면:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

<BODY>
 <H1 class="myclass">이 H1는 지정 된 스타일의 영향을 받지 않음.</H1>
 <H1 id="myid">이 H1는 지정 된 스타일의 영향을 받음.</H1>
 <H1>이 H1는 지정 된 스타일의 영향을 받지 않음.</H1>
</BODY>

HTML의 거의 모든 엘레멘트에 스타일 정보를 설정할 수 있지만, 블럭레벨(block-level) 대 인라인(inline) 외에 어떤 표현 의미를 갖지 않는 DIV와 SPAN, 두 엘레멘트에서 특히 유용하다. 스타일쉬트와 결합 되면, 이들 엘레멘트는 사용자가 HTML을 무 한정 확장 할 수 있다. 특히 class와 id 애트리뷰트와 같이 사용 할 때 더욱 그렇하다.

다음 예제는 문단의 앞 몇글자를 작은 대문자 폰트 스타일로 설정하기 위하여 SPAN 엘레멘트를 사용하였다.

<HEAD>
 <STYLE type="text/css"> SPAN.sc-ex{ font-variant: small-caps }</STYLE>
</HEAD>

<BODY>
 <P> <SPAN class="sc-ex">The first</SPAN>
	few words of this paragraph are in small-caps.
</BODY>

다음 예제에서 과학 기사의 요약 항목을 만드는 일련의 문단들의 열거를 설정하기 위하여, DIV와 class 애트리뷰트를 사용하였다. 이 스타일 정보는 class 애트리뷰트를 설정 함으로서, 이 문서의 다른 곳에서 다른 요약 항목들을 위하여 재 사용 될 수 있다.

<HEAD>
<STYLE type="text/css">
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>

<BODY>
 <DIV class="Abstract">
   <P>Chieftain 제품들은 내년 우리 시장의 승자이다. 이 보고서는 Chieftain을
     경쟁 제품들에 대해서 어떻게 포지션하는가를 설명한다.
   <P>Chieftain는 Commander 품목들을 대체 하며, Commander 품목들은
     별도의 통보가 있을 때 까지 가격표에 남아 있을 것이다.
 </DIV>
</BODY>

14.2.4 메디아 타입(media type)

예를 들어, 그래픽 디스플레이, 텔레비젼 스크린, 운반용 장치(handheld device), 음성(speech-based) 브라우저, 점자 장치등에서 문서가 표현 될 때, HTML는 메디아 특성들의 잇점을 갖도록 제작자가 문서를 설계 할 수 있게 한다. media 애트리뷰트를 설정함으로서, 제작자는 사용도구가 스타일쉬트를 선택적으로 읽고 적용 할 수 있게 한다. 알려진 메디아 지정자의 목록을 참조하라.

다음 선언 예제는 H1 엘레멘트에 적용된다. 영업 회의에서 비춰(projected) 질 때, 모든 인스탄스(instance)들은 푸른색이 되고, 인쇄 될 때 모든 인스탄스들은 중앙에 위치 할 것이다.

<HEAD>
<STYLE type="text/css" media="projection">
  H1 { color: blue}
</STYLE>
<STYLE type="text/css" media="print">
 H1 { text-align: center }
</STYLE>

이 예제에 음성 출력에 사용되는 앤커들에 음향 효과를 추가하였다.

<STYLE type="text/css" media="aural">
 A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>

사용도구가 현재 장치(device)에 적용되는 스타일쉬트들 만을 네트워그(network)로 부터 읽어 표현하여 시간을 절약 할 수 있기 때문에, 메디아 제어(control)는 외부 스타일쉬트에 적용 될 때 특히 흥미롭다. 예를 들어 음성 브라우저는 보는 표현을 위한 스타일쉬트의 읽어옴을 피할 수 있다. 메디아에 따른 카스케이드를 참조하라.

14.3 외부(external) 스타일쉬트

제작자는 스타일쉬트를 HTML 문서로 분리 할 수 있는데, 이는 몇가지 잇점을 제공한다.

제작자와 Web 관리자는 몇개의 문서와 싸이트를 통 해 스타일쉬트를 공유 할 수 있다.
제작자는 문서의 수정 없이 스타일쉬트를 변경 할 수 있다.
사용도구는 메디아 설정에 기초하여 스타일쉬트를 선별적으로 로드 할 수 있다.

14.3.1 선호(preferred)와 대체(alternate) 스타일쉬트

HTML는 제작자로 하여금 여러개의 외부 스타일쉬트(style sheet)와 문서를 연관 지울 수 있게 한다. 스타일쉬트 언어는 복수의 외부 스타일쉬트들이 어떻게 작용하는가를 지정한다. 예를 들어, CSS의 "cascade" 지정(rule) 등.

제작자는 대체(alternate) 스타일쉬트라고 불리우는 상호 배타적인 몇개의 스타일쉬트들를 지정 할 수 있다. 사용자는 이것들 중 선호도에 따라 가장 좋아하는 것을 선택 할 수 있다. 예를 들어 제작자는 작은 스크린을 위하여 설계 된 스타일쉬트를 지정하고, 시력이 약한 사용자를 위해 큰 폰트를 사용하는 다른 스타일쉬트를 지정 할 수 있다. 사용도구는 사용자가 대체 스타일쉬트로 부터의 선택을 허용하여야 한다.

제작자는 대체 스타일쉬트들로 부터 하나의 선호(preferred) 스타일쉬트를 지정 할 수 있다. 사용도구는 사용자가 다른 대체를 선택하지 않는 한, 제작자의 선호 스타일쉬트를 적용하여야 한다.

제작자는 제작자의 선호 스타일쉬트를 포함하여 몇 개의 대체 스타일쉬트들을 하나의 스타일 이름(style name)으로 구룹 지울 수 있다. 사용자가 이름지워진 스타일을 선택하면, 사용도구는 그와 같은 이름을 가진 모든 스타일쉬트를 적용하여야 한다. 사용도구는 다른 스타일 이름을 갖는 대체 스타일쉬트에는 적용하지 않아야한다. 외부 스타일쉬트의 지정에서 스타일쉬트 구룹의 이름 짓는 방법을 설명하였다.

제작자는 사용도구가 추가적으로 대체 스타일쉬트를 적용해야 하는 고정적(persistent) 스타일쉬트 도 정의 할 수 있다.

사용도구는 어떤 스타일쉬트를 적용 할 때, 메디아 지정자(media descriptor)를 중요하게 생각하여야 한다.

사용도구는 사용자가 제작자의 스타일쉬트를 완전히 사용되지 않게 할 수도 있어야 한다. 이런 경우 사용도구는 어떤 고정적(persistent) 또는 대체 스타일쉬트도 적용하지 말아야한다.

14.3.2 외부 스타일쉬트의 지정

제작자는 LINK 엘레멘트(element)의 다음 애트리뷰트(attribute)로 외부 스타일쉬트(style sheet)를 지정한다.

href의 값을 스타일쉬트 화일의 위치로 설정. href의 값은 URI이다.
type 애트리뷰트에 연결 된 스타일쉬트 자원의 언어를 지정하는 값 설정. 이는 사용도구가 지원 되지 않는 스타일쉬트 언어의 스타일쉬트를 다운로드 함을 피하게한다.
스타일쉬트가 고정적, 선호 또는 대체 인가를 설정:
- 스타일쉬트를 고정적(persistent)으로 하기 위하여, rel 애트리뷰트를 "stylesheet"로 설정하고, title 애트리뷰트를 설정하지 않는다.
- 스타일쉬트를 선호(preferred)로 하기 위하여, rel 애트리뷰트를 "stylesheet"로 설정하고, title 애트리뷰트에 스타일쉬트에 이름을 부여한다.
- 스타일쉬트를 대체(alternate)로 하기 위하여, rel 애트리뷰트를 "alternate stylesheet"로 설정하고, title 애트리뷰트에 스타일쉬트에 이름을 부여한다.

사용도구는 사용자가 대체 스타일 목록으로부터 가져와 보이게 하는 수단을 제공하여야 한다. title 애트리뷰트의 값은 각 선택의 이름이 추천된다.

이 예제는 먼저 mystyle.css 화일에 있는 고정적(persistent) 스타일쉬트를 지정하였다.

 <LINK href="mystyle.css" rel="stylesheet" type="text/css">

title 애트리뷰트의 설정으로 제작자의 선호 스타일쉬트를 만든다.

 <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

rel 애트리뷰트에 키워드 "alternate"를 추가 함으로서 대체 스타일쉬트를 만든다.

 <LINK href="mystyle.css" title="Medium"
	rel="alternate stylesheet" type="text/css">

연결과 외부 스타일쉬트을 참조하라.

제작자는 선호(preferred) 스타일쉬트를 설정하기 위하여 META 엘레멘트도 사용 할 수 있다.

예를 들어, 위 예제에서 선호 스타일쉬트를 "compact"로 설정하기 위하여, 제작자는 HEAD 안에 다음 줄을 포함 시킬 수 있다.

 <META http-equiv="Default-Style" content="compact">

선호 스타일쉬트는 HTTP 헤더(header)로 설정 할 수도 있다. 위 META 선언은 아래 HTTP 헤더와 동등하다.

 Default-Style: "compact"

만일 두개 이상의 META 선언 또는 HTTP 헤더가 선호 스타일쉬트를 설정 했다면, 최종 설정이 적용된다. HTTP 헤더는 이 목적을 위하여 문서의 HEAD 보다 먼저 나오도록 한다.

만일 두개 이상의 LINK 엘레멘트가 선호 스타일쉬트를 설정 했다면, 첫번째 것이 적용된다.

META 또는 HTTP 헤더로 지정 된 선호 스타일쉬트는 LINK 엘레멘트에서 같은 것을 지정 한 것에 우선하여 적용된다.

14.4 스타일쉬트(style sheet) 카스케이딩

CSS와 같은 카스케이딩(cascading) 스타일쉬트 언어들은 스타일 정보를 여러 지원으로 부터 함께 혼합하는 것을 허용한다. 그러나, 모든 스타일쉬트 언어들이 카스케이딩을 지원하지는 것은 아니다. 카스케드(cascade)를 정의하기 위하여, 제작자는 LINK와(혹은) STYLE 엘레멘트들를 열거한다. 이 스타일 정보는 HEAD 안에 나타난 다른 엘레멘트들의 순서로 카스케드 된다.

주기: 이 규격에는 다른 언어들로 부터 스타일쉬트를 어떻게 카스케드(cascade)하는가를 지정하지 않았다. 제작자는 스타일쉬트 언어들의 혼합을 피해야한다.

다음 예제에서, "compact"로 이름지워진 두 대체 스타일쉬트를 지정하였다. 만일 사용자가 "compact" 스타일을 선택하면, 사용도구는 고정적(persistent) 스타일쉬트 "common.css"와 같이두개의 외부 스타일쉬트들을 적용하여야 한다. 만일 사용자가 "big print" 스타일을 선택하면, 고정적 스타일쉬트 "common.css"와 대체 스타일쉬트 "bigprint.css" 만이 적용 될 것이다.

<LINK rel="alternate stylesheet" title="compact"
	href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact"
	href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print"
	href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

다음 카스케드(cascade) 예제는 LINK와 STYLE 엘레멘트 두가지에 관계된다.

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
   p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1 메디아에 따른(media-dependent) 카스케이드(cascade)

카스케이드(cascade)는 다른 메디아에 적용되는 스타일쉬트들을 포함 할 수 있다. LINK와 STYLE 둘 다 media 애트리뷰트와 같이 사용 될 수 있다. 사용도구는 현재 메디아에 적용되지 않는 스타일쉬트들을 솎아 버려야한다.

다음 예제에서, 여러 곳에서 사용될 수 있는 "corporate" 스타일쉬트의 카스케이드를 지정하였는데, 하나는 인쇄에 적합하고, 하나는 검색에 사용되고, 하나는 음성(speech-based) 브라우저(차량에서 전자우편을 볼 때 유용한)를 위한 것이다. "techreport" 스타일쉬트는 모든 메디아(media)에 적용된다. STYLE 엘레멘트의 색상 지정(은 인쇄와 스크린에서 사용되나 소리 표현에는 사용되지 않는다.

<LINK rel="stylesheet"
	media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet"
	media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet"
	media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet"
	href="techreport.css" type="text/css">
<STYLE type="text/css">
   p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 전달(inheritance)과 카스케이딩(cascading)

사용도구가 문서를 표현하기 위하여, 예를 들어 폰트의 종류(family), 스타일(style), 크기(size), 열(line)의 높이, 글자 색상 등 스타일 특성(property) 값을 찾을 필요가 있다. 실제의 기능은 스타일쉬트 언어에 따라 자르나, 다음 사항은 일반적으로 적용된다.

카스케이드(cascade)기능은 여러 스타일 지정들이 모두 엘레멘트에 직접 적용 할 때 사용된다. 이 기능은 사용도구가 어떤 지정을 적용 할 것인가를 결정하기 위하여 지정을 특성에 따라 정리하게한다. 만일 지정을 발견하지 못하면, 다음 단계는 스타일 특성이 전달(inherited) 되는가 아닌가에 따른다. 모든 특성이 전달되는 것은 아니다. 이들 특성들을 위하여, 스타일쉬트 언어는 특정 엘레멘트의 지정이 없를 때 디폴트 값들을 제공한다.

만일 그 특성이 전달되는 것이면, 사용도구는 이것을 지정에 적용 할 것인가를 알기 위해 직접 포함 한 엘레멘트를 검정한다. 이 과정은 적용 될 수 있는 지정을 찾을 때 까지 계속된다. 이 기능은 스타일쉬트를 간결하게 정의하도록한다. 예를 들어 제작자가 BODY 엘레멘트에 적용되는 단일의 지정으로 BODY 내의 모든 엘레멘트의 폰트 종류을 지정 할 수 있다.

14.5 사용도구로 부터 스타일 데이터 감추기

일부 스타일쉬트 언어들은 규격에 맞지 않는(non-conforming) 사용도구에서 제작자가 STYLE 엘레멘트의 내용의 감추기를 허용하는 문법을 지원한다.

이 예제는 규격에 맞지 않는 옛날 사용도구에서 확실히 텍스트로 표현하지 않도록 하기 위하여, CSS에서 STYLE 엘레멘트의 내용을 어떻게 나타내는가를 설명한다.

<STYLE type="text/css">
<!--
  H1 { color: red }
  P  { color: blue}
-->
</STYLE>

14.6 스타일쉬트의 HTTP 헤더(header)와 연결

웹 서버 관리자들은 스타일쉬트를 페이지들의 구룹에 적용 되도록 서버를 구성하는 것이 편리하다는 것을 안다.

항목 19.6.1.2의 [RFC2068]에 설명한 HTTP Link 헤더는 같은 애트리뷰트와 값들을 갖는 LINK 엘레멘트와 같은 효과를 갖는다. 복수 연결 헤더들은 같은 배열을 갖는 복수(multiple) LINK 엘레멘트에 상응한다.

예를 들면:

 Link: <http://www.acme.com/corporate.css>; REL=stylesheet

에 상응하는:

 <LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

여러개의 대체 스타일들을 복수 Link 헤더로 지정하는 것이 가능하고, 그 디폴트 스타일을 알기 위하여, rel 애트리뷰트를 사용한다.

다음 예제에서, rel 애트리뷰트에 키워드 "alternate"가 생략 되었으므로, 디폴트로 "compact"가 적용된다.

 Link: <compact.css>; rel="stylesheet"; title="compact"
 Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"

이것은 HTML 문서가 전자우편으로 보내 질 때도 작용하여야 한다. 일부 전자우편(email) 대행자(agent)는 [RFC822] 헤더의 순서를 바꿀 수 있다. 이것이 link 헤더에서 지정 된 스타일쉬트에서 카스케드(cascade) 순서에 영향을 주는 것을 피하기 위하여, 제작자는 같은 헤더 필드의 몇 개 인트탄스(instance)들을 에 통합하기 위하여 헤더(header) 연쇄를 사용 할 수 있다. 따옴표는 애트리뷰트 값이 공간을 포함 할 때 만 필요하다. 글자들의 참조를 위한 것이 아니면 HTTP 또는 전자우편 헤더들에서, 또는게이트웨이(gateway)들을 통하여 전송 될 때 영향을 미칠 수 있는 SGML 엔티티들의 사용은 허용 되지 않는다.

HTTP 헤더들에 의하여 정의 된 LINK와 META 엘레멘트는 문서의HEAD에 있는 LINK와 META 엘레멘트 보다 먼저 나오도록 정의 되어야 한다.

이

문서(http://trio.co.kr/webrefer/html40/present/styles.html)는 자유로이 연결 사용이 가능함.