2 CSS 2.1 소개 
2.1 HTML을 위한 간단한 CSS 2.1 설명서
이번 섹션은 non-normative 이다.
이 설명서는 얼마나 쉽게 스타일 시트을 설계할 수 있는지를 보여준다. 이 설명서를 읽기 위해서 조금의 HTML(예: HTML 4)과 일부 전자 출판의 기본적인 용어를 알 필요가 있다.
작은 HTML 문서로 시작한다 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
H1 요소의 텍스트 색상을 빨강색으로 지정하기 위해서, 다음처럼 CSS 규칙을 작성할 수 있다:
h1 { color: red}
하나의 CSS 규칙은 선택자('h1')와 선언('color:red')의 2개 주요한 부분으로 구성된다. HTML은 요소 이름의 대소문자 구분이 없어서, "h1"은 "H1"처럼 작동한다. 선언은 속성('color')과 값('red') 2개 부분으로 구성된다. 위 예제는 하나의 HTML 문서를 출력하는데 필요한 오직 하나의 속성에게 영향을 주는데, 이는 그 자체로 스타일쉬트의 요건을 갖췄다. 스타일쉬트들이 결합하는 것은 CSS의 기본 특징이므로, 다른 스타일 시트와 결합해서 최종적인 문서의 표현이 결정된다.
HTML 4 명세서에서 HTML 문서에 스타일을 지정하는 방법(HTML 문서 안에서 작성하거나 외부 스타일 시트를 사용)을 정의한다. 문서에 스타일 시트를 끼워넣기 위해서 STYLE 요소를 이용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
h1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
최대한 유연하기 위해서, 제작자가 외부 스타일 시트를 지정할 것을 추천한다. 이는 HTML 원본을 수정하지 않고 CSS만 변경될 수 있으며, 여러 문서와 함께 사용될 수 있다. 외부 스타일 시트를 연결하기 위해서 LINK 요소를 이용한다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
이 LINK 요소는은 지정한다:
- 연결할 종류 : "stylesheet"
- 연결할 위치 : "href"
- 연결될 스타일 시트의 형식 : "text/css".
스타일 시트와 구조적인 마크업 사이의 긴밀한 관계를 보여주기 위하여는, 이 설명서의 STYLE 요소를 계속 사용하자. 여기에 색상을 추가하자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body { color: black; background: white }
h1 { color: red; background: white }
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
이 스타일 시트는 이제 4개의 규칙을 갖으며, 첫번째 2개는 BODY 요소의 색상과 배경색을 지정하고, 마지막 2개는 H1 요소의 색상과 배경색을 지정한다. P 요소는 아무런 색상도 지정되지 않았기에, 그것의 부모 요소인 BODY의 색상을 상속받는다. H1 요소도 BODY의 자식 요소이지만, 두번째 규칙이 전달된 값을 덮어쓴다. 그러나 두번째 규칙은 승계한 가치를 무시한다. CSS는 수시로 다른 값 사이에서 이와 같은 충돌이 발생하고, 이 명세서는 이 문제를 해결하는 방법을 설명한다.
CSS 2.1은 "color"를 포함하여 90 개 이상 속성이 갖는다. 이들 일부를 확인하자.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Bach's home page</TITLE>
<STYLE type="text/css">
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
고시에 첫번째 것은 몇몇 선언이 꼬부라진 버팀대에 의해 둘러싸인 구획 안에 분류된다 이다 ({…}), 마지막 선언이 또한 세미콜론에 선행될 수 있더라도, 그리고 세미콜론으로 분리해.
바디 성분 세트에 첫번째 선언 "아가미에 글꼴 가족 Sans". 그 글꼴이 유효하지 않은 경우에, 수시로로 "브라우저") 모든 사용자 에이전트가 알고 있는 5개의 일반적인 글꼴 가족의 한개인 "Sans Serif" 글꼴 가족을 불리는 사용자 에이전트는 (이용할 것이다. 바디의 아이 성분은 "글꼴 가족" 속성의 가치를 승계할 것이다.
두번째 선언은 12 점에 바디 성분의 폰트 사이즈를 놓는다. "점" 단위는 인쇄하 근거한 인쇄술에서 통용된다 폰트 사이즈와 다른 길이 가치를 나타내기 위하여. 환경에 관련된 오르지 않는 절대 단위의 보기이다.
제 3 의 선언은 그것의 주위에 관하여 오르는 상대적인 단위를 이용한다. "em" 단위는 성분의 폰트 사이즈를 나타난다. 이런 경우에 결과는 바디 성분의 주위에 한계가 폰트 사이즈 보다는 넓게 3 시간 이다 이다. 2.2 XML를 위한 짧은 CSS 2.1 튜토리얼
이 단면도는 non-normative 이다.
CSS는 XML [XML10]의 응용을%s 가진 어떤 구축한 문서 형식든지 함께, 예를 들면 사용될 수 있다. 실제로, 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>
형식 문서 같이 a에 있는 이 파편을 디스플레이하기 위하여는, 우리는과인지 어느 것 (i.e, 원인 선 끊는지 막 수준은) 첫째로 인라인 수준은 어느 성분인지 선언해야 한다 (i.e, 선 틈을 일으키는 원인이 되지 말라).
INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
첫번째 규칙은 인라인 이고 계기가 선언하고 선별기의 그것의 쉼표 분리한 명부와 더불어 두번째 규칙은, 막 수준이고, 다른 모든 성분이 선언한다. XML에 있는 요소 이름은 대소문자에 민감하다, 그래서 소문자 (예를들면 "계기 ")로 쓴 선별기는 대문자 (예를들면 "계기 ")와 다르다.
XML 문서에 문서 양식 연결의 1가지의 방법은 가공 명령을 사용하기 위한 것이다:
<?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>
시각적인 사용자 에이전트는 다음과 같음 위 보기를 배열할 수 있었다:
보기 연출 [D]
인라인 성분 계기의 내용이기 때문에 워드 "플루트"가 절 안에 다는 것을 주의하십시오.
아직도, 원본은 당신이 예상할 방법이라고 배열되지 않는다. 예를 들면, 표제 폰트 사이즈는 그 후에 원본의 나머지 보다는 더 커야 하고, 이탤리체 글자에 있는 저자의 이름을 디스플레이하고 싶을 수도 있다:
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 }
시각적인 사용자 에이전트는 다음과 같음 위 보기를 배열할 수 있었다:
보기 연출 [D]
문서 양식에 추가 규칙을 추가하는 것은 문서의 프리젠테이션을 더 기술하는 것을 허용할 것이다. 2.3 CSS 2.1 프로세스 모델
이 단면도는 1개의 가능한 모형을 어떻게의 CSS 일을 지원하는 사용자 에이전트 제출한다. 이것은 개념적 모형만이다; 실제적인 실시는 변화할 수 있다.
이 모형에서는, 사용자 에이전트는 뒤에 오는 단계를 통해 가서 근원을 가공한다:
- 원시 문서를 분석하고 문서 나무를 만드십시오.
- 표적 미디어 타입을 확인하십시오.
- 문서와 관련되었던 표적 미디어 타입을%s 지정되는 모든 문서 양식을 만회하십시오.
- 표적 미디어 타입에 적용 가능한 각 속성에 단 하나 가치를 지정해서 문서 나무의 각 성분에 주석을 다십시오. 속성은 폭포가 되어 떨어지고는 및 상속에 단면도에서 기술된 기계장치에 따라 가치를 지정된다.
가치의 계산의 부분은 표적 미디어 타입을%s 적합한 포맷으로 만듬 산법에 달려 있다. 예를 들면, 표적 매체가 스크린인 경우에, 사용자 에이전트는 시각적인 포맷으로 만듬 모형을 적용한다.
- 주석이 달린 문서 나무에서, 포맷으로 만듬 구조를 생성하십시오. 종종, 포맷으로 만듬 구조는 바싹 문서 나무를 닮는다, 그러나 저자가 가짜 성분과 생성하는 내용을 사용할 때 또한, 현저하게 중요하게 다를 수 있다. 첫째로, 포맷으로 만듬 구조는 전혀 "tree-shaped" 일 필요가 없는다 -- 구조의 본질은 실시에 달려 있다. 둘째로, 포맷으로 만듬 구조는 문서 나무 보다는 더 많은 것 또는 더 적은 정보를 포함할 수 있다. 예를 들면, 문서 나무에 있는 성분에는 "전시" 속성의 가치가를 위해 "아무도" 있는 경우에, 그 성분은 포맷으로 만듬 구조에서 아무것도 생성하지 않을 것이다. 명부 성분은, 다른 손에, 포맷으로 만듬 구조에 있는 추가 정보를 생성할 수 있다: 명부 성분의 내용 및 명부는 정보 (예를들면, 탄알 심상)를 유행에 따라 디자인 한다.
CSS 사용자 에이전트가 이 단계 도중 문서 나무를 바꾸지 않는다는 것을 유의하십시오. 특히, 문서 양식 만족한 생성된 때문에 문서 언어 처리기로 다시 공급되지 않는다 (예를들면, reparsing를 위해).
- 표적 매체로 포맷으로 만듬 구조를 옮기십시오 (예를들면, 결과를 인쇄하고십시오, 스크린에 디스플레이하고십시오, 연설, 등등으로 만드십시오).
단계 1은 이 명세의 범위 밖에서 속인다 (, 예를 들면, [DOM] 보십시오).
단계는 이 명세의 대부분에 의해 2-5 제시된다.
단계 6은 이 명세의 범위 밖에서 속인다.
2.3.1 창
모든 미디어에서 창이라는 요어는 "양식화 구조가 표현되는 공간"으로 정의한다. 창은 공간의 각 방향으로 무한하지만, 표현의 일반적으로 창의 목표 미디아에 따라 사용도구에 의해 설정된 범위로 한정되어 나타난다. 예를 들면, 유저 에이전트는 페이지를 표현하는데 너비와 높이의 제한을 받는다.
2.3.2 CSS 2.1 연설 모형
CSS 2.1 선별기와 속성은 문서 양식이 문서 사용자 에이전트의 뒤에 오는 부분을 나타나는 것을 허용한다:
- 문서 계통에 있는 요소 및 그들 사이의 특정 관계 (선택자 참조).
- 문서 계통에 있는 요소들의 속성과 그 속성의 값(속성 선택자 참조).
- 요소 내용의 일부분(첫째 줄과 첫째 단어 가상 요소 참조).
- 특정 상태에 있을 때 문서 계통의 요소들(가상 클래스 참조).
- 문서가 출력될 때 창의 일부 사항
- 일부 시스템 정보 (사용자 인터페이스 참조).
2.4 CSS 설계 원리
이 단면도는 non-normative 이다.
그것의 앞에 CSS2 그리고 CSS1로 CSS 2.1는, 설계 원리의 세트에, 근거를 둔다:
- 상호 호환성. CSS 2.1 사용자 에이전트는 CSS1 문서 양식을 이해할 수 있을 것이다. CSS1 사용자 에이전트는 이해하지 않는 버리기 부속과 CSS 2.1 문서 양식을 읽을 수 있을 것이다. 더구나, CSS 지원 없이 사용자 에이전트는 작풍 강화한 문서를 디스플레이할 수 있을 것이다. 당연히, 가능하게 한 CSS에 의해 문체 증진은 만들어지지 않을 것이다, 그러나 모든 내용은 제출될 것이다.
- 구조화된 문서와 상호 보완성. 문서 양식은 marked-up 원본을%s 문체 정보를 제공하는 구축한 문서를 (예를들면, HTML와 XML 응용) 보충한다. 이윤폭에 대한 거의 비슷하게 충격을%s 가진 문서 양식을 바꾸는 것은 쉬워야 한다.
- 벤더, 플랫폼 및 장치 독립성. 문서 양식은 문서를 납품업자, 플래트홈 및 장치 무소속자에 남아 있는 가능하게 한다. 문서 양식 그들자신은 또한 납품업자와 플래트홈 무소속자이다, 그러나 CSS 2.1는 장치 (예를들면, 인쇄 기계)의 그룹을%s 문서 양식을 표적으로 하는 것을 허용한다.
- 유지가능성. 문서에서 문서 양식을%s 가르켜서, 웹마스터는 사이트 정비를 간단하게 하고 사이트를 통하여 일관된 품질을 유지할 수 있다. 예를 들면, 조직의 배경 색깔이 변화하는 경우에, 1개의 파일만 바뀔 필요가 있다.
- 단순성. CSS는 인간 판독형과 쓸 수 있는 간단한 작풍 언어이다. CSS 속성은 가능한 가장 큰 넓이에 서로의 지켜진 무소속자이고 일반적으로 어느 정도 효력을 달성하는 단지 1가지의 방법이 있다.
- ''네트워크 성능'. CSS는 내용을 제출하는 방법의 조밀한 암호화를 제공한다. , 문서 양식 특정 연출 효력을 달성하기 위하여 저자에 의하여 자주 사용하는 오디오 파일, 또는 심상에 수시로 비교하는 감소 만족한 크기. 더구나, 점진적 증가 통신망 성과 몇몇 통신망 연결이 열려야 한다.
- 탄력성. CSS는 몇몇 방법에 있는 내용에 적용될 수 있다. 주요 특징은 문서 바디를 형성하는 성분을%s 디폴트 (사용자 에이전트) 문서 양식, 사용자 문서 양식, 연결한 문서 양식, 문서 헤드를 폭포가 되어 떨어지는 기능 그리고 속성에서 지정된 작풍 정보이다.
- 풍부함. 연출 효력의 리치 설정을%s 저자에게 제공하는 것은 표정의 매체 만큼 웹의 부유를 증가한다. 디자이너는 일반적으로 소형 출판업 및 슬라이드 쇼 응용에서 찾아낸 기능을 갈망하고 있다. 몇몇은의 요구한 만드는 효력 장치 독립에 투쟁한다, 그러나 CSS 2.1는 긴 방법 수여 디자이너로 그들의 요구 간다.
- 대체 언어와 결합. 이 명세 양식에서 기술되는 CSS 속성의 세트 시각 및 청각 프리젠테이션을%s 일관된 포맷으로 만듬 모형. 이 포맷으로 만듬 모형은 CSS 언어를 통해 접근될 수 있다, 그러나 다른 언어에 바인딩은 또한 가능하다. 예를 들면, JavaScript 프로그램은 역동적으로 특정 성분의 "색깔" 속성의 가치를 바꿀 수 있다.
- 접근성. 몇몇 CSS 특징은 웹을 무력에 사용자에 이용할 수 있게 할 것이다:
- 글꼴 외관을 통제하는 속성은 저자가 접근하기 어려운 비트맵 방식 원본 심상을 삭제하는 것을 허용한다.
- 속성을 두어서 저자가 위로 배치를 강제하기 위하여 속인다 (예를들면, 보이지 않는 심상) 표를 삭제하는 것을 허용하십시오.
- 의미론의!중요한 규칙은 특정한 프리젠테이션 필요조건을%s 가진 사용자가 저자의 문서 양식을 무시할 다는 것을 의미한다.
- "" 모든 속성을%s 가치를 향상하고 폭포가 되어 떨어지는 일반성을 더 쉽고 더 일관된 작풍 조정을%s 허용한다 승계하십시오.
- 매체 그룹을%s 향상한 매체 지원은, 및, 및 TTY 미디어 타입 돋을새김된, 브라유 사용자와 저자가 그 장치에 페이지를 맞추는 것을 허용할 것이다.
주. CSS와 HTML를 사용하여 접근 가능한 문서 디자인에 관하여 추가 정보를 위해, 보십시오 [WAI-PAGEAUTH].
Hooney (124.111.244.156)
2008년 01월 01일, 09:43
