| 2 CSS2 규격의 소개 |
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
이 설명서에는 우리가 얼마나 쉽게 단순한 스타일쉬트들를 설계할 수 있는가를 보여준다. 이 설명서를 읽기 위해서는, 약간의 번역문 HTML 4과 일부 컴퓨터(desktop) 웹문서 간행(publishing)의 기본적인 용어를 알 필요가 있다.
여기서 작은 HTML 문서로부터 시작한다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Bach의 홈페이지</TITLE> </HEAD> <BODY> <H1>Bach의 홈페이지</H1> <P>존 세바스찬 바하는 작곡가이다. </BODY> </HTML>
H1 엘레멘트의 텍스트 색상을 청색(blue)으로 하기 위하여, CSS 명령을 다음과 같이 쓸 수 있다:
H1 { color: blue }
하나의 CSS 명령은 선택자(selector) ('H1')와 선언 ('color: blue')의 두 중요 부분으로 구성된다. 선언은 속성('color')과 값('blue') 두 부분을 갖는다. 위 예제는 한 HTML 문서에서 필요한 표현 속성 하나에 만 영향을 주도록 하는데, 이는 그 자체로 스타일쉬트의 요건을 갖춘 것이다. 스타일쉬트들이 결합한다는 것이 하나의 기초적 속성이므로, 제작자가 스타일쉬트들을 결합함으로서 최종적인 문서의 표현을 결정한다.
번역문 HTML 4 규격 스타일쉬트에서 어떻게 HTML 문서에 지정될 수 있는가를 정의하고 있다. 방법은 HTML 문서안에서, 또는 외부(external) 스타일쉬트를 통하여 할 수 있다. 문서에 스타일쉬트를 삽입하기 위하여서는 STYLE 엘레멘트를 사용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>바하(Bach)의 홈페이지</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>바하(Bach)의 홈페이지</H1>
<P>존 세바스찬 바하는 작곡가이다.
</BODY>
</HTML>
최대의 융통성(flexibility)을 위하여, 제작자들이 외부(external) 스타일쉬트들를 지정할 것을 추천한다; 이것들은 HTML 문서 원문의 수정없이 수정될 수 있고, 여러 문서들사이에서 공통으로 사용될 수 있다. 외부(external) 스타일쉬트를 연결하기 위해서는, LINK 엘레멘트를 사용한다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>바하(Bach)의 홈페이지</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>바하(Bach)의 홈페이지</H1>
<P>존 세바스찬 바하는 작곡가이다.
</BODY>
</HTML>
이 LINK 엘레멘트는 다음을 지정한다:
스타일쉬트와 그 구조적(structure) 작성(markup)사이의 긴밀한 관계를 보기위하여, 이 설명서의 STYLE 엘레멘트를 계속 사용해 보자. 여기에 색상들을 추가하자:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>바하(Bach)의 홈페이지</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>바하(Bach)의 홈페이지</H1>
<P>존 세바스찬 바하는 작곡가이다.
</BODY>
</HTML>
이 스타일쉬트는 이제 두개의 명령을 갖는데, 첫번째 것은 BODY 엘레멘트의 색상을 적색('red')으로 설정하고, 두번째 것은 H1 엘레멘트의 색상을 청색('blue')으로 설정한다. P 엘레멘트에는 색상값이 지정되지 않았으므로, 그의 모체 엘레멘트, 말하자면, BODY로부터 색상이 전달(inherit)된다. H1 엘레멘트도 BODY의 자손(child) 엘레멘트이지 만 두번째 명령이 전달된 값을 덮어씌운다(override). CSS에서 자주 다른 값들사이에 이와 같은 모순들이 발생된다. 이 규격은 이 문제를 어떻게 해결할 것인가를 설명한다.
CSS2는 'color'를 포함하여 100 개이상의 다른 속성들을 갖는다.
이들의 일부를 보자:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>바하(Bach)의 홈페이지</TITLE>
<STYLE type="text/css">
BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; }
</STYLE>
</HEAD>
<BODY>
<H1>바하(Bach)의 홈페이지</H1>
<P>존 세바스찬 바하는 작곡가이다.
</BODY>
</HTML>
첫번째 것은 대괄호로 ({...}) 그 안에서 여러 선언들이 구룹지워 지고, 세미콜론(;)으로 분리되며 마지막 선언도 세미콜론(;)을 가질 수 있다.
BODY 엘레멘트에서 첫번째 선언은 글꼴 가족(font family)를 "Gill Sans"로 설정하였다. 만일 그 글꼴이 없으면, 사용도구(자주 브라우저로 불리움)는 모든 사용도구들이 아는 다섯가지 기본(generic) 글꼴 중의 하나인 글꼴 종류(font family) 'sans-serif'를 사용한다. BODY의 자손(child) 엘레멘트들은 전달된 그 'font-family' 속성값을 갖는다.
두번째 선언은 BODY 엘레멘트의 글꼴 크기(font size)를 12 points로 설정한다. "point"는 일반적으로 인쇄에 관련되는 글꼴 크기를 나타내기 위해 사용되는 단위로 다른 길이(length) 값이다. 이는 환경에 따라 상대적(relative)으로 조정되지 않는 절대(absolute) 단위의 한 예제이다.
세번째 선언은 상대 단위를 사용하는데 이는 주위의 상황에 따라 크기를 조절(scale)한다. 이 "em" 단위는 그 엘레멘트의 글꼴 크기를 참조한다. 이 경우 결과는 BODY 엘레멘트 주위의 마진(margin)들이 글꼴 크기 폭의 3배가 된다.
CSS는 다른 어떤 구조 문서 양식에서도 사용될 수 있는데, 예를 들면 확장 마크업 언어([XML10]: eXtensible Markup Language)와 함께 사용될 수 있다. 사실, XML는 제작자들이 사용도구들이 어떻게 표현하는가를 알지 못하고 그들 자신의 엘레멘트들 작성하므로, HTML에서보다 더 스타일쉬트들에 따른다.
여기에 간단한 XML 부분이 있다:
<ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>
이 부분을 문서의 형식으로 표시하기 위하여, 먼저 엘레멘트들을 인라인 레벨(inline-level:줄마꿈 없이)과 블럭레벨(block-level:줄바꿈을 발생시키면서)로 선언하여야 한다.
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
첫번째 명령은 INSTRUMENT를 인라인(inline)이 되도록 선언하고, 두번째 명령은, 컴마로 분리된 선택자(selector)들의 목록으로, 모든 다른 엘레멘트들을 블럭레벨(block-level)이 되도록 선언하였다.
스타일쉬트를 XML 문서에 연결시키기 위한 하나의 제안은 처리 지시(processing instruction)를 사용하는 것이다.
<?XML:stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>
보는 사용도구는 위의 예제를 다음과 같이 양식화한다:
|
|
단어 "flute"가 인라인(inline) 엘레멘트 INSTRUMENT의 내용이므로 그 문단 안에 있음을 주시하라.
여전히, 이 텍스트은 우리가 원하는 방식으로 양식화되지 않았다. 예를 들어, 이 제목(headline)의 글꼴 크기(font size)가 다른 텍스트보다 커야하고 제작자의 이름을 이태릭체(italic)로 표현하기를 원할 수 있다.
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }
보는 사용도구는 위의 예제를 다음과 같이 양식화한다:
|
|
스타일쉬트에 명령들을 더 추가하므로서 문서의 표현을 개선할 수 있다.
이 항목에서는 사용도구들이 어떻게 CSS 작업을 지원하는가 하는 가능한 모델(model)을 소개한다. 이는 단지 개념적인 모델이고 실제 적용들은 서로 다를 수 있다.
이 모델에서, 사용도구는 다음 과정에 따라 원문을 처리한다.
그 목표 메디아 타입에 적당한 양식화 기능에 따라 값들이 부분적으로 계산된다. 예를 들어, 만일 그 목표 메디아가 스크린이면, 사용도구는 보이는 양식화 모델을 적용한다. 만일 그 목표 메디아가 인쇄된 페이지이면, 사용도구는 페이지 모델(page model)을 적용한다. 목표 메디아가 소리(aural) 표현 장치(예: 음성 합성장치:음성 합성 장치: speech synthesizer)이면, 사용도구은 소리 표현 모델을 적용한다.
CSS 사용도구는 그 문서의 계통(tree)을 이 단계에서는 변경시키지 않는다는 점을 주시하라. 다시 말하면, 스타일쉬트들로 인해 생성된 내용은 문서언어 처리자(processor)에 다시 보내지지는 않는다(예: 재 해석).
제 1 단계는 이 규격의 범위 밖의 사항 임(예를 들어, [DOM]을 참조).
2-5 단계는 이 규격의 내용 임.
6 단계는 이 규격의 범위 밖의 사항 임.
모든 메디아(media)에서, 용어 창은 "양식화 구조가 표현되는 공간"으로 정의한다. 창은 공간의 각 방향으로 무한정이나, 표현의 일반적으로 창의 목표 메디아에 따라 사용도구에 의해 설정된 범위로 한정되어 나타난다. 예를 들어, 사용도구들의 스크린에 표현은 일반적으로 최소 너비와 뷰포인트(viewport)의 규격에 따라 선택된 최초 너비를 갖는다. 사용도구들이 페이지를 표현하는데는 일반적으로 너비와 높이의 제한을 받는다. 소리(aural) 사용도구들는 소리(audio) 공간의 범위를 제한할 수 있다. 그러나 시간에 대한 제한은 하지 않는다.
CSS2 선택자(selector)와 속성들은 스타일쉬트들이 문서 또는 사용도구에서 다음 부분의 참조함을 허용한다:
CSS2는, 이전 CSS1와 같이, 설계 원칙에 기초하였다:
이전, 이후 버전 적용성(compatibility). CSS2 사용도구는 CSS1 스타일쉬트을 이해하여 사용할 수 있다. CSS1 사용도구는 CSS2 스타일쉬트과 이해하지 못하는 폐기(discard)된 부분을 읽을 수 있다. 또한, CSS를 지원하지 않는 사용도구들은 스타일로 보강된(style-enhanced) 문서를 표현할 수 있다. 물론, CSS로의 스타일적 보강(stylistic enhancement)은 표현되지는 않을 수 있지 만, 모든 내용(content)이 표시된다.
구조화된 문서의 보완(complementary). 스타일쉬트는 작성 문구(marked-up)에 스타일 정보를 제공함으로서 구조화된 문서를 보완한다(예: HTML과 XML 적용). 스타일쉬트의 변경은 작성 문구를 조금 혹은 아무 영향 없이 쉽게 변경시킬 수 있다.
제작회사(vendor), 플래트폼(platform)과 장치에 대해 독립적. 스타일쉬트은 문서을 제작회사, 플래트폼과 장치에 대해 독립적(independent)으로 무관하게 유지할 수 있게하고, 또한, 스타일쉬트 자체는 이들의 영향을 받지 않으나, CSS2는 스타일쉬트로 장치들의 구룹을 목표로 지정할 수 있다(예: 프린터들).
유지성(maintainability). 문서들로 부터 스타일쉬트들을 지정하는 것으로, 웹매스터(webmaster)들은 간단히 사이트를 유지하고, 모든 사이트를 통하여 일관성 있게 관리할 수 있다. 예를 들어, 한 조직(organization)의 배경색 변경들을, 단지한 화일(file)을 변경하면 된다.
단순성. CSS2는 CSS1보다 복잡하다. 그러나 이는 인간이 읽고 쓸 수 있는 간단한 스타일(style) 언어 상태를 그 대로 유지하고 있다. CSS 속성들은 서로 영향을 받지 않으며(independent), 일반적으로 단지 한 가지 효과 만을 준다.
네트위크(network) 성능. CSS는 내용을 표현하는데 치밀한(compact) 엔코딩(encoding)을 제공한다. 어떤 표현 효과들을 위하여 제작자들에 의하여 자주 사용되는 이미지 또는 소리 화일(file)들과 비교하여, 스타일쉬트이 가장 많이 내용의 크기를 감소기켜 준다. 또한, 적은 수의 네트위크 연결들을 필요로하며, 이는 추가적으로 네트위크 성능을 향상시킨다.
탄력성(flexibility). CSS는 여러 방식으로 내용(content)에 적용될 수 있다. 핵심(key) 기능은 다음과 같이 스타일 정보를 카스케이드하는 능력인 것이다: 디폴트(사용도구의) 스타일쉬트, 사용자의 스타일쉬트, 연결된(linked) 스타일쉬트, 문서의 머릿말(head), 문서 본체(body)의 순서로 된 양식화 엘레멘트들의 애트리뷰트.
풍부성(richness). 제작자에게 풍부한 표현 효과들의 세트를 제공하므로서, 표현의 수단으로 웹(Web)의 풍부성을 향상시킨다. 설계자들은 오래 동안 컴퓨터 출판(desktop publishing)과 스라이드쇼(slide-show) 적용에서 공히 기능성을 갈구해 왔다. 일부의 요구된 표현 효과들과 장치 독립성이 상치가 되기는 하지만, CSS2는 그들의 요구에 부합하는 방향으로 설계자들에게 허용하도록 많이 진행되었다.
대체(alternative) 언어와 결합(binding). 이 규격에서 기술하고 있는 CSS 속성들은 보이는 표현과 소리(aura) 표현들을 위한 양식화 모델로 구성된다. 이 양식화 모델은 CSS 언어를 통하여 접근될 수 있고, 다른 언어들과 결합(binding)하는 것 또한 가능하다. 예를 들어, 자바스크립트(JavaScript) 프로그램으로 엘레멘트의 'color' 속성과 같은 어떤 값을 다이나믹(dynamic)하게 변경시킬 수 있다.
접속성(accessibility). 여러 CSS 기능들은 장애자(disabilities)들로 하여금 웹(Web)에 더 쉽게 접근할 수 있게하여 준다.
주석. CSS와 HTML을 사용하는 접속성(accessible) 문서의 디자인에 관한 추가 정보를 위하여, [WAI-PAGEAUTH]을 참조하라.
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
맨위이
문서()는 자유로이 연결 사용이 가능함.
(수정일 )