| Cascading Style Sheets, level 1 | |
| CSS 2 규격 | HTML 4 규격 | XHTML 1.0 규격 | XML 1.0 규격 | HTML규격 스타일 |
| 이 버전은: | 영문 http://www.w3.org/TR/1999/REC-CSS1-19990111 | |
| 최종 버전: | 영문 http://www.w3.org/TR/REC-CSS1 | |
| 이전 버전: | 영문 http://www.w3.org/TR/REC-CSS1-961217 | |
| 저자: | 영문 Håkon Wium Lie (howcome@w3.org) 영문 Bert Bos (bert@w3.org) |
이 규격은 W3C의 추천안이다. 이는 영문 W3C (http://www.w3.org/) 멤버들에 의하여 점검 되었고, 이 규격이 사용하는데 적당하다는 일반적으로 공감대가 형성되었다. 이는 안정적 문서로서 조회하고 다른 문서에서 인용할 수 있다. W3C는 이 추천안 발전을 널리 보급하도록 장려한다.
현재 W3C의 추천안들의 목록과 다른 기술적 문서들을 영문 http://www.w3.org/TR/에서 볼 수 있다.
이 규격은 당초 1996년 12월 17일 제시된 것으로 부터 개정된 버전이다.
당초의 버전으로부터의 개정 내용은 목록 영문 부록 F에 있다.
이 규격의 알려진 오류는
영문 http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata에 있다.
이 규격(CSS1)은 Cascading Style Sheet 기능의 level 1을 정의한다. CSS1은 제작자들과 문서를 보는 리더들이 스타일(예를 들어 글꼴, 색상과 간격 주기)을 HTML 문서들에 추가할 수 있도록 하는 단순한 스타일쉬트 기능이다. CSS1 언어는 일반적인 컴퓨터(desktop)에서 문서 작성 용어로, 인간이 읽고, 쓰고, 표현할 수 있는 것이다.
CSS의 하나의 기초적인 능력은 style sheets cascade이다.; 제작자들은 선호하는 스타일쉬트를 첨부할 수 있으며, 리더는 장애자등을 위하여 그가 원하는 스타일쉬트로 조정할 수 있다. 이 규격에는 다른 스타일쉬트 간의 충돌을 해결하는 규칙이 정의되어 있다.
이 추천안 W3C의 영문 Style Sheets 분야 활동의 결과물이다. [1] 스타일쉬트에 대한 배경 정보를 참조하라.
요약
용어
1 기본 개념
1.1 HTML 문서에 포함
1.2 구룹으로 묶기
1.3 전달(inherit)
1.4 선택자(selector)로서 클래스(class)
1.5 선택자(selector)로서 ID
1.6 복합 선택자(contextual selector)
1.7 코멘트(Comment)
2 가상 클래스(class)와 가상 엘레멘트
2.1 앤커(anchor) 가상 클래스(class)
2.2 인쇄(typographical) 가상 엘레멘트들
2.3 첫줄('first-line') 가상 엘레멘트
2.4 첫글자('first-letter') 가상 엘레멘트
2.5 선택자(selector) 안의 가상 엘레멘트
2.6 복수 가상 엘레멘트
3 카스케이드(cascade)
3.1 중요('important')
3.2 카스케이딩 순서
4 양식화(formatting) 모델
4.1 블럭레벨(block-level) 엘레멘트
4.1.1 수직 양식화
4.1.2 수평 양식화
4.1.3 목록(List-item) 엘레멘트들
4.1.4 유동(floating) 엘레멘트들
4.2 인라인(inline) 엘레멘트들
4.3 대체된(replaced) 엘레멘트들
4.4 줄의 높이
4.5 화면
4.6 'BR' 엘레멘트들
5 CSS1 속성들
5.1 속성값에 대한 주기
5.2 글자(font) 속성들
5.2.1 글자(font) 맞추기
5.2.2 글꼴들('font-family')
5.2.3 글꼴 스타일('font-style')
5.2.4 글꼴 변화('font-variant')
5.2.5 글꼴 굵기('font-weight')
5.2.6 글꼴 크기('font-size')
5.2.7 글꼴('font')
5.3 색상(color)과 배경(background) 속성
5.3.1 색상('color')
5.3.2 배경색('background-color')
5.3.3 배경 이미지('background-image')
5.3.4 배경 반복('background-repeat')
5.3.5 배경 첨부('background-attachment')
5.3.6 배경 위치('background-position')
5.3.7 배경('background')
5.4 텍스트(text) 속성들
5.4.1 단어 간격('word-spacing')
5.4.2 글자 간격('letter-spacing')
5.4.3 텍스트 장식('text-decoration')
5.4.4 수직 정렬('vertical-align')
5.4.5 텍스트 변환('text-transform')
5.4.6 텍스트 정렬('text-align')
5.4.7 텍스트 들여쓰기('text-indent')
5.4.8 줄높이('line-height')
5.5 박스(box) 속성들
5.5.1 위쪽 마진('margin-top')
5.5.2 오른쪽 마진('margin-right')
5.5.3 아래쪽 마진('margin-bottom')
5.5.4 왼쪽 마진('margin-left')
5.5.5 마진('margin')
5.5.6 위쪽 패딩('padding-top')
5.5.7 오른쪽 패딩('padding-right')
5.5.8 아래쪽 패딩('padding-bottom')
5.5.9 왼쪽 패딩('padding-left')
5.5.10 패딩('padding')
5.5.11 위쪽 테두리 두께('border-top-width')
5.5.12 오른쪽 테두리 두께('border-right-width')
5.5.13 아래쪽 테두리 두께('border-bottom-width')
5.5.14 왼쪽 테두리 두께('border-left-width')
5.5.15 테두리 두께('border-width')
5.5.16 테두리 색상('border-color')
5.5.17 테두리 스타일('border-style')
5.5.18 위쪽 테두리('border-top')
5.5.19 오른쪽 테두리('border-right')
5.5.20 아래쪽 테두리('border-bottom')
5.5.21 왼쪽 테두리('border-left')
5.5.22 테두리('border')
5.5.23 너비('width')
5.5.24 높이('height')
5.5.25 유동('float')
5.5.26 'clear'
5.6 속성들의 분류
5.6.1 'display'
5.6.2 공백('white-space')
5.6.3 목록 스타일 타입('list-style-type')
5.6.4 목록 스타일 이미지('list-style-image')
5.6.5 목록 스타일 위치('list-style-position')
5.6.6 목록 스타일('list-style')
6 단위(unit)들
6.1 길이 단위
6.2 백분율 단위(percentage unit)들
6.3 색상 단위(color unit)들
6.4 URL
7 CSS1에 부합
7.1 향 후 버전에 부합한 처리(parsing)
8 참고
9 문서를 구성한 인사들
부록 A: HTML 2.0을 위한 견본 스타일쉬트
부록 B: CSS1 문법
부록 C: 엔코딩(encoding)
부록 D: 감마(gamma) 수정
부록 E: CSS1의 적용성과 확장성
부록 F: 1996년 12월 17일 버전으로 부터의 변경들
이 규격의 텍스트안에서, 단일 따옴표('...') 안의 내용은 HTML과 CSS 문장이다.
단일 스타일 쉬트를 설계하는 것은 간단하다. 누구나 을 간단히 알고 기본적인 편집을 알면된다. 예를 들어, 'H1' 엘레멘트의 색상을 청색으로 설정하려면, 쉽게 아래와 같이 표시하면 된다.
H1 { color: blue }
위예제는 단일 CSS 명령(rule)이다. 명령(rule)은 두 부분으로 구성되는데: 선택자(selector) ('H1')와 선언('color: blue')이다. 선언은 두 부분으로 구성되는데: 속성 ('color')과 값('blue')이다. While the 위 예제에서는 HTML 문서를 표현하는데 한가지 속성 만 지정 했는데, 이로서 자신의 스타일쉬트가 되는 것이다. 다른 백여종의 기본 기능의 스타일쉬트들과 조합하여 최종적인 문서의 표현을 하게 되는 것이다.
선택자(selector)는 HTML 문서와 스타일쉬트를 연결시고, 모든 HTML 엘레멘트들이 선택자(selector)가 될 수 있다.
HTML 엘레멘트들은 HTML 규격을 참조하라.
색상('color') 속성은 약 50 속성들 중의 하나로 HTML 문서 표현을 결정한다. 속성들과 가능한 값들의 목록이 이 규격에 정의되어 있다.
HTML 제작자들은 그의 문서에서 특정 스타일을 제시하기를 원할 때 만 스타일쉬트를 사용할 필요가 있다. 각 사용도구는 문서의 합리적인 표현을 위한 디폴트 스타일쉬트를 가지고 있다. 그러나 제각기 다르다. 부록 A는 HTML 문서들을 표현하기 위해 제안된 [3] HTML 2.0 규격의 단순 스타일쉬트를 포함하고 있다.
공식적인 CSS1 언어의 문법은 부록 B에 정의되어 있다.
스타일쉬트가 문서의 표현에 영향을 주기 위해서는, 사용도구는 그 존재를 알아야 한다. HTML 규격은 HTML를 어떻게 스타일쉬트와 연결시키는가를 정의하고 있다. 따라서 이 항목은 정보를 제공하는 것이며, 지명적인 것은 아니다.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css"> @import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
예제는 스타일과 HTML을 결합하는 네가지 방법을 보여준다.
1. 'LINK' 엘레멘트로 외부 스타일쉬트와 연결
2. 'HEAD' 엘레멘트 안에서 'STYLE' 엘레멘트 지정
3. CSS '@import'의 기술로 스타일 쉬트 도입(import)
4. 'BODY' 안에서 엘레멘트에 'STYLE' 애트리뷰트로
마지막 선택은 스타일과 내용을 섞어 사용하여 전통적인 스타일쉬트의 해당 잇점을 감소시킨다.
'LINK' 엘레멘트는 리더가 선택할 수 있는 대체 가능한 스타일쉬트를 조회하고, 도입(import)은 스타일쉬트를 자동적으로 불러 나머지 스타일쉬트와 통합한다.
전통적으로 사용도구는 조용히 알지 못하는 태그를 무시하여 왔다. 그 결과, 옛 사용도구들은 'STYLE' 엘레멘트를 무시한다. 그러나 그 내용들이 문서 본체(body)의 부분으로 처리되어 그렇게 표현된다. 이전 단계에서는, 'STYLE' 엘레멘트 내용은 SGML 코멘트(Comment)를 사용하여 감춰질 수 있다.
<STYLE TYPE="text/css">
<!-- H1 { color: green } -->
</STYLE>
'STYLE' 엘레멘트는 문서 타입 정의(DTD)에서 "CDATA"로 정의 되므로, 규격에 맞는 SGML 처리자(parser)는 위의 스타일쉬트를 스타일쉬트로 고려하지 않고 코멘트로 해석하여 표현하지 않을 것이다.
스타일쉬트의 크기를 줄이기 위하여 선택자을 컴마로 분리하여 구룹으로 묶어 목록을 만들 수 있다.
H1, H2, H3 { font-family: helvetica }
같은 방법으로 선언도 구룹으로 묶을 수 있다.
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
추가적으로 일부 속성들은 그들 자체로 구룹으로 묶기를 할 수 있는데 문법은
H1 { font: bold 12pt/14pt helvetica }
이는 위의 예제와 같다.
첫번째 예제에서, 'H1' 엘레멘트의 색상을 청색으로 지정하였다. 'H1' 엘레멘트에 강조된 엘레멘트가 있다고 가정하면
<H1>제목 중에 <EM>이 부분이</EM> 중요하다.</H1>
만일 'EM' 엘레멘트에 색상이 지정되지 않았으면, 강조된 "이 부분이"는 모체(parent) 엘레멘트 본래의 색상을 가질 것이다. 여기서 예를 들면 역시 청색으로 나타난다. 예를 들어 'font-family'와 글꼴 크기('font-size')등 다른 스타일 속성들은 같은 방식으로 전달된다.
한 문서의 디폴트("default") 스타일 속성을 설정하려면, 모든 보이는 엘레멘트들의 속성을 설정할 수 있다. HTML 문서들에서, 'BODY' 엘레멘트는 여러가지 이런 기능을 할 수 있다.
BODY { color: black; background: url(texture.gif) white; }
제작자가 만일 'BODY' 태그를 생략하여도 HTML 표현기는 누락된 태그를 삽입하여 이것은 작용된다. 위 예제에서 텍스트의 색상을 검정으로하고 배경에 이미지를 넣었다. 이미지가 없으면 배경색은 백색으로 된다.(항목 5.3을 참조하라.)
일부 스타일 속성들은 모체(parent) 엘레멘트로 부터 하위(child) 엘레멘트로 전달되지 않는다. 대부분의 경우 그렇지 않은지는 쉽게 이해할 수 있다. 예를 들어, 배경('background') 속성은 전달되지 않으나, 모체(parent) 엘레멘트의 배경(background)은 디폴트로 전체적으로 적용된다.
자주 속성값이 백분율로 되는데, 이는 다른 속성(property)을 참조한다.
P { font-size: 10pt }
P { line-height: 120% } /* 글꼴 크기('font-size')의 상대적인 값, 여기서는 12pt */
백분율 값들을 허용하는 각 속성은, 그것이 어떤 속성을 참조하는지 정의한다. 'P'의 하위 엘레멘트들은 줄높이('line-height')의 전달된 값에서 백분율이 아니라 계산된 값이 된다(말하자면 12pt).
엘레멘트들에 대한 점진적인 제어를 향상시키기 위하여, 'CLASS'라는 새로운 애트리뷰트가 HTML에 글라스(class)로 추가 되었다. 'BODY' 엘레멘트 안의 모든 엘레멘트들은 클래스(class)화될 수 있고, 클래스(class)는 스타일쉬트에 지정될 수 있다.
<HTML>
<HEAD> <TITLE>Title</TITLE>
<STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE>
</HEAD>
<BODY>
<H1 class=pastoral>녹색을 표현하는 방법</H1>
</BODY>
</HTML>
일반적인 전달 명령(rule)들은 클래스(class)화된 엘레멘트들에 적용된다. 문서 구조안에서 모체로 부터 값이 전달된다.
모든 엘레멘트들에 같은 클래스(class)를 선택자(selector)를 생략하고 사용할 수 있다.
.pastoral { color: green } /* 모든 엘레멘트들을 CLASS pastoral로 */
선택자(selector) 마다 하나의 클래스(class) 만을 지정할 수도 있다. 'P.pastoral.marine'는 CSS1에서 개별 선택자(selector)이다. 복합 선택자(contextual selector)들은 아래 설명하는데, 단일 선택자(selector)가 하나의 클래스(class)를 갖는다.
CSS는 CLASS 애트리뷰트에 큰 능력을 제공하지 않는다, 이것은 많은 경우 어떤 HTML 엘레멘트의 클래스(class)가 설정되었는가 문제가 되지 않고 어떤 엘레멘트에도 사용될 수 있기 때문이다. 이 기능에 의존하는 것은 추천되지 않는데, 이는 HTML 엘레멘트들의 공통적인 구조의 의미를 희석시키기 때문이다. CLASS에 기초한 구조는 클래스(class)의 의미가 상호 합의된 제한된 도메인에서 만 유용하다.
HTML('id' 지정자)은 또한 전 문서를 통한 유일한 값을 보증하는 'ID' 애트리뷰트를 도입했다. 따라서 이는 스타일쉬트 선택자(selector)에서 특별히 중요한며, '#'로 시작하도록 지정한다.
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
위 예제에서, 첫번째 선택자(selector)는 'P' 엘레멘트는 'ID' 애트리뷰트 값 때문에 맞는다. 두번째 선택자(selector)에서는 엘레멘트 type ('H1')와 ID 값 두가지를 다 지정 했으므로, 'P' 엘레멘트에 맞지 않는다.
ID 애트리뷰트를 선택자(selector)로 사용함에 있어서, 스타일 속성들을 엘레멘트 단위를 기준으로 설정할 수 있다. 스타일쉬트을은 문서 구조를 위하여 설계되었기 때문에, 이 기능은 제작자들이 HTML의 구조적 엘레멘트들의 잇점을 이용하지 않고 화면에 잘 표현되는 문서를 만들도록 한다. 스타일쉬트의 이와 같은 사용은 피하는 것이 좋다.
전달은 CSS 설계자들의 입력을 절약 해 준다. 모든 스타일 속성들을 지정하는 대신, 디폴트(default)를 만들고 제외되는 목록를 만들 수 있다. 'H1' 안의 'EM' 엘레멘트들을 다른 색상으로 지정하기 위하여 다음과 같이 할 수 있다.
H1 { color: blue }
EM { color: red }
이 스타일쉬트가 작용하면'H1'의 안에 있던 밖에 있던 모든 강조 부분이 붉은색이 된다. 'H1' 안에 있는 'EM' 엘레멘트들만 붉게 하려면 다음과 같이 하면 된다.
H1 EM { color: red }
이 선택자(selector)는 이제 검색 형태를 가지고 열린 엘레멘트들을 검정한다. 이와 같은 선택자(selector)를 복합 선택자(contextual selector)라 한다. 복합 선택자들은 몇개의 단순 선택자들을 빈칸으로 구분하여 지정한 것이다(지금까지 설명한 것은 모두 단순 선택자들이었다). 마지막 단순 선택자에 맞는 엘레멘트들 만('EM' 엘레멘트) 그리고 이 검색 과정에 맞는 것 만이 표현된다. CSS1에서 복합 선택자(contextual selector)들은 원형적 관계를 검색한다. 그러나 다른 관계들(예를 들어 모체-하위)은 향 후 버전에 반영된다. 위의 예제에서, 검색 과정은 만일 'EM'이 'H1' 안에 있을 때 적용된다.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
여기에서, 첫번째 선택자(selector)가 'LI' 엘레멘트들과 맞으면 최소의 하나의 'UL' 조상을 갖는다. 두번째 예제에서 선택자는 맞으면 첫째의 하위 'LI' 엘레멘트는 최소 두개의 'UL' 조상을 갖는다. 두번째 선택자의 보다 긴 검색 구조 때문에 구체적으로 되어 이 혼동은 해결된다. 항목 3.2 카스케이딩 순서를 참조하라.
복합 선택자(contextual selector)들은 엘레멘트 타입(type)들, CLASS 애트리뷰트들, ID 애트리뷰트들 또는 이들의 조합을 검정할 수 있다.
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
첫번째 선택자(selector)는 'DIV' 조상들 중에서 모든 'P' 엘레멘트들이 맞는 것을, 두번째 선택자 클래스(class) 'reddish' 조상을 갖는 모든 'H1' 엘레멘트들이 맞는 것을, 세번째 선택자는 'ID=x78y'를 갖는 것들 중 모든 'CODE' 엘레멘트들을, 그리고 네번째 선택자는 'DIV' 조상에 클래스(class) 'sidenote'를 가진 모든 'H1' 엘레멘트들에 맞는 것이다.
여러 복합 선택자(contextual selector)들도 구룹지워 질 수 있다.
H1 B, H2 B, H1 EM, H2 EM { color: red }
이는 아래와 같은 것이다.
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
CSS 스타일쉬트에서 코멘트(Comment) 텍스트는[7] 프로그램 언어 C에서와 비슷하다.
EM { color: red } /* red, 이는 적색이다 */
코멘트(Comment)는 네스트될 수 없다. CSS1 표현기에서 코멘트(Comment)는 공간과 같다.
CSS1에서, 스타일은 일반적으로 문서 구조의 해당 위치의 엘레멘트에 추가된다. 이 단순한 모델은 다양한 스타일들에 충분하나, 일부 보편적인 효과를 해결하지 못한다. 가상 클래스(class)와 가상 엘레멘트의 개념이 CSS1에서 양식화 과정에 외부 정보를 허용하도록 확장한다.
가상 클래스(class)들과 가상 엘레멘트들이 CSS 선택자(selector)로 사용될 수 있다. 그러나 이들은 HTML 자원에는 존재하지 않는다. 오히려 이들은 어떤 경우에 스타일쉬트로 사용될 수 있도록 사용도구에 의하여 삽입된다. 이들은 "글래스"와 "엘레멘트"로 불리우는데, 이는 그들의 행동을 기술하는데 편리하기 때문이다. 더 구체적으로, 이들의 행동은 가상 태그 기능으로 정의된다.
가상 엘레멘트들은 엘레멘트들의 하위 부분을 지명하는데 사용된다. 가상 클래스(class)들에서 스타일쉬트가 다른 엘레멘트 타입(type)들을 다르게 처리하기 때문이다.
사용도구들은 일반적으로 새롭게 방문한 앤커를 과거에 방문한 것과 다르게 표현한다. CSS1에서 이것이 'A' 엘레멘트의 가상 클래스(class)를 통하여 처리된다.
A:link { color: red } /* 방문하지 않은 연결 */
A:visited { color: blue } /* 방문했던(visited) 연결 */
A:active { color: lime } /* 활성(active) 연결 */
'HREF' 애트리뷰트를 갖는 모든 'A' 엘레멘트들은 하나의, 단지 하나의, 이들 구룹으로 된다(말하자면 목표(target) 앤커들은 영향을 받지 않는다). 사용도구들은 방문했던('visited')에서 일반 연결('link')로 일정한 시간 후에 변화시키는 것을 선택할 수 있다. 활성('active') 연결은 리더에 의하여 마우스 단추 느름 등으로 현재 선택한 연결을 말한다.
앤커(anchor) 가상 클래스(class)의 양식화는 클래스(class)가 수동적으로 삽입되는 것과 같이 이루어 진다. 사용도구는 현재 표현된 문서를 앤커(anchor) 가상 클래스(class) 활동 때문에 다시 양식화할 필요는 없다. 예를 들어, 스타일쉬트는 문법에 맞게 지정할 수 있다. 활성('active') 연결의 글꼴 크기('font-size')를 방문 했던('visited') 연결보다 크게 지정할 수 있다. 그러나 사용도구는 리더가 방문했던( 'visited') 연결을 선택했을 때 탄력성있게 그 문서를 재 양식화할 필요는 없다.
가상 클래스(class) 선택자들은 일반 클래스(class)들과 맞지 않으며 그 역도 마찬가지이다. 따라서 아래 예제의 스타일 명령(rule) 아무 영향이 없다.
A:link { color: red }
<A class=link NAME=target5> ... </A>
CSS1에서 앤커(anchor) 가상 클래스(class)들은 'A' 엘레멘트 이외의 엘레멘트에는 영향이 없다. 따라서, 엘레멘트 type이 선택자에서 생략될 수 있다.
A:link { color: red }
:link { color: red }
CSS1에서 위의 두 선택자들은 같은 엘레멘트들을 선택한다.
가상 클래스(class)의 이름(name)들은 대소분자를 구별하지 않는다.
가상 클래스(class)들은 다른 복합 선택자(contextual selector)들 안에서 사용될 수 있다.
A:link IMG { border: solid blue }
또한, 가상 클래스(class)들은 일반 클래스(class)들과 조합될 수 있다.
A.external:visited { color: blue }
<A class=external HREF="http://out.side/">external link</A>
위의 예제에서 연결이 방문했던(visited) 것이면 청색으로 표현된다. 일반 클래스(class) 이름(name)들이 선택자의 가상 클래스(class)들보다 선행한다는 점에 주의하라.
일부 보통 인쇄(typographical) 효과들은 구조적 엘레멘트들과 연관되지 않고, 화면에 양식화되는 인쇄(typographical) 항목들에 연관된다. CSS1에서, 두가지 이런 인쇄(typographical) 항목들을 가상 엘레멘트들을 통하여 지정할 수 있는데, 엘레멘트의 첫 줄과 첫 글자이다.
CSS1 핵심: 사용도구들은 모든 명령(rule)들에서 선택자의 첫 줄(':first-line') 혹은 첫 글자(':first-letter')을 무시할 수 있다. 또는 이들 가상 엘레멘트들 속성들의 하위 설정 만을 지원할 수 있다(항목 7 참조).
첫줄('first-line') 가상 엘레멘트는 화면에서 첫줄에 특수한 스타일을 적용하기 위하여 사용된다.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>The first line of an
article in Newsweek.
텍스트 기준 사용도구에서 이는 다음과 같이 양식화된다.
THE FIRST LINE OF AN article in Newsweek.
위 예제의 가상 태그 기능은
<P> <P:first-line>The first line of an </P:first-line> article in Newsweek. </P>
첫줄('first-line') 종료태그는 첫줄 끝에 삽입한다.
첫줄('first-line') 가상 엘레멘트는 블럭레벨(block-level) 엘레멘트에 만 사용될 수 있다.
첫줄('first-line') 가상 엘레멘트는 인라인(inline) 엘레멘트와 비슷하다. 그러나 제한들이 있다.
첫줄('first-line') 엘레멘트에는 다음 속성들 만이 적용된다.
(5.2 글자(font) 속성들), (5.3 색상과 배경 속성들), (5.4.1 단어 간격('word-spacing')), (5.4.2 글자 간격('letter-spacing')), (5.4.3 텍스트 장식('text-decoration')),(5.4.4 수직 정렬('vertical-align') ), (5.4.5 텍스트 변환('text-transform')), (5.4.8 줄높이('line-height')), (5.5.26 'clear').
첫글자('first-letter') 가상 엘레멘트는 일반적인 인쇄(typographical) 효과를 갖는 "initial caps" 와 "drop caps"에 사용된다.
이는 유동('float') 속성이 'none'이면 인라인(inline) 엘레멘트와 유사하고, 아니면 유동(floating) 엘레멘트와 유사하다.
첫글자('first-letter') 가상 엘레멘트들에 적용되는 속성들은:
(5.2 글자(font) 속성들), (5.3 색상(color)과 배경(background) 속성), (5.4.3 텍스트 장식('text-decoration')), (유동('float')가 'none' 일 때 만, 5.4.4 수직 정렬('vertical-align')), (5.4.5 텍스트 변환('text-transform')), (5.4.8 줄높이('line-height')), (5.5.1 margin 속성들-5.5.5), (5.5.6 padding 속성들-5.5.10), (5.5.11 border 속성들-5.5.22), (5.5.25 유동('float')), (5.5.26 'clear').
이것은 드롭캡(dropcap) 최초 글자 스판(span) 두 줄을 만드는 것이다.
<HTML>
<HEAD> <TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
만일 택스트 기준 사용도구가 첫글자('first-letter') 가상 엘레멘트를 지원하면(아마 아닐 것이다), 이는 다음과 같이 양식화된다.
___ | HE FIRST few | words of an article in the Economist.
가상 태그 기능으로
<P><SPAN><P:first-letter> T </P:first-letter>he first</SPAN> few words of an article in the Economist.</P>
첫글자('first-letter') 가상 엘레멘트 택그들은 내용(말하자면 첫 글자)에 인접하고, 첫글자('first-letter') 가상 엘레멘트 시작태그는 그것이 첨부된 엘레멘트 시작태그 바로 다음에 삽입된다는 점을 주시하라.
사용도구는 어떤 글자들이 첫글자('first-letter') 엘레멘트 안에 있는가를 판정한다. 일반적으로 첫글자 앞에 따옴으로 첫글자가 포함되어야 한다.
|| /\ bird in / \ the hand /----\ is worth / \ two in the bush," says an old proverb.
문단이 다른 구둣점으로 시작되거나(예를 들어 괄호와 구둣점들) 일반적으로 글자로 간주되지 않는 다른 글자들로 시작되면(예를 들어 숫자와 수학기호들), 첫글자('first-letter') 가상 엘레멘트들은 일반적으로 무시된다.
일부 언어들에서 어떤 문자 조합을 어떻게 처리할 것인지 특정 명령(rule)들을 지정할 수 있다. 예를 들어 홀랜드어에서, 단어의 시작에서 만일 글자 조합 "ij"가 나타나면, 이들은 두 글자 모두 첫글자('first-letter') 가상 엘레멘트로 고려되어야 한다.
첫글자('first-letter') 가상 엘레멘트는 블럭레벨(block-level) 엘레멘트에 만 사용할 수 있다.
복합 선택자(contextual selector)에서, 가상 엘레멘트들은 그 선택자(selector) 맨 뒤에 만 허용된다.
BODY P:first-letter { color: purple }
가상 엘레멘트들은 선택자(selector)들 안에서 클래스(class)들과 조합할 수 있다.
P.initial:first-letter { color: red }
<P class=initial>First paragraph</A>
위 예제는 'CLASS=initial'을 갖는 모든 'P' 엘레멘트들의 첫글자를 붉은색으로 만들 것이다. 클래스(class)들 또는 가상 클래스(class)들이 조합되면, 가상 엘레멘트들은 선택자(selector) 맨 뒤에 지정되어야 한다. 선택자마다 하나의 가상 엘레멘트 만 지정할 수 있다.
복수의 가상 엘레멘트들이 조합될 수 있다.
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
이 예제에서, 각 'P' 엘레멘트의 첫글자는 녹색이며 글자 크기는 24pt이다. 나머지 첫줄은(화면에 양식화되는) 청색이고, 나머지 문단은 붉은색이 된다. 단어 "ends" 전에 줄바꿈이 발생되었다고 가정하면, 가상 택그 기능은
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
첫글자('first-letter') 엘레멘트는 첫줄('first-line') 엘레멘트 안에 있다 점에 유의하라. 첫줄('first-line')에 설정된 속성들 첫글자('first-letter')로 부터 전달된다. 그러나 같은 첫글자('first-letter') 속성이 설정되면 덮어씌우기(override)가 된다.
만일 가상 엘레멘트가 본래 엘레멘트를 붕괴되면, 필요한 추가 태그들이 가상 태그 기능에서 다시 생성되어야 한다. 예를 들어, 만일 SPAN 엘레멘트가 </P:first-line> 태그 밖으로 확장되면, 종료태그와 시작태그가 다시 생성되어야 하며 가상 태그 기능은 다음과 같이 된다.
<P><P:first-line><SPAN>This text is inside a long</SPAN></P:first-line> <SPAN>span 엘레멘트</SPAN>
CSS에서, 하나이상의 스타일쉬트가 표현에 동시에 영향을 줄 수 있다. 이는 두가지 주된 이유가 있는데 하나는 모듈화 속성이고 다른 하나는 제작자/리더 바란스이다.
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* 도입된(imported) 스타일을 덮어씌움(override) */
때로는 스타일쉬트들이 표현에 영항하는데 모순이 일어난다. 모순의 해결은 각 스타일 명령(rule)에 기초하여 우선순위(weight)를 갖는다. 디폴트로 리더의 명령(rule)들 보다 제작자 문서의 명령(rule)들이 우선 적용된다. 말하자면, 만일 들어오는 문서와 리더의 개별 스타일쉬트 간의 마찰이 생기면, 제작자의 명령(rule)들이 사용된다. 리더나 제작자 명령(rule)들이 모두 사용도구의 디폴트 값을 덮어씌운다.
도입된(imported) 스타일쉬트 또한 서로 카스케이드(cascade)된다. 도입된 순서에 따라, 카스케이드(cascade) 명령(rule)은 아래 설명한다. 스타이쉬트에 지정된 어떤 명령(rule)들은 자체가 도입된(imported) 스타일쉬트의 명령(rule)들를 덮어씌운다. 이는 도입된 스타일쉬트가 지체 스타일쉬트에 있는 명령(rule)보다 낮은 카스케이딩 순서를 갖는다는 뜻이다. 도입된 스타일쉬트는 반복적으로 도입하고 다른 스타일쉬트를 덮어씌울 수 있다.
CSS1에서, 모든 '@import' 선언은 스타일쉬트 시작부분에 나와야 하며 선언 이전에 이루어 져야한다. 이는 보기 쉽게하며, 스타일쉬트 자체의 명령(rule)들이 도입된 스타일쉬트의 명령들을 덮어씌우게 한다.
스타일쉬트 설계자는 그들 선언의 중요도를 증가시킬 수 있다.
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
위 예제에서, 첫 세가지 선언은 중요도를 증가시킨 선언들이고, 마지막 것은 보통의 중요도이다.
사용자의 중요 선언 명령(rule)은 제작자 보통 선언 명령(rule)을 덮어씌운다(override). 제작자 중요 선언 명령(rule)은 사용자의 중요 선언 명령(rule)을 덮어씌운다.
모순되는 명령(rule)들은 CSS 기능의 원칙에 따른다. 엘레멘트/속성 조합의 값을 찾기위하여 다음 순서의 기능을 따라야 한다.
LI {...} /* a=0 b=0 c=1 -> 구체화수 = 1 */
UL LI {...} /* a=0 b=0 c=2 -> 구체화수 = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> 구체화수 = 3 */
LI.red {...} /* a=0 b=1 c=1 -> 구체화수 = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> 구체화수 = 13 */
#x34y {...} /* a=1 b=0 c=0 -> 구체화수 = 100 */
가상 엘레멘트들과 가상 클래스(class)들은 각각 일반 엘레멘트들과 클래스(class)들로 합산된다.
속성값의 검색은 한 명령(rule)이 같은 엘레멘트/속성 조합에 적용되는 다른 명령들보다 높은 우선순위를 갖는 것을 만나면 종료된다.
이 원칙은 제작자의 스타일쉬트가 리더의 스타일쉬트보다 상당히 높은 우선순위를 갖게한다. 따라서 리더는 어떤 스타일쉬트의 영향을 중지시킬 수 있게하는 것이 중요하다. 예를 들어 풀다운(pull-down) 메뉴를 통하여
어떤 엘레멘트의 'STYLE' 애트리뷰트에서 선언(예제는 항목 1.1 참조)은 스타일쉬트 맨 뒤에 지정한 ID 선택자(selector)와 같은 우선순위를 갖는다.
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
위 예제에서, 'P' 엘레멘트의 색상은 붉은색일 것이다. 두 선언에서 같은 구체화수를 갖지만, 'STYLE' 애트리뷰트의 선언이 'STYLE' 엘레멘트의 선언을 덮어씌울 것이다. 이는 위의 카스케이딩 원칙 5번을 따르기 때문이다.
사용도구는 다른 스타일적 HTML 애트리뷰트들 선택할 수 있다. 예를 들어 'ALIGN'. 그런 경우, 이들 애트리뷰트들은 해당 CSS 명령(rule)들로 해석하여, 구체화수는 1이 된다. 이 명령(rule)들은 제작자 스타일쉬트의 시작부분에 있는 것으로 간주된어 후속 스타일 명령들에 의하여 덮우씌우게 된다. 과도적 단계에서 이 정책은 스타일적 애트리뷰트들을 스타일쉬트와 동시에 사용하기 쉽게 한다.
CSS1은 단순 박스형(box-oriented) 양식 모델을 가정한다. 거기서 각 양식화된 엘레멘트가 하나이상의 사각형 박스들을 만드는 것이다. 'display' 값이 'none'인 엘레멘트들은 양식화되지 않고, 따라서 박스를 만들지 않을 것이다. 모든 박스(box)들은 중심 내용 지역(area)과 주위 패딩(padding), 테두리(border)와 마진(margin) 지역을 갖는다.
_______________________________________
| |
| margin (마진: 투명) |
| _________________________________ |
| | | |
| | border (테두리) | |
| | ___________________________ | |
| | | | | |
| | | padding (패딩) | | |
| | | _____________________ | | |
| | | | | | | |
| | | | content (내용) | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| 엘레멘트 너비 |
| 박스(box) 너비 |
마진(margin), 태두리(border) 그리고 패딩(padding)의 크기(size)는 각각 (5.5.1 margin-5.5.5), (5.5.6 padding-5.5.10) 와 (5.5.11 border-5.5.22) 속성들이 설명되어 있다. 패딩(padding) 지역은 엘레멘트 자체와 같은 배경을 사용한다. (5.3.2 background 속성들-5.3.7 참조). 테두리의 색상(color)과 스타일은 테두리(border) 속성들과 함께 설정한다. 마진은 항상 투명하여, 모체 엘레멘트가 잘 표현된다.
박스의 크기는 엘레멘트(말하자면 양식화된 택스트나 이미지) 너비와 패딩, 테두리, 마진 지역들의 합산이다.
양식화 견지에서 엘레멘트들의 두가지 주된 타입(type)들이 있는데, 블럭레벨(block-level)과 인라인(inline)이다.
'display' 값이 블럭('block') 또는 목록('list-item') 인 엘레멘트들은 블럭레벨(block-level) 엘레멘트들이다. 또한, 유동('float') 값이 'none'이 아닌 다른 값을 가진 엘레멘트들인 유동(floating) 엘레멘트들도 블럭레벨(block-level) 엘레멘트들로 간주된다.
다음 예제는 2개의 하위 구조를 가진 'UL' 엘레멘트의 마진(margin)과 패딩(padding)이 어떻게 양식화되는지를 보여준다. 간단히 하기 위하여 도표는 테두리(border)들이 없다. 또한 이 예제에서 CSS1 분법에는 맞지 않으나, 스타일쉬트의 값들을 도표에 표시하도록 편이상 단일 글자 내용("constants")를 사용하였다.
<STYLE TYPE="text/css">
UL { background: red;
margin: A B C D;
padding: E F G H;
}
LI { color: white;
background: blue; /* 청색바탕에 흰색 글씨 */
margin: a b c d;
padding: e f g h;
}
</STYLE> ..
<UL>
<LI>목록의 1번 엘레멘트
<LI>목록의 2번 엘레멘트
</UL>
_______________________________________________________ | | | A UL 마진(margin: 투명) | | _______________________________________________ | | D | | B | | | E UL 패딩(padding: 적색) | | | | _______________________________________ | | | | H | | F | | | | | a LI 마진(margin: 투명, | | | | | | 적색이 비침) | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI 패딩(padding: 청색) | | | | | | | | | | | | | | | | h 목록의 1번 엘레멘트 f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________ | | | | | | | | | | | | | max(a, c) <- 최대 부분 | | | | | | _______________________________ | | | | | | | | | | | | | | d | e LI 패딩(padding: 청색) | | | | | | | | | | | | | | | | h 목록의 2번 엘레멘트 f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________ | | | | | | | | | | | | | c LI 마진(margin: 투명, | | | | | | 적색이 비침) | | | | | |_______________________________________ | | | | | | | | | G | | | |_______________________________________________ | | | | | C | |_______________________________________________________ |
전형적으로, 패딩(padding)과 마진(margin) 속성들은 전달(inherit)되지 않는다. 그러나, 예제에서 본바와 같이, 엘레멘트의 대체는 모체들과 형제들에 상대적으로 이루어 진다. 따라서 이들 엘레멘트들의 패딩(padding)과 마진(margin) 속성들이 그들의 하위 항목에서 영향을 받는다.
만일 위의 예제에 테두리(border)들이 있다면, 이 테두리들은 패딩과 마진들사이에 나타 날 것이다.
다음 도표는 유용한 용어들을 설명한다.
----------------------- <-- 맨위(top)
위쪽 마진(top margin)
-----------------------
위쪽 테두리(top border)
-----------------------
위쪽 패딩(top padding)
+-----------+ <-- 내부 맨위(inner top)
| | | | | | | |
|-왼쪽-|-왼쪽-|-왼쪽--|-- 내용 --|-오른쪽-|-오른쪽-|-오른쪽-|
| 마진 |태두리| 패딩 | | 패딩 | 태두리 | 마진 |
|-left-|-left-|-left--|- content -|-right--|-right--|-right--|
|margin|border|padding| |padding | border | margin |
| | | | | | | |
+-----------+ <-- 내부 맨아래(inner bottom)
^ ^ ^ ^
왼쪽 왼쪽 오른쪽 오른쪽
외부틀 내부틀 내부틀 외부틀
left left right right
outer inner inner outer
edge edge edge edge
아래쪽 패딩(bottom padding)
-----------------------
아래쪽 테두리(bottom border)
-----------------------
아래쪽 마진(bottom margin)
----------------------- <-- 맨아래(bottom)
왼쪽 외부틀(left outer edge)은 그의 패딩(padding), 테두리(border)와 마진(margin)을 포함한 엘레멘트의 틀이다.
왼쪽 내부틀(left inner edge)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용(content) 만의 틀이다.
맨위(top)는 패딩(padding), 테두리(border)와 마진(margin)을 포함한 그 엘레멘트의 맨 위이다.
이는 인라인(inline)이며 유동(floating) 엘레멘트들에 만 지정되며, 유동하지 않는(non-floating) 블럭레벨(block-level) 엘레멘트들에는 지정되지 않는다.
내부 맨위(inner top)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용의 맨위이다.
맨아래(bottom)는 패딩(padding), 테두리(border)와 마진(margin)을 포함한 그 엘레멘트의 맨아래이다.
이는 인라인(inline)이며 유동(floating) 엘레멘트들에 만 지정되며, 유동하지 않는(non-floating) 블럭레벨(block-level) 엘레멘트들에는 지정되지 않는다.
내부 맨아래(inner bottom)는 어느 패딩(padding), 테두리(border)와 마진(margin) 안에 있는 내용의 맨아래이다.
엘레멘트의 너비(width)는 내용(content)의 너비이며, 말하자면, 왼쪽 내부틀(left inner edge)과 오른쪽 내부틀(right inner edge)과의 거리이고, 높이(height)는 내용(content)의 높이로 내부 맨위(inner top)와 내부 맨아래(inner bottom)와의 거리이다.
유동 않는(non-floating) 블럭레벨(block-level) 엘레멘트들의 마진(margin) 너비는 주위 박스(box)의 틀(edge)들사이의 최소 거리이다. 두개 혹은 그이상의 인접한 수직 마진들은 패딩(padding), 테두리(border)가 없거나 그사이의 내용(content)이 없을 때 마진의 값을 최대로 사용하기 위하여 붕괴된다. 대부분의 경우에는, 수직 마진들이 붕괴된 후, 실제로 설계자가 기대하는 것에 가깝고 편하게 보이는 결과를 가져다 준다. 위의 예제에서, 1번 LI 엘레멘트의 아래쪽 마진('margin-bottom')과 2번 LI 엘레멘트의 위쪽 마진('margin-top')의 최대 사용으로, 두 'LI' 엘레멘트들은 붕괴된다. 같은 방식으로 만일 'UL' 과 1번 'LI' 엘레멘트(내용 "E")사이의 패딩이 0이 되면, UL 과 1번 LI 엘레멘트들의 마진들은 붕괴된다.
마진들이 음수인 경우, 음수 절대 최대 인접 마진들은 양수 절대 최대 인접 마진들로 부터 빼진다. 만일 양수 마진들이 없으면, 음수 절대 최대 인접 마진들은 0에서 빼진다.
유동 않는(non-floating) 블럭레벨(block-level) 엘레멘트의 수평 위치와 크기(size)는 7가지 속성들에 의하여 결정된다.
디폴트로, 어떤 엘레멘트의 너비('width')는 자동('auto')이다. 만일 그 엘레멘트가 대체된(replaced) 엘레멘트가 아니면, 이는 언급한 7 가지 속성들의 합산이 모체 너비과 같도록 너비('width')가 사용도구에 의해 계산된다는 의미한다. 만일 그 엘레멘트가 대체된(replaced) 엘레멘트이면, 너비 값 자동('auto')은 자동적으로 본래의(intrinsic) 그 엘레멘트의 너비로 대체된다.
7 가지 속성들 중 왼쪽 마진('margin-left'), 너비('width') 와 오른쪽 마진('margin-right') 3 가지는 자동('auto')으로 설정될 수 있다. 대체된(replaced) 엘레멘트들에서, 너비 값 'auto'는 본래의 너비로 대체되고 두가지 만 'auto' 값을 가질 수 있게 된다.
너비('width')가 음수가 아닌 경우, 엘레멘트에 따라 다르고 나아가 다른 속성들에 따라 다르지만 사용도구가 정의한 최소값이 된다. 만일 너비가 지명적으로 그렇게 지시하였거나, 자동('auto')을로 되었는데 그 명령(rule)이 너무 작게 요구하여, 그 한계 이하이면 그 대신 그 값은 최소값으로 대체된다.
만일 왼쪽 마진('margin-left'), 너비('width'), 오른쪽 마진('margin-right') 중 하나만 자동('auto')이면, 사용도구는 7 가지 합산이 모체의 너비와 같게 되도록 속성값을 지정한다.
만일, 아무 속성도 'auto'로 지정되지 않았으면, 오른쪽 마진('margin-right') 값이 'auto'가 설정된다.
만일 세개 중 한개이상이 'auto'이면, 그리고 그 중 하나가 너비('width')이면, 그러면 다른 것들은(왼쪽 마진('margin-left') 그리고/혹은 오른쪽 마진('margin-right')) 0으로 설정되고, 너비('width')는 7 가지 합산이 모체의 너비가 되도록 필요한 값을 갖게 된다.
아니면, 만일 왼쪽 마진('margin-left')와 오른쪽 마진('margin-right')가 'auto'이면, 같은 값들이 설정된다. 따라서 그의 모체 안에서 그 엘레멘트가 중앙에 위치하게 된다.
만일 'auto'가 7 가지 속성들 중 하나가 인라인(inline) 또는 유동(floating) 엘레멘트에 설정되면, 그것은 0으로 설정된 것으로 간주된다.
수직 마진(margin)들과는 달리, 수평 마진들은 붕괴되지 않는다.
'display' 속성의 목록('list-item') 값을 가진 엘레멘트들은 블럭레벨(block-level) 엘레멘트들로 양식화된다. 그러나 목록(list-item) 메이커(marker)가 먼저 나온다. 메이커(marker)의 타입(type)은 목록 스타일('list-style') 속성(property)에 의허여 결정된다. 메이커(marker)는 목록 스타일('list-style') 속성(property)값에 따라 위치한다.
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>1번 목록 1번 항목
<LI>1번 목록 2번 항목
</UL>
<UL class=COMPACT>
<LI>2번 목록 1번 항목
<LI>2번 목록 2번 항목
</UL>
위 예제는 다음과 같이 양식화된다.
* 1번 목록 1번 항목
* 1번 목록 2번 항목
* 2번 목록 1번 항목
* 2번 목록 2번 항목
오른쪽에서 왼쪽으로 쓰는 텍스트에서는, 그 메이커(marker)들은 박스의 오른쪽에 나온다.
HTML의 목록 설명을 참조하라
유동('float') 속성(property)을 사용하여, 한 엘레멘트는 엘레멘트들의 정상 유동(flow)인 외부(outside)로 선언될 수 있다. 그리고 그 것은 블럭레벨(block-level) 엘레멘트로 양식화된다. 예를 들어, 이미지(image)를 왼쪽('left')으로 유동('float') 속성을 지정하면, 그 이미지는 다른 블럭레벨(block-level) 엘레멘트의 마진(margin), 패딩(padding) 또는 테두리(border)에 도달할 때까지 왼쪽으로 이동한다. 일반적인 유동(flow)은 오른쪽에서 줄바꿈을 한다. 그 엘레멘트 지체의 margin, border 와 padding들은 그대로 표현될 것이고, 그 마진(margin)들은 인접 엘레멘트들의 마진들과 절대로 붕괴되지 않는다.
한 유동(floating) 엘레멘트는 다음의 내용에 따라 위치한다(section 4.1 블럭레벨 엘레멘트를 참조하라).
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P><IMG SRC=img.gif> 간단한 설명 택스트 ...
</BODY>
위의 예제는 다음과 같이 양식화된다.
________________________________________ | | 최대(BODY 마진(margin), P 마진) | ______________________________ | | | 간단한 설명 택스트 | B | P | IMG margins 유동(floating) 엘레멘트 | O | | _____ 설명 목적 외에는 | D | m | | | 다른 목적이 없다. | Y | a | | IMG | 유동 엘레멘트는 모체 | | r | | | 엘레멘트 쪽으로 | m | g | |_____| 마진(margin)들, | a | i | 테두리(border)들 | r | n | 그리고 패딩(padding)을 | g | | 유지하면서 이동하였다. | i | |인접 수직 마진들이 비유동(non-floating) | n | |블럭레벨(block-level) 엘레멘트들과의 | | |사이에서 어떻게 붕괴되는가를 주시하라.
'P' 엘레멘트의 마진이 유동(floating) 'IMG' 엘레멘트를 닫는다 점을 주시하라.
유동(floating) 엘레멘트들이 다른 엘레멘트들의 margin, border 그리고 padding 지역과 중복될 수 있는 2 가지 경우가 있다.
블럭레벨(block-level) 엘레멘트들로 양식화되지 않는 엘레멘트들은인라인(inline) 엘레멘트들이다. 인라인(inline) 엘레멘트는 라인 지역(space)을 다른 엘레멘트들과 공유할 수 있다. 다음 예제를 보라.
<P>몇개의 <EM>강조된</EM> 단어들이 <STRONG>나타난다</STRONG>.</P>
'P' 엘레멘트는 보통의 블럭레벨(block-level)이고, 'EM'과 'STRONG'는 인라인(inline) 엘레멘트들이다. 만일 'P' 엘레멘트가 모든 엘레멘트들을 한 줄에 양식화하기에 충분히 넓으면, 두개의 인라인(inline) 엘레멘트들이 한 줄에 오게 된다.
몇개의 강조된 단어들이 나타난다.
만일 한 줄에 한 인라인(inline) 엘레멘트의 공간이 충분하지 않으면, 몇개의 박스(box)들로 나누게 된다.
<P>몇개의 <EM>강조된 단어들이</EM> 여기에 나타난다.</P>
위 예제는 다음과 같이 양식화된다.
몇개의 강조된 단어들이 여기에 나타난다.
만일 인라인(inline) 엘레멘트가 마진(margin)들, 테두리(border)들, 패딩(padding) 또는 첨부된 텍스트 장식들을 가지면, 이들은 엘레멘트가 깨져서(broken) 아무 효과도 없을 것이다.
---------- 몇개의|강조된 ---------- ----- 단어들이| 여기에 나타난다. -----
위의 모양("figure")이 약간 찌그러 졌는데, 이는 ASCII 그래팩을 사용했기 때문이다. 항목 4.4 높이 계산 방식을 참조하라.
대체된(replaced) 엘레멘트는 하나의 그 엘레멘트가 지정하는 내용이 대체된(replaced) 엘레멘트이다. 예를 들어, HTML에서, 'IMG' 엘레멘트가 'SRC' 애트리뷰트가 지시하는 이미지로 대체된다(replaced). 대체된(replaced) 엘레멘트들은 그들 본연(intrinsic)의 규격(dimension)을 갖는다고 가정할 수 있다. 만일 너비('width') 속성값이 'auto'이면, 본연(intrinsic)의 너비를 그 엘레멘트의 너비로 사용한다. 만일 스타일쉬트에 지정한 그 값이 'auto'가 아니면, 이 값이 사용고, 그 대체된(replaced) 엘레멘트는 이에 따라 재싸이징(resize)된다. 재싸이징(resize) 방법은 메디아에 따라 다르다. 높이('height') 속성은 다음과 같은 방식으로 사용된다.
대체된(replaced) 엘레멘트들은 블럭레벨(block-level) 이나 인라인(inline)이 될 수 있다.
모든 엘레멘트들은 줄높이('line-height') 속성은 갖느데, 이는 원칙적으로, 택스트의 총 높이를 준다. 공간이 택스트의 상부와 하부에 추가되어 줄높이를 현성한다. 예를 들어, 만일 텍스트가 12pt 높이이고 줄높이('line-height')가 '14pt'로 설정되면, 줄에 2pt의 공백이 상부에 1pt, 하부에 1pt가 추가된다. 빈 엘레멘트들은 내용을 가지고 있는 엘레멘트들과 꼭 같은 계산으로 영향을 준다.
글자크기(font size)와 줄높이('line-height')의 차이는 선행(leading)이라 불리운다. 선행(leading)의 반을 선행의 반(half-leading)이라 부른다. 양식화 이후에 각 줄은 사각형 줄박스(line-box)를 형성한다.
만일 택스트를 갖는 줄에 다른 줄높이('line-height') 값이있으면(줄에 다른 인라인(inline) 엘레멘트들이 있어서), 이들 각 부분들은 각각의 선행의 반(half-leading)을 아래, 위에 갖는다. 줄박스(line-box)의 높이는 가장 높은 부분의 맨위에서 가장 낮은 부분의 맨아래까지의 거리가 된다. 맨위와 맨아래는 반드시 가장 키가 큰 엘레멘트에 상응하는 것이 아님을 주시하라. 왜냐하면 엘레멘트들은 수직정렬('vertical-align') 속성(property)으로 수직적으로 배치되기 때문이다. 문단(paragraph)을 구성하기 위하여 각 줄박스(line-box)들은 전 줄의 바로 밑에 차곡 차곡 쌓여진다.
대체 안된(non-replaced) 인라인(inline) 엘레멘트들 위와 아래 어떤 패딩(padding), 테두리(border) 또는 마진(margin)은 줄높이에 영향을 주지 않는다 점에 주의하라. 다른 말로 줄높이('line-height')가 선택된 패딩이나 테두리를 위해 너무 작으면, 이 것들은 다른 줄들의 텍스트에 넘쳐 중복(overlap)된다.
줄에 있는 대체된(replaced) 엘레멘트들(예를 들어 이미지들)은 줄박스(line-box)를 크게 만들 수 있다. 만일 대체된(replaced) 엘레멘트의 맨위(top), 이를테면, 모든 그의 패딩(padding), 태두리(border), 마진(margin)을 포함하여, 가장 키가 큰 텍스트 맨위보다 높거나, 가장 낮은 맨아래 보다 낮을 수 있기 때문이다.
보통의 경우, 전 문단에 하나의 줄높이('line-height') 값 만 가지고 있는 경우, 그리고 키 큰 이미지들이 없는 경우, 위의 정의가 그대로 적용되어 후속 줄들의 기초라인(baseline)들이 정확히 줄높이('line-height') 만큼씩 떨어지는 것이 확실하다. 이는 예를 들어 표(table)에서 텍스트의 컬럼(column)들에서 다른 글자들 정렬(align)되는데 중요하다.
이는 두 인접 라인들에 있는 텍스트들이 서로 중복되는 것을 제외하지 않는다 점에 주의하라. 줄높이('line-height')는 텍스트 높이보다 작을 수 있는데, 이런 경우 선행(leading)은 음수가 된다. 이것이 텍스트가 모두 대문자이어 기준선 밑으로 튀어나오는 것이 없음이 확실할 때 줄들이 서로 가깝게 나오게 할 때, 유용하다.
화면은 표면에 문서들이 표현되는 사용도구의 한 부분이다. 화면에 해당하는 문서의 구조적 엘레멘트는 없다. 이는 문서의 양식화에 두가지 과제를 제공한다.
첫번째 문제에 대한 합당한 대답은 최초의 화면의 너비는 윈도우 창 크기이다. 그러나 CSS1은 이 문제를 사용도구가 결정하도록 남겨두었다. 이 또한 사용도구가 창을 재싸이징(resize)할 때 화면의 너비를 변경하는 것을 기대하는 것이 합리적이다. 그러나 이 또한 CSS1 범위 밖이다.
HTML 표현(extension)들은 두번째 과제에 중점을 주었다. 'BODY' 엘레멘트에 설정하는 배경(background) 애트리뷰트들는 전체 화면에 배경을 깐다. 설계자의 기대를 지원하기 위하여, CSS1는 화면의 배경(background)을 찾기 위하여 특수 명령(rule)을 소개하였다.
만일 'HTML' 엘레멘트의 배경('background') 값이 투명('transparent')과 다르면 그것을 사용하고, 아니면 'BODY' 엘레멘트의 배경('background') 값을 사용한다. 만일 그 결과 값이 투명('transparent')이면, 표현은 정의되지 않은 것이다.
이 명령은 아래와 같은 사용을 허용한다.
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
위의 예제에서, 화면은 대리석("marble") 이미지로 배경이 된다. 'BODY' 엘레멘트의 배경색은 전체 화면을 덮을 수도 있고 그렇지 않을 수도 있지만 붉은 색이다.
화면 지정에 대한 다른 방법이 유용하게 될 때까지는, 화면 속성들을 'BODY' 엘레멘트에 설정하는 것을 추천한다.
현재의 CSS1 속성들과 그 값들은 'BR' 엘레멘트의 기능을 설명할 수 없다. HTML에서, 'BR' 엘레멘트는 단어사이에서 줄바꿈(line break)을 지정한다. 실제, 이 엘레멘트는 줄바꿈(line break)에 의해 대체된(replaced) 것이다. 향후 CSS 버전에서는 추가(added)와 대체된(replaced) 내용을 다루게 된다. 그러나 CSS1 기준 양식화에서는 'BR'를 특별히 취급하여야 한다.
스타일쉬트(style sheet)들은 스타일(style) 속성들의 값을 설정하므로서 문서들의 표현에 영향을 준다. 이 장에서는 CSS1의 스타일(style) 속성들의 정의된 목록과 그에 해당하는 가능한 값의 목록을 다룬다.
아래 텍스트는, 각 속성에 대한 허용된 값의 목록과 아래와 같이 문법을 기재하였다.
값: N | NW | NE
값: [ <길이> | thick | thin ]{1,4}
값: [<family-name>, ]* <family-name>
값: <url>? <color> [ / <color> ]?
값: <url> || <color>
각 타입(type), 키워드(keyword), 또는 괄호 안의 구룹은 다음과 같은 것들 중 하나의 수정자(modifier)가 따라 나올 수 있다.
글자(font) 속성들을 설정하는 것은 스타일쉬트 사용들 중 가장 보편적인 것이다. 불행햐게도, 잘 정의된 세계 공통적으로 수용되는 글꼴들의 분류가 없다는 것이다. 한가지 글꼴 가족(font family)에 적용되는 것이 다른것에서는 적용되지 않을 수 있다. 예를 들어 'italic'은 일반적인 기울어진 글자를 위하여 사용되나, 기울어진 글자들이 또한 Oblique, Slanted, Incline, Cursive 또는 Kursiv등으로 표시되기도 한다. 따라서 특정 글꼴(font) 선택 속성들로 특정 font를 지정하는 것이 간단치 않다.
CSS1는 그 속성들 글꼴들('font-family'), 글꼴 스타일('font-style'), 글꼴 변화('font-variant'), 글꼴 굵기('font-weight'), 글꼴 크기('font-size'), 'font'를 정의하고 있다.
글자(font) 속성들의 세계 공통적으로 수용되는 글꼴들의 분류가 없기 때문에, 글꼴(font face)들에 속성들을 맞추는(matching) 것을 주의 깊게 하여야 한다. 그 속성들은 그 마춤 과정의 결과들이 가능한 한 여러 사용도구들(같은 글꼴이 같이 표현됨을 가정하면서) 간에 일정하게 할 수 있도록 잘 정의된 순서로 맞춰줘야 한다.
(위의 기능이 CSS1 속성들의 각 글자마다 재방문을 회피하기 위하여 적정화(optimized)될 수 있다.)
위 두번째 속성 맞춤(matching) 과정은 다음과 같다.
값: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
최초값:사용도구에 따라 다름
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 값은 글꼴 가족(font family name) 그리고/또는 일반 글꼴(generic family name)의 적용 우선순위를 열거한 목록이다. 다른 CSS1 속성들과는 달리, 그 값은 컴마로 분리하고, 이는 서로 대체(alternative)한다는 것을 나타낸다.
BODY {
font-family: gill, helvetica, sans-serif
}
두가지의 타입(type)들의 목록 값들이 있다.
스타일쉬트는 설계자는 일반 글꼴(generic font family)을 마지막 대체(alternative) 글꼴로 제시하도록 추천한다.
글꼴 이름에 공백이 있으면 반드시 따옴표로 묶어야 한다.
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
만일 따옴표가 생략되면, 글꼴 이름의 앞과 뒤에나오는 공간을 무시고, 하나이상의 빈 공간은 하나의 빈 공간으로 간주된다.
값: normal | italic | oblique
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
글꼴 스타일('font-style') 속성은 글꼴(font family) 안에서 normal(때로는 "roman" 또는 "upright"로 불리운다), 'italic'과 'oblique' 중에서 선택한다.
값 'normal'은 사용도구의 글꼴 데이터베이스에서 'normal'로 분류된 글자를 선택한다. 'oblique'는 'oblique'로 라벨된 글꼴을, 'italic'은 'italic'으로 라벨된 글꼴을 찾으며 없으면 'oblique'로 라벨된 것을 찾는다.
사용도구의 글꼴 데이터베이스에서 'oblique'로 라벨된 글꼴은 실제적으로 정상 글자를 전자적으로 기우려서 생성할 수 있다.
Oblique, Slanted 또는 Incline으로 이름지워진 글꼴들는 사용도구의 글꼴 데이터베이스에서 전형적으로 'Ioblique'로 라벨된다. Italic, Cursive 또는 Kursiv로 이름 지워 진 글꼴들은 전형적으로 'italic'으로 라벨된다.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
위의 예제에서, 'H1' 안의 강조된 텍스트는 보통 글꼴로 나타 날 것이다.
값: normal | small-caps
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
글꼴 안에서 다른 변형은 small-caps이다. small-caps 글꼴에서 소문자들은 대문자 비슷하게 나타난다. 그러나 작은 글꼴 크기에서는 약간 다른 비율들을 갖는다. 글꼴 변화('font-variant') 속성은 그 글꼴를 선택한다.
'normal' 값은 small-caps 글꼴을 선택하지 않고, 'small-caps'은 small-caps 글꼴을 선택한다. small-caps가 정상 글꼴로 부터 소문자를 대문자로 비율적(scale)으로 변환하여 만드는 것을 CSS1에서 수용(acceptable)한다. 그러나 필요한 것은 아니다. 마지막으로, 대문자들이 small-caps 글꼴을 위하여 사용될 수 있다.
다음 예제는 'H3' 엘레멘트 안에 small-caps로, 강조된 글자를 기울어진 oblique small-caps로 나타난다.
H3 { font-variant: small-caps }
EM { font-style: oblique }
글꼴 안에 old-style numerals, small-caps numerals, condensed 또는 expanded letters, 등 다른 종류의 변종(variant)들이 더 있을 수 있다. CSS1에는 이들을 선택하기 위한 속성들이 없다.
CSS1 핵심: 이 속성이 텍스트를 대문자로 변환을 설명한 바와 같이, 이와 같은 텍스트 변환('text-transform')의 적용이 고려된다.
값: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
글꼴 굵기('font-weight') 속성으 글꼴의 굵기를 선택한다. '100'에서 '900'의 그 값들은 순서대로 각 수치는 굵기를 지정하는데 뒤의 것이 앞의 것보다 더 어둡다. 키워드(keyword) 'normal'은 값 '400'에 해당하며, 'bold'는 값 '700'과 같다. 키워드(keyword) 'normal'과 'bold'는 글꼴 이름들과 수치 값과 자주 혼동되므로 위의 9 단계 값의 목록으로 하였다.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
'bolder' 와 'lighter' 값은 글꼴 굵기(weight)를 모체로 부터 전달된(inherited) 값에 상대적으로 선택한다.
STRONG { font-weight: bolder }
하위(child) 엘레멘트들은 결과 굵기(weight)를 전달한다. 그러나 키워드 값을 전달하는 것은 아니다.
글꼴 데이터들은 전형적으로 하나이상의 속성들을 갖는데, 글꼴의 두께("weight")를 설명하도록 주어진 이름들의 값을 갖는다. 이들 두께(weight) 이름들은 세계 공통적으로 수용되는 것은 없다. 그 일차적인 임무는한 글꼴 안에서 다른 검은 정도로 글꼴를 구별하는 것이다. 여러 글꼴들사이에서는 대단히 변이가 많다. 예를 들어 굵은(bold) 것으로 생각되는 글꼴이, 그 디자인 안에서 그 글꼴의 보통("normal")이 얼마나 검은가에 따라, Regular, Roman, Book, Medium, Semi-, DemiBold, Bold, 또는 Black로 지정된다. 이름들의 사용에 표준이 없으므로, 이 굵기(weight) 속성값들은 CSS1에서 수치 값으로 주어졌다. 여기서 값 '400' (='normal')이 그 글꼴의 보통("normal") 글꼴에 해당하는 것이다. 이 굵기(weight) 이름은 그 글꼴에서 전형적으로 Book, Regular, Roman, Normal 또는 때로는 Medium과 같이 주어진다.
그 글꼴에서 다른 굵기들과의 연관은 그 수치 굵기(weight)의 값들의 검은 정도의 순서를 유지하는 것 만을 목표로 하였다. 그러나 다음 체계는 전형적인 경우에 어떻게 지정하는가를 보여준다.
다음 두가지 예제들은 이 과정을 설명한다. "예제1" 글꼴에서 4 가지 굵기 단계를 가정한다. 엷은 것에서 검은(어두운) 것으로의 순서는 Regular, Medium, Bold, Heavy이다. "예제2" 글꼴에서 6 가지 굵기 단계를 가정한다. 여기서는 Book, Medium, Bold, Heavy, Black, ExtraBlack 순서가 된다. 두번째 예제에서 "예제2 ExtraBlack"를 지정하지 않기로 결정하였음을 주시하라.
가능한 글꼴 |지정 | 기타 ------------------+-----+------------------- "예제1 Regular" | 400 | 100, 200, 300 "예제1 Medium" | 500 | "예제1 Bold" | 700 | 600 "예제1 Heavy" | 800 | 900 가능한 글꼴 |지정 | 기타 ------------------+-----+------------------- "예제2 Book" | 400 | 100, 200, 300 "예제2 Medium" | 500 | "예제2 Bold" | 700 | 600 "예제2 Heavy" | 800 | "예제2 Black" | 900 | "예제2 ExtraBlack"|none |
상대 키워드(keyword) 'bolder'와 'lighter'이 더 검은(darken, 어두운) 또는 더 엷은(lighten) 표면으로 그 글꼴 안에서 지정하는 것을 의도하였으므로, 또한 한 글꼴이 이 모든 굵기의 기호적 값들을 가지고 있지 않을 수 있기 때문에, 'bolder'에 마춤은 사용자에게 그 글꼴 안에서 가능한 그 다음 검은 표면을 사용하게 하였다. 그리고 'lighter'로 그 글꼴 안에서 그 다음 엷은 표면과 맞추게(matching) 하였다. 상대적(relative)인 키워드(keyword) 'bolder'와 'lighter'의 의미는 정확하게 다음과 같다.
각 글꼴 굵기('font-weight') 값이 더 검은 표면를 표현한다는 보장은 없다. 예를 들어, 일부 글꼴들은 정상(normal)과 굵은(bold) 표면 만을 갖는다. 다른 것들은 8 단계 다른 표면을 두께(weight)들은 갖는다. 사용도구가 글꼴 안에서 어떤 두께(weight) 값을 어떻게 글꼴 표면으로 표현할 것이라는 보증은 없다. 보증은 단지, 더 엷은 값들로 주어진 표면보다, 주어진 값의 표면이 덜 검지 않다는 것이다.
값: <absolute-size> | <relative-size> | <길이> | <백분율>
최초값: medium
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 모체 엘레멘트의 글꼴 크기(font size)에 대해
엘레멘트의 글꼴 크기를 계산하는데 길이와 백분율 값들은 글꼴 크기 표(table)에서 고려하지 않는다.
음수는 허용되지 않는다.
모든 다른 속성들에서, 'em' 과 'ex' 길이 값들은 현재 엘레멘트의 글꼴 크기를 참조한다. 그 글꼴 크기('font-size') 속성(property)에서, 이들 길이 단위들은 모체 엘레멘트의 글꼴 크기를 참조한다.
문장에 따라서 적용될 때 지정한 크기를 다시 해석할 수 있슴을 주지하라. 예를 들어, 비디오(VR)에서 글꼴는 틀어짐을 고려하여 다른 글꼴 크기를 가질 수 있다.
글꼴 크기의 예제
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
만일 암시된 배율(scaling factor) 1.5를 사용한다면 뒤의 3 가지는 모두 같다.
값: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: <font-size>와 <line-height>에 허용됨
글꼴('font') 속성은 같은 스타일쉬트에서 글꼴 스타일('font-style'), 글꼴 변화('font-variant'), 글꼴 굵기('font-weight'), 글꼴 크기('font-size'), 줄높이('line-height'), 글꼴들('font-family')를 설정하기 위한 약식속성이다. 이 속성의 문법은 관계된 글꼴들의 복수 속성들을 지정하는 전통적인 문구에 기초한다.
가능한 값과 최초값을 지정하기 위하여 이전에 정의된 속성들을 참조하라. 값이 주어지지 않는 속성들은 최초값으로 지정된다.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
두번째 명령(rule)에서, 글꼴 크기(font size) 백분율 값 ('80%')은 모체 엘레멘트의 글꼴 크기를 참조한다. 세번째 명령에서, 줄높이 백분율은 그 엘레멘트 자체의 글꼴 크기를 참조한다.
앞 3 개의 명령에서, 글꼴 스타일('font-style'), 글꼴 변화('font-variant')와 글꼴 굵기('font-weight')는 명시적으로 지정하지 않았다. 이는 모든 3 개의 예제에서 그들의 최초값 ('normal')이 설정되어 있다는 의미이다. 네번째 명령(rule)에서 글꼴 굵기('font-weight')가 'bold'로 설정되었는데, 그 글꼴 스타일('font-style')을 'italic'과 글꼴 변화('font-variant')를 'normal'로 명시적으로 설정하였다.
다섯번째 예제는 글꼴 변화('font-variant')를 ('small-caps')로 설정하였는데, 그 글꼴 크기('font-size')는 모체 글꼴의 120%, 줄높이('line-height')는 글꼴 크기의 120%, 그리고 글꼴들('font-family')는 'fantasy'이다. 키워드(keyword) 'normal'이 나머지 두가지 속성들, 글꼴 스타일('font-style')과 글꼴 굵기('font-weight')에 설정된다.
이들 속성들은 색상(자주 foreground color로 불리운다)과 배경(background:내용이 표현되는 표면)을 지정한다. 배경에 배경색 그리고/또는 배경 이미지를 설정할 수 있다. 또한 그 이미지의 위치, 반복, 고정되는지 굴리는지(scroll)를 그 화면에 상대적으로 설정할 수 있다.
색상('color') 속성은 일반적으로 전달(inherit)되며, 배경(background) 속성들은 전달되지 않는다. 그러나 그 모체 엘레멘트의 배경(background)은 배경색('background-color')에 최초값 투명('transparent')이 설정되어 있기 때문에 디폴트로 전체에 나타난다.
값: 색상(<color>)
최초값:사용도구에 따라 다름
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 속성은 엘레멘트의 텍스트 색상(자주 foreground color 로 불리움)을 지정한다. 여러가지로 적색을 지정할 수 있다.
EM { color: red } /* 자연 언어 */
EM { color: rgb(255,0,0) } /* RGB 범위 0-255 */
항목 6.3 가능한 색상값들을 참조하라. HTML 색상표도 참조하라.
값: <color> | transparent
최초값: transparent(투명)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트의 배경색(background color)을 지정한다.
H1 { background-color: #F00 }
값: <url> | none
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트의 배경 이미지(background image)를 설정한다. 배경 이미지가 설정되면, 그 이미지가 없을 때를 대비하여 표현될 배경색을 동시에 지정하여야 한다. 이미지가 유효하면 배경색 위에 표현된다.
BODY { background-image: url(marble.gif) }
P { background-image: none }
값: repeat | repeat-x | repeat-y | no-repeat
최초값: repeat(반복)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
만일 배경 이미지가 지정되면, 배경 반복('background-repeat')의 값은 어떻게 그 이미지를 반복할 것인가 혹은 반복하지 않을 것인가를 지정한다.
값 'repeat'는 이미지가 수평, 수직 양 방향으로 반복되는 것을 의미한다. 값 'repeat-x' ('repeat-y')는 이미지가 수평(수직) 방향으로 반복되는 것으로 이미지가 한 방향으로 띠를 형성한다. 값 'no-repeat'로는 반복 없이 한번 만 표현된다.
BODY { background: red url(pendant.gif);
background-repeat: repeat-y;
}
위의 예제에서, 이미지는 수직적으로 반복된다.
값: scroll | fixed
최초값: scroll(굴림)
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
만일 배경 이미지가 지정되면, 배경 첨부('background-attachment') 값은 지정한다. 이미지를 화면에 고정시킬 것인가 내용에 따라 굴릴(scroll) 것인가를 지정한다.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 핵심: 사용도구들은 'fixed'를 'scroll'로 처리할 수 있다. 그러나, 제작자가 'fixed' 만을 지원하는 브라우저들에게 이미지를 제공할 수 있는 방법이 없으므로, 최소한 HTML과 BODY 엘레멘트들에서 바르게 'fixed'로 처리할 것을 추천한다. (항목 7 참조.)
값: [<백분율> | <길이>]{1,2} | [top | center | bottom] || [left | center | right]
최초값: 0% 0%
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 그 엘레멘트 자체의 크기를 참조하라
만일 배경 이미지가 지정되면, 배경 위치('background-position') 값은 최초 위치를 지정한다.
값이 '0% 0%'이면, 이미지의 위 왼쪽 모퉁이가 그 엘레멘트의 내용이 들어가는 박스(box)의 위 왼쪽 모퉁이에 위치 한다 (말하자면, 그 padding, border 또는 margin에 의하여 둘려 쌓인 박스가 아님). 값 '100% 100%'는 이미지의 아래 오른쪽 모퉁이가 그 엘레멘트의 아래 오른쪽 모퉁이에 위치 시킨다. 값 '14% 84%'는 이미지의 가로 14% 아래로 84% 지점에 그 엘레멘트의 가로 14% 아래로 84% 지점을 위치시킨다.
값 '2cm 2cm'는 이미지의 왼쪽 맨 위 지점을 그 엘레멘트의 왼쪽 끝에서 오른쪽으로 2cm, 맨 위에서 아래로 2cm 지점에 위치시킨다.
만일 백분율 또는 길이 값이 하나 만 지정되면, 수평 지점 만 설정되고 수직 위치는 50%로 설정된다. 두 값이 설정될 때 수평 위치가 먼저 나온다. 예를 들어 '50% 2cm'와 같이 길이와 백분율 값의 조합도 가능하다. 위치 값의 음수도 허용된다.
배경 이미지의 위치를 지정하기 위하여 키워드(keyword) 값들을 사용할 수도 있다. 키워드는 백분율 값이나 길이 값과 조합할 수 없다. 가능한 키워드들과 그 해석은 다음과 같다.
예제:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
만일 배경 이미지가 그 화면에 대해 고정(fixed)되면(위 배경 첨부('background-attachment') 속성 참조), 그 이미지는 그 엘레멘트 대신 그 화면에 대해 위치한다. 예를 들어:
BODY { background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
위의 예제에서, 그 이미지는 그 화면의 오른쪽 맨 아래 위치한다.
값: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: <background-position>에 허용됨
그 배경('background') 속성은 개별 배경 속성들, 말하자면, 배경색('background-color'), 배경 이미지('background-image'), 배경 반복('background-repeat'), 배경 첨부('background-attachment'), 배경 위치('background-position')을 한 곳에 지정하는 약식속성이다.
이 배경('background') 속성들의 가능한 값들은 개별 속성들의 모든 가능한 값들이다.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
이 배경('background') 속성은 항상 모든 개별 배경 속성들을 설정한다. 위 예제에서 첫번째 명령(rule)은 배경색('background-color') 값 만 갖고, 다른 개별 속성들은 그들의 최초값에 의하여 설정된다. 두번째 명령(rule)에는 모든 개별 속성들이 지정되었다.
값: normal | <길이>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 길이 단위는 단어 간격의 디폴트 공간에 추가하여 단어 간격의 공간을 지정한다. 값은 음수가 될 수 있으나, 적용에 따른 범위가 있을 수 있다. 사용도구는 정확한 간격 띄우기 기능을 선택하는데 방법은 자유이다. 단어 간격은 또한 정렬에 의하여 영향 받을 수 있다. 텍스트 정렬('text-align') 속성(property)값 참조.
H1 { word-spacing: 1em }
여기서, 'H1' 엘레멘트들 안에서 단어 간격('word-spacing')은 '1em' 만큼 증가된다.
CSS1 핵심: 사용도구들은 단어 간격('word-spacing')의 어떤 값을 'normal'로 해석할 수 있다. (항목 7 참조.)
값: normal | <길이>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 길이 단위는 글자 간격의 디폴트 공간에 추가하여 글자 간격의 공간을 지정한다. 값은 음수가 될 수 있으나, 적용에 따른 범위가 있을 수 있다. 사용도구는 정확한 간격 띄우기 기능을 선택하는데 방법은 자유이다. 글자 간격은 또한 정렬('align' 속성값)에 의하여 영향 받을 수 있다.
BLOCKQUOTE { letter-spacing: 0.1em }
여기서 'BLOCKQUOTE' 엘레멘트들 안에서 각 글자의 글자 간격('letter-spacing')은 '0.1em' 만큼씩 증가된다.
값 'normal'로, 사용도구들은 글자들의 간격을 적당히 수정할 수 있다. 그러나 만일 글자 간격('letter-spacing')을 <길이> 값으로 명시하면 그렇지 않다.
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
결과적인 글자 간격이 디폴트 간격과 같지 않으면 사용도구들은 그 것을 사용하지 말아야 한다.
CSS1 핵심: 사용도구들은 글자 간격('letter-spacing')의 어떤 값을 'normal'로 해석할 수 있다. (항목 7 참조.)
값: none | [ underline || overline || line-through || blink ]
최초값: none
적용: 모든 엘레멘트들
전달: 안됨, 그러나 아래 설명을 보라
백분율 값들: 없음
이 속성은 엘레멘트의 텍스트에 추가하는 장식(decoration)을 지정한다. 만일 이 엘레멘트가 텍스트를 가지고 있지 않으면(예를 들어 HTML에서 'IMG' 엘레멘트), 또는 이 것이 빈(empty) 엘레멘트(예를 들어 '<EM></EM>')이면, 이 속성은 아무 효과도 없다. 값 'blink'는 텍스트을 깜빡(blink)거리게 한다.
텍스트 장식을 위하여 색상이 필요하면, 'color' 속성값이 되어야 한다.
이 속성은 전달(inherit)되지 않는다. 그러나 엘레멘트들은 그 모체와 일치하여야 한다. 예를 들어, 만일 엘레멘트가 밑줄그어(underlined) 졌으면, 그 줄이 하위(child) 엘레멘트들로 확장되어야 한다. 밑줄의 색상은, 엘레멘트들이 다른 색상('color') 값을 가지고 있더라도 택스트 색상과 같다.
A:link, A:visited, A:active { text-decoration: underline }
위 예제에서 'A' 엘레멘트들로서 'HREF' 애트리뷰트를 가진 모든 연결들 텍스트는 밑줄 쳐진다.
사용도구들은 키워드(keyword) 'blink'를 인식하여 하나, 깜빡이는 효과를 반드시 지원할 필요는 없다.
값: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율>
최초값: baseline
적용: 인라인(inline) 엘레멘트들
전달: 안됨
백분율 값들: 그 엘레멘트 자체의 줄높이('line-height') 참조
이 속성은 엘레멘트의 수직 위치에 영향을 준다. 키워드(keyword)가 설정되면 모체 엘레멘트에 상대적이다.
다른 일단의 속성들은 그 엘레멘트의 일 부분인 양식화(formatted) 라인에 상대적이다.
'top'과 'bottom' 정렬은 사용하는데 있어서, 엘레멘트에 관련된 루프(loop) 형성하는데서, 해결하지 못하는 상황들이 발생할 수 있다.
백분율 값들은 그 엘레멘트 자체의 줄높이('line-height') 속성값을 참조한다. 이들은 엘레멘트의 기초라인(baseline)을, 그 모체의 기초라인에서부터, 지정한 양(amount) 만큼 끌어 올린다. 기초라인(baseline)이 없으면 바닥(bottom)라인에 적용한다. 음수값이 가능하다. 예를 들어, 값 '-100%'는 그 엘레멘트의 기초라인이 다음 줄의 텍스트가 와야하는 기초라인에서 끝나도록 그 엘레멘트를 낮춘다. 이것은 기초라인을 갖고 있지 않는 엘레멘트들(글자들 위치에서 사용되는 이미지들 등)의 수직 위치에 정밀한 제어를 허용한다.
향후 CSS 버전에서는 이 속성(property)값으로 <길이>가 허용될 것으로 기대된다.
값: capitalize | uppercase | lowercase | none
최초값: none
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
실제적인 대소문자 변환은 인간언어에 따라 다르다. [4] 엘레멘트의 언어 찾기를 참조하라. HTML의 언어정보와 글자방향도 참조하라.
H1 { text-transform: uppercase }
위의 예제에서 'H1' 엘레멘트들에서 텍스트을 대문자로 변환한다.
CSS1 핵심: 영어(Latin-1) 레파토리(repertoire)의 글자들이 아닌 경우와, 엘레멘트들이 언어들에서 그 변환이 Unicode [8]의 대소문자 변환 표(case-conversion table)에 의해 지정된 것과 다른 경우에, 사용도구들은 텍스트 변환('text-transform')을 처리하지 않고 무시할 수 있다.
값: left | right | center | justify
최초값:사용도구에 따라 다름
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 속성은 엘레멘트 안에서 텍스트가 어떻게 정렬(align)할 것인가를 지정한다. 실제적인 적용 기능은 사용도구와 인간언어에 따라 다르다.
예제:
DIV.center { text-align: center }
텍스트 정렬('text-align')이 전달(inherit)되기 때문에, 'CLASS=center'를 갖고 있는 'DIV' 엘레멘트 안에 있는 모든 블럭레벨(block-level) 엘레멘트들 가운데(center) 위치한다. 정렬은 그 화면에 대한 것이 아니고, 그 엘레멘트의 너비(width)에 상대적인 것이다. 만일 'justify'가 지원되지 않으면, 사용도구는 대안을 제공할 것이다. 전형적으로 서구 언어에서 이것은 'left'가 된다.
CSS1 핵심: 그 엘레멘트의 디폴트 쓰는 방향이 왼쪽에서 오른쪽으로(left-to-right)인지 오른쪽에서 왼쪽으로(right-to-left)인지에 따라, 사용도구들은 'justify'를 'left' 또는 'right'로 취급할 수 있다.
값: <길이> | <백분율>
최초값: 0
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 모체 엘레멘트의 너비(width) 참조
이 속성은 양식화된 줄의 앞에 나타도록 들여쓰기(indent)를 지정한다. 텍스트 들여쓰기('text-indent')의 값은 음수가 될 수 있으나 적용에 따라 한계가 있을 수 있다. 들여쓰기는 HTML의 'BR'와 같은 줄바꿈과 같이 다른 것에 의하여 줄바꿈하는 엘레멘트의 중간에 삽입되는 것은 아니다.
예제:
P { text-indent: 3em }
값: normal | <수치> | <길이> | <백분율>
최초값: normal
적용: 모든 엘레멘트들
전달: 전달 됨
백분율 값들: 그 엘레멘트 자체의 글꼴 크기(font size)에 상대적이다.
이 속성은 인접한 라인들의 기초라인(baseline)들 간의 거리를 지정한다.
수치 값이 지정되면, 그 줄높이는 현재 엘레멘트의 글꼴 트기(font size) 곱하기 수치 값이 된다. 이는 백분율 값과는 전달(inherit)에서 다르다. 수치 값이 지정되면, 하위(child) 엘레멘트들은, 해당 값이 전달되는 것이 아니고, 그 자체의 배율(factor)이 전달(inherit)된다. 백분율과 다른 단위들을 참조하라.
음수는 허용되지 않는다.
아래 예제에서 이 세가지는 같은 줄높이 결과를 준다.
DIV { line-height: 1.2; font-size: 10pt } /* 수치 */
DIV { line-height: 1.2em; font-size: 10pt } /* 길이 */
DIV { line-height: 120%; font-size: 10pt } /* 백분율 */
값 'normal'은 줄높이('line-height')를 그 엘레멘트 글꼴의 합리적인 값을 설정한다. 사용도구들은 값 'normal'로 수치 범위 1.0과 1.2사이의 수치 설정을 암시한다.
어떻게 줄높이가 블럭레벨(block-level) 엘레멘트의 양식화에 영향하는가(항목 4.4)를 참조하라.
이 박스(box) 속성들은 엘레멘트들을 대표하는 박스들의 크기(size), circumference, 위치(position)를 지정한다. 양식화 모델(항목 4)에서 박스(box) 속성들의 사용 방법의 예를 참조하라.
margin 속성들은 엘레멘트의 마진을 설정한다. 다른 마진 속성들은 그 해당 면(side) 만을 설정하는데 반해, 이 'margin' 속성은 모든 4 면들을 위하여 마진(margin)들을 설정한다.
padding 속성들은 테두리(border)와 내용(content: 예를 들어, text 또는 image)사이에 얼마나 많은 공백을 삽입할 것인가를 지정한다. 다른 padding 속성들은 해당 면(side) 만을 설정하는데 반해, 패딩('padding') 속성은 모든 4 면의 padding들을 설정한다.
border 속성들은 엘레멘트의 테두리(border)들을 설저한다. 각 엘레멘트는 4개의 테두리들를 갖으며, 각 면(side)에 하나씩 갖고, 너비(width), 색상(color), 스타일(style)이 지정된다.
너비('width')와 높이('height') 속성들은 그 박스(box) 크기를 지정하며, 유동('float')과 'clear' 속성들이 엘레멘트들의 위치를 변경시킬 수 있다.
값: <길이> | <백분율> | auto
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 위쪽 마진(top margin)을 설정한다.
H1 { margin-top: 2em }
음수가 허용되나 적용에 따라 한계가 있을 수 있다.
값: <길이> | <백분율> | auto
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 오른쪽 마진을 설정한다.
H1 { margin-right: 12.3% }
음수가 허용되나 적용에 따라 한계가 있을 수 있다.
값: <길이> | <백분율> | auto
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 아래쪽 마진을 설정한다.
H1 { margin-bottom: 3px }
음수가 허용되나 적용에 따라 한계가 있을 수 있다.
값: <길이> | <백분율> | auto
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 왼쪽 마진을 설정한다.
H1 { margin-left: 2em }
음수가 허용되나 적용에 따라 한계가 있을 수 있다.
값: [ <길이> | <백분율> | auto ]{1,4}
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
'margin' 속성은 같은 스타일쉬트에서 위쪽 마진('margin-top'), 오른쪽 마진('margin-right'), 아래쪽 마진('margin-bottom'), 왼쪽 마진('margin-left')를 설정하는 약식속성이다.
만일 4 길이의 값들이 지정되면, 각 값은 top, right, bottom, left에 각각 적용된다. 하나의 값 만 지정되면 모든 면(side)들에 적용되고, 두 값이나 세 값들이 지정되면, 지정되지 않은 값은 반대편 면에서 택한다.
BODY { margin: 2em } /* 모든 마진(margin)들을 2em로 */
BODY { margin: 1em 2em } /* top & bottom=1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
위의 마지막 예제는 아래 예제와 같다.
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* 반대편(right) 면에서 복사 */
}
음수가 허용되나 적용에 따라 한계가 있을 수 있다.
값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 위쪽 패딩을 설정한다.
BLOCKQUOTE { padding-top: 0.3em }
Padding 값들은 음수가 될 수 없다.
값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 오른쪽 패딩을 설정한다.
BLOCKQUOTE { padding-right: 10px }
Padding의 음수값은 허용되지 않는다.
값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 아래쪽 패딩을 설정한다.
BLOCKQUOTE { padding-bottom: 2em }
Padding 음수값은 허용되지 않는다.
값: <길이> | <백분율>
최초값: 0
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
이 속성은 엘레멘트의 왼쪽 패딩을 설정한다.
BLOCKQUOTE { padding-left: 20% }
Padding은 음수값은 허용되지 않는다.
값: [ <길이> | <백분율> ]{1,4}
최초값: 약식속성들에서는 허용되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 가장 가까운 조상(ancestor) 블럭레벨(block-level)의 너비를 참조한다.
패딩('padding') 속성은 한 스타일쉬트에서 위쪽 패딩('padding-top'), 오른쪽 패딩('padding-right'), 아래쪽 패딩('padding-bottom'), 왼쪽 패딩('padding-left')을 지정하는 약식속성이다.
만일 4 길이의 값들이 지정되면, 각 값은 top, right, bottom, left에 각각 적용된다. 하나의 값 만 지정되면 모든 면(side)들에 적용되고, 두 값이나 세 값들이 지정되면, 지정되지 않은 값은 반대편 면에서 택한다.
padding 지역의 표면은 배경('background') 속성(property)으로 지정한다.
H1 { background: white; padding: 1em 2em; }
위 예제에서 '1em'이 수직 padding(위쪽 패딩('padding-top'), 아래쪽 패딩('padding-bottom'))에, '2em'이 수평(오른쪽 패딩('padding-right'), 왼쪽 패딩('padding-left'))에 설정된다. 'em' 단위는 엘레멘트의 글꼴 크기(font size)에 상대적이며 '1em'은 사용하고 있는 글꼴 크기와 같다.
Padding 음수값은 허용되지 않는다.
값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트 너비의 위쪽 테두리(border)를 설정한다. 너비의 키워드(keyword) 값들은 사용도구에 따라 다르나, 'thin' <= 'medium' <= 'thick' 공식이 성립된다.
이 키워드(keyword) 너비들는 한 문서 전체에 고정되어 적용된다.
H1 { border: solid thick red }
P { border: solid thick blue }
위의 예제에서, 'H1'과 'P' 엘레멘트들은 글꼴 크기에 관계없이 같은 테두리를 가질 것이다. 상대 너비들을 얻기 위해, 'em' 단위를 사용할 수 있다.
H1 { border: solid 0.5em }
Border의 너비(width)들은 음수가 될 수 없다.
값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트의 오른쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.
값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트의 아래쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.
값: thin | medium | thick | <길이>
최초값: 'medium'
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트의 왼쪽 테두리의 두께를 지정한다. 지정하지 않으면 이는 위쪽 테두리 두께('border-top-width')와 같다.
값: [thin | medium | thick | <길이>]{1,4}
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 한 스타일쉬트에서 'border-width-top', 'border-width-right', 'border-width-bottom', 'border-width-left'를 지정하는 약식속성이다.
값이 1 개 부터 4 개가 될 수 있으며 다음과 같이 적용된다.
아래 예제에서, 코멘트(Comment)는 결과적인 top, right, bottom, left 테두리들 각각의 두께를 나타낸다.
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Border의 너비(width)들은 음수가 될 수 없다.
값: <color>{1,4}
최초값: 'color' 속성(property)값
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
테두리 색상('border-color') 속성은 4 개의 테두리(border) 색상을 설정한다. 테두리 색상('border-color')은 1 개 부터 4 개사이의 값들을 가질수 있고, 그 값들은 위의 테두리 두께('border-width')에서와 같이 다른 면(side)들의 값들을 설정한다.
색상이 지정되지 않으면, 그 엘레멘트 지체의 색상('color') 속성값이 적용된다.
P { color: black;
background: white;
border: solid;
}
위 예제에서, 테두리(border)는 굵은 검정 줄이 된다.
값: none | dotted | dashed | solid | double | groove | ridge | inset | outset
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
테두리 스타일('border-style') 속성은 4 개의 테두리 스타일(border style)들를 설정한다. 값은 1 개 부터 4 개사이의 값들을 가질수 있고, 그 값들은 위의 테두리 두께('border-width')에서와 같이 다른 면(side)들의 값들을 설정한다.
#xy34 { border-style: solid dotted }
위 예제에서, 수평 테두리들은 'solid', 수직 테두리들은 점선('dotted')이 된다.
테두리 스타일의 최초값이 'none'이므로, 테두리 스타일이 설정되지 않으면 테두리가 보이지 않을 것이다.
테두리 스타일들은 다음의 의미를 갖는다.
CSS1 핵심: 사용도구들은 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset' 모두를 'solid'로 해석할 수 있다.
값: <border-top-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
엘레멘트의 위쪽 테두리(top border)의 width, style, color을 설정하는 약식속성이다.
H1 { border-bottom: thick solid red }
위의 예제는 H1 엘레멘트 아래 테두리의 width, style, color를 설정한다. 생략된 값들은 그들의 최초값들로 설정된다.
H1 { border-bottom: thick solid }
위의 예제에서 색상 값이 생략되었으므로, 그 border color은 그 엘레멘트 자체의 색상('color') 값과 같다.
테두리 스타일('border-style') 속성은 4 개까지의 값들을 받을 수 있는데 반해, 이 속성은 하나의 값 만을 받을 수 있슴을 저시하라.
값: <border-right-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
엘레멘트의 오른쪽 테두리(righ border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.
값: <border-bottom-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
엘레멘트의 아래쪽 테두리(bottom border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.
값: <border-left-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
엘레멘트의 왼쪽 테두리(left border)의 width, style, color을 설정하는 약식속성이다. 지정하지 않으면 위쪽 테두리('border-top')와 같다.
값: <border-width> || <border-style> || <color>
최초값: 약식속성들에는 정의되지 않음
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
테두리('border') 속성은 엘레멘트 모든 4 개의 테두리의 같은 width, color, style를 설정하기 위한 단축 속성이다. 예를 들어, 첫번째 명령(rule)은 그 다음 4 개에서 각각 설정한 것과 같다.
P { border: solid red }
P { border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
마진('margin'), 패딩('padding') 약식속성들과는 달리, 테두리('border') 속성은 4 개의 테두리를 다른 값들로 설정할 수 없다. 이를 위해 하나이상의 다른 border 속성들을 사용하여야 한다.
이속성들이 기능적으로 일부 중복을 하므로 이들을 지정하는 순서가 중요하게 된다. 예제를 보면:
BLOCKQUOTE {
border-color: red;
border-left: double color: black;
}
위 예제에서, 왼쪽 테두리의 색상은 검정(black)이 될 것이고, 다른 테두리들은 적색(red)이 된다. 이는 왼쪽 테두리('border-left')에 width, style, color가 설정 되었기 때문이다. 왼쪽 테두리('border-left') 속성(property)에 색상이 설정되지 않았으므로, 이는 'color' 속성(property)에서 값을 받을 것이다. 실제로 'color' 속성이 나중에 설정 되었으므로, 왼쪽 테두리('border-left') 속성이 적용되지 않는다.
테두리 두께('border-width') 속성은 4 개 길이의 값들을 지정할 수 있지만, 이 속성은 하나 만 받을 수 있슴을 주시하라.
값: <길이> | <백분율> | auto
최초값: auto
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 모체 엘레멘트의 너비(width) 참조
이 속성은 text 엘레멘트들에 적용될 수 있으나, 이미지(image)들과 같은 대체된(replaced) 엘레멘트들에 가장 유용하게 사용된다. 너비(width)는 필요할 때, 배율(scale)을 조절하여 보완할 수 있다. 배율을 조절할 때, 이미지의 변경 비율(ratio)은 높이('height') 속성이 'auto'이면 그대로 유지된다.
예제:
IMG.icon { width: 100px }
만일 대체된(replaced) 엘레멘트 너비('width')와 높이('height')가 둘 다 'auto'이면, 이들 속성들 그 엘레멘트의 규격을 그 대로 설정한다.
음수는 허용되지 않는다.
이 속성과 마진(margin), 패딩(padding)의 관계를 위하여 양식화 모델(항목 4)을 참조하라.
값: <길이> | auto
최초값: auto
적용: 블럭레벨(block-level)과 대체된(replaced) 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 text 엘레멘트들에 적용될 수 있으나, 이미지(image)들과 같은 대체된(replaced) 엘레멘트들에 가장 유용하게 사용된다. 높이(height)는 필요할 때, 배율(scale)을 조절하여 보완할 수 있다. 배율을 조절할 때, 이미지의 변경 비율(ratio)은 너비('width') 속성이 'auto'이면 그대로 유지된다.
예제:
IMG.icon { height: 100px }
만일 대체된(replaced) 엘레멘트 너비('width')와 높이('height')가 둘 다 'auto'이면, 이들 속성들 그 엘레멘트의 규격을 그 대로 설정한다.
텍스트 엘레멘트에 적용되면, 높이(height)는 예를 들어 화면 굴리기(scrollbar)등으로 보완될 수 있다.
음수는 허용되지 않는다.
CSS1 핵심: 사용도구들은, 그 엘레멘트가 대체된(replaced) 엘레멘트가 아니면, 높이('height') 속성을 무시('auto' 처리)할 수도 있다.
값: left | right | none
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
값 'none'로, 그 엘레멘트는 그 텍스트(text) 안에서 나타 날 곳에 표현(display)된다. 값 'left' ('right')로 그 엘레멘트는 left (right)으로 이동하여, 그 텍스트(text)는 그 엘레멘트의 right (left) 면(side)에 줄바꿈(wrap)한다. 값 'left' 또는 'right'로, 그 엘레멘트는 블럭레벨(block-level)로 처리된다('display' 속성이 무시된다). 항목 4.1.4의 설명을 참조하라.
IMG.icon { float: left; margin-left: 0; }
위 예제는 'CLASS=icon'를 갖는 모든 IMG 엘레멘트들은 그 모체 엘레멘트의 왼쪽(left )을 따라 위치시킨다.
이 속성은 인라인(inline) 이미지들에서 가장 자주 사용되나, 텍스트(text) 엘레멘트들에도 적용된다.
값: none | left | right | both
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트를 유동(floating) 엘레멘트들의 옆면(side)들에 허용할 것인가를 지정한다. 더 구체적으로, 이 속성값은 유동(floating) 엘레멘트들이 허용되지 않는 면(side)들의 목록(list)이다. 'clear'가 'left'를 설정하면, 엘레멘트는 어떤 유동(floating) 엘레멘트 밑의 왼쪽으로 이동한다. 'clear'가 'none'으로 설정되면, 유동(floating) 엘레멘트들은 모든 면(side)들에 허용된다. 예제를 보면:
H1 { clear: left }
이들 속성들은 엘레멘트들을 특정 보이는 파라메터(parameter)들를 설정하는 것에 추가하여 카테고리들(categories)로 분류한다.
이 목록 스타일(list-style) 속성들은 어떻게 목록 항목들(목록 항목('list-item')의 'display' 값을 갖는 엘레멘트들)을 기술하는가를 양식화한다. 이 목록 스타일(list-style) 속성들은 어떤 엘레멘트에도 설정될 수 있고, 이는 일반적으로 계통도(tree) 하부로 전달(inherit)된다. 그러나, 이들은 목록 항목('list-item')의 값이 'display' 일 때 만 엘레멘트들에 효과를 줄 것이다. HTML에서 이는 전형적으로 'LI' 엘레멘트의 경우이다.
값: block | inline | list-item | none
최초값: block
적용: 모든 엘레멘트들
전달: 안됨
백분율 값들: 없음
이 속성은 엘레멘트가 화면에 표현(display)될 것인가, 그렇다면 어떻게 디스플레이될 것인가를 기술한다. 이는 인쇄에서나 컴퓨터 화면등이 될 수 있다.
엘레멘트가 'display' 값 'block'을 가지면 새로운 박스(box)를 연다. 그 박스는 CSS 양식화 모델에 따라 인접 박스들에 상대적으로 위치한다. 전형적으로, 'H1'와 'P'와 같은 엘레멘트들은 블럭('block') 타입니다. 값 목록 항목('list-item')은 목록(list-item) 메이커(marker)가 추가된다는 것 이외에는 블럭('block')과 유사하다. HTML에서, 'LI'는 전형적으로 이 값을 갖는다.
엘레멘트의 'display' 값 'inline'은 이전의 내용(content)이 있는 것과 같은 줄에 새로운 인라인(inline) 박스(box)를 생성한다. 이 박스(box)는 양식화(formatted)된 내용의 크기에 따라 크기(dimension)가 결정된다. 만일 내용이 텍스트이면, 이는 여러 줄들에 확장(span)할 수 있으며, 또한 그들은 각 줄에 하나의 박스가 있는 것이다. 마진(margin), 테두리(border), 패딩(padding) 속성들은 '인라인(inline)' 엘레멘트들에 적용되나, 줄바꿈들에서는 아무 효과도 없다.
값 'none'은 엘레멘트의 하위(child) 엘레멘트들과 주위 박스(box)을 포함하여 디스플레이를 중지시킨다.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
마지막 명령(rule)은 이미지들의 디스플레이를 중지시킨다.
'display'의 최초값은 'block'이지만, 사용도구는 모든 HTML 엘레멘트들을 위하여, HTML 규격에서 엘레멘트들의 표현을 위하여 제시된 바에 따라, 전형적인 디폴트 값들 가진다.
CSS1 핵심: 사용도구들은 'display'를 무시하고, 사용도구의 디폴트(default) 값들 만을 사용할 수 있다.(항목 7를 참조하라.)
값: normal | pre | nowrap
최초값: normal
적용: 블럭레벨(block-level) 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 속성은 엘레멘트 안에서 어떻게 공간(whitespace)을 처리할 것인가를 기술한다. 방법은 'normal' (공간이 붕괴 됨), 'pre' (HTML의 'PRE' 엘레멘트처럼 작용) 또는 'nowrap'(BR 엘레멘트들가 있을 때만 줄바꿈 함)이 있다.
PRE { white-space: pre }
P { white-space: normal }
공백('white-space')의 최초값이 'normal'이지만, 사용도구는 모든 HTML 엘레멘트들을 위하여, HTML 규격에서 엘레멘트들의 표현을 위하여 제시된 바에 따라, 전형적인 디폴트 값들을 갖는다.
CSS1 핵심: 사용도구들은 제작자와 리더의 스타일쉬트에서 공백('white-space') 속성 무시하고, 사용도구의 디폴트(default) 값들 만을 사용할 수 있다.(항목 7를 참조하라.)
값: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
최초값: disc
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 속성은 목록(list-item) 메이커(marker)의 모양을 결정하는데, 목록 스타일 이미지('list-style-image')가 'none'이거나, URL에 의하여 지정되는 이미지가 표현될 수 없를 때 사용된다.
OL { list-style-type: decimal } /* 1 2 3 4 5 ... */
OL { list-style-type: lower-alpha } /* a b c d e ... */
OL { list-style-type: lower-roman } /* i ii iii iv v ... */
값: <url> | none
최초값: none
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
이 속성은 목록(list-item) 메이커(marker)에 사용될 이미지를 설정한다. 이미지가 유효하면 이 이미지는 목록 스타일 타입('list-style-type') 메이커(marker)가 설정한 것을 대체한다.
UL { list-style-image: url(http://png.com/ellipse.png) }
값: inside | outside
최초값: outside
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
목록 스타일 위치('list-style-position') 값은 목록(list-item) 메이커(marker)가 내용에 대하여 어떻게 그려 지는가를 결정한다. 양식화(formatting) 예제는 목록 엘레멘트(항목 4.1.3)를 참조하라.
값: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
최초값: 약식속성들에는 정의되지 않음
적용: 목록('list-item') 값 'display'를 갖는 엘레멘트들
전달: 전달 됨
백분율 값들: 없음
목록 스타일('list-style') 속성은 목록 스타일 타입('list-style-type'), 목록 스타일 이미지('list-style-image'), 목록 스타일 위치('list-style-position') 세가지 속성을 한 스타일쉬트에서 지정하는약식속성이다.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
'LI' 엘레멘트들에 직접 목록 스타일('list-style')를 설정하는 것은 기대하지 않은 결과를 초래할 수 있다. 예제를 보라:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL class=alpha>
<LI>수준 1
<UL>
<LI>수준 2
</UL>
</OL>
</BODY>
위의 예제에서 스타일쉬트 안의 첫번째 명령(rule)이 높은 우선순위(카스케이딩 순서에 정의된 것과 같이)를 갖기 때문에, 이는 모든 'LI' 엘레멘트들의 두번째 명령(rule)을 덮어씌울(override) 것이며, 'lower-alpha' 목록 스타일 만이 사용될 것니다. 따라서 목록 스타일('list-style')는 목록 타입(list type) 엘레멘트들에 만 지정할 것을 추천한다.
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
위 예제에서, 목록 스타일('list-style') 값들은 'OL' 과 'UL' 엘레멘트들로 부터 'LI' 엘레멘트들로 전달된다.
URL 값은 다른 어떤 값의 조합될 수 있다.
UL { list-style: url(http://png.com/ellipse.png) disc }
위의 예제에서, 이미지가 우효하지 않으면 'disc'가 사용된다.
길이 값의 양식은 선택적 부호('+' 또는 '-', 디폴트는 '+')와 그 뒤 바로 따라오는 수치(소수점이 있거나 없거나) 그리고 그 바로 뒤에 두 글자로 간단히 된 단위 인식자(identifier)로 된다. 수치 0 뒤의 단위 지정자는 선택적이다.
일부 속성들은 음수의 길이 단위들을 허용하나, 이는 양식화 모델을 복잡하게 하고 적용에 따라 한계가 있을 수 있다. 만일 음수 길이 값이 지원되지 않으면, 지원되는 값 중에서 가장 가까운 값으로 대체된다.
길이의 단위들에는 상대적(relative)인 것과 절대적(absolute)인 것 두가지가 있다. 상대적인 단위들은 다른 길이 속성(property)에 상대적으로 나타낸다. 상대적인 단위들을 사용하는 스타일쉬트들은 한 메디아에서 다른 메디아로(예를 들어 컴퓨터 화면에서 레이저 프린터로) 스테일(scale)하는 것이 보다 용이하다. 아래 설명하는 백분율 단위(percentage unit)들과 키워드(keyword) 값(예를 들어 'x-large')들은 이와 비슷한 잇점들이 있다.
아래와 같은 상대(relative) 단위들이 지원된다.
H1 { margin: 0.5em } /* em, 엘레멘트의 글꼴(font) 높이 */
H1 { margin: 1ex } /* x-height, 글자 'x'의 높이 */
P { font-size: 12px } /* pixels, 화면에 상대적으로 */
상대적인 단위 'em'과 'ex'는 그 엘레멘트 자체의 글꼴 크기(font size)에 상대적이다. CSS1에서 한가지 예외는 글꼴 크기('font-size') 속성인데, 여기서는 'em'과 'ex' 값은 모체 엘레멘트의 글꼴 크기(font size)를 참조한다.
예제의 마지막 줄에서 사용된 픽셀(pixel) 단위는, 그 화면의 해상도(resolution), 말하자면 대부분의 경우 컴퓨터 디스플레이에 상대적이다. 만일 출력 장티의 픽셀(pixel) 밀도(density)가 일반적인 컴퓨터 디스플레이에서와 다르면, 사용도구는 픽셀(pixel) 값들을 재 스케일(rescale)하여야 한다. 암시된 참조 픽셀(pixel)은 픽셀 밀도 90dpi(dots per inch) 장치에서 리더가 한 팔 거리에서 한개의 픽셀의 볼 수 있는 시각의 각도이다. 일반적인 한 팔 거리는 28인치이고 보는 각도는 약 0.0227도이다.
하위(Child) 엘레멘트들에는 상대값이 아닌 계산된 값이 전달(inherit)된다.
BODY { font-size: 12pt; text-indent: 3em; /* 말하자면 36pt */ }
H1 { font-size: 15pt }
위의 예제에서, 'H1' 엘레멘트들의 텍스트 들여쓰기('text-indent') 값은 45pt가 아니라 36pt이다.
절대(Absolute) 길이 단위들은 출력 장치의 물리적 속성들이 알려졌을 때에 만 유용하다. 이들 절대(absolute) 단위들은 아래와 같이 지원된다.
H1 { margin: 0.5in } /* 인치(inche), 1in = 2.54cm */
H2 { line-height: 3cm } /* cm, centimeter */
H3 { word-spacing: 4mm } /* mm, millimeters */
H4 { font-size: 12pt } /* 포인트(point), 1pt = 1/72 in */
H4 { font-size: 1pc } /* 피카(pica), 1pc = 12pt */
특정 길이가 지원되지 않으면, 사용도구들은 대략적으로 시도하여야 한다. 모든 CSS1 속성들에서, 추가적인 계산과 전달은 이 대략적인 값을 기준으로 하여야 한다.
백분율 값의 양식은 선택적 기호('+' 또는 '-', 디폴트는 '+')와 그 뒤에 바로 따라오는 수치(소수점 있거나 없거나) 그리고 바로 뒤에 '%'로 된다.
백분율 값들은 항상, 예를 들어 길이 단위등, 다른 값에 대해 상대적이다. 백분율 단위(percentage unit)들이 허용되는 각 속성은 그 백분율 값이 무엇을 참조하는가가 정의되어 있다. 그 엘레멘트 자체의 글꼴 크기(font size)를 참조하는 경우가 가장 많다.
P { line-height: 120% } /* 엘레멘트의 글꼴 크기('font-size')의 120% */
모든 전달(inherit)된 CSS1 속성들이 백분율 값을 가지면, 하위(Child) 엘레멘트들에는 그 백분율 값이 아닌 계산된 값이 전달(inherit)된다.
색상(color)은 키워드(keyword) 또는 수치적 RGB 규격이다.
암시된 색상 이름들의 키워드(keyword) 목록은 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow등이다. 이들 16 색상(color)들은 윈도우즈(Windows) VGA palette로부터 온 것이고, 그 들 RGB 값들은 이 규격에 정의되어 있지 않다.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
RGB 색상 모델은 수치 색상 규격으로 사용된다. 아래 예제에서 모두 같은 색상을 나타낸다.
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* 정수 범위: 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* 유동(float) 범위: 0.0% - 100.0% */
RGB 값의 양식은 '#'로 시작하는 16 진수(hexadecimal) 표현이다. '#' 다음에 바로 3 자 혹은 6 자 16진수 글자(0,1,2,3...,a,b,c,d,e,f)들이 나온다. 3 자 RGB 표현(#rgb)은 각 글자를 복사하여(0을 더하는 것이 아니고) 6 자 (#rrggbb) 양식을 만든다. 예를 들어, #fb0는 #ffbb00로 된다. 이 것으로 흰색(#ffffff)을 약식(#fff)으로, 색상 깊이 등 부속 변화를 생략하고, 확실히 표현할 수 있다.
RGB 값은 기능적 표현 양식으로 기술할 수 있는데, 'rgb(' 다음에 컴마(,)로 분리한 세가지 색상 값을 목록화 하고 ')'로 닫는다. 여기서 세가지 색상의 각 색상 값은 정수 0-255 범위의 수치, 또는 0.0%에서 100.0%까지 범위의 세개의 백분율 값들이 된다. 수치 앞과 뒤에 공백(whitespace)이 허용된다.
수치 범위 밖의 수치 값들은 잘려진다. 아래 예제에서 세가지는 모두 같다.
EM { color: rgb(255,0,0) } /* 정수 범위: 0 - 255 */
EM { color: rgb(300,0,0) } /* 255로 잘림 */
EM { color: rgb(110%, 0%, 0%) } /* 100%로 잘림 */
RGB 색상(color)들은 [9] sRGB color space에 정의되어 있다. 사용도구들은 색상들을 표현하는 주파수(fidelity)가 서로 다를 수 있으나, sRGB 사용은 모호하지 않고, 어떤 색상이 되어야 한다는 것이 확실히 양적으로 국제적인 규격들[10]에 정의되어 있다.
사용도구들은 색상들을 디스플레이 하는데 색상 보정(gamma-correction) 수행을 위한 그들의 노력을 생략할 수 있다. sRGB는 지정된 보이는 상황에서 디스플레이 감마(gamma)를 2.2로 정의하고 있다. 사용도구들은 CSS에서 주어진 색상들을 출력 장치의 자연("natural") 디스플레이 감마(gamma)와 조합하여, 실효 디스플레이 감마(gamma)가 2.2가 되도록 보정(부록 D)한다. CSS에서 정의한 색상들 에서 만 영향을 받는다는 점을 주시하라. 예를 들어 이미지들은 그들 자신의 색상 정보를 표현할 것으로 기대된다.
URL(Uniform Resource Locator:공통 자원 지정자)는 기능적 표현으로 지정한다.
BODY { background: url(http://www.bg.com/pinkish.gif) }
URL 값은 'url('로 시작하고 바로 뒤에 선택적 공백, 그 다음 선택적 단일 따옴(') 또는 이중 따옴("), 그 다음에 ([11] URL 자체에서 정의된 것과 같이)가 나온다. 그리고 다시 선택적 단일 따옴(') 또는 이중 따옴("), 그 다음 선택적 공백, 그리고 ')'로 닫는다. 따옴표는 URL 자체의 부분은 아니며 반드시 짝을 맞춰야 한다.
URL 안의 괄호, 컴마, 공백, 단일 따옴('), 이중 따옴(")들은 역슬래쉬(\)를 사용하여 '\(', '\)', '\,' 등으로 에스케이프(escape)되어야 한다.
부분적 URL들은, 그 문서에 상대적이 아니라, 스타일쉬트 자원(source)에 상대적으로 해석된다.
BODY { background: url(yellow) }
HTML의 URI 설명을 참조하라.
문서들을 표현하는 CSS1를 사용하는 사용도구는 다음 경우 CSS1 규격에 부합한다.
CSS1 스타일쉬트 출력 사용도구가 CSS1 규격에 부합하려면
문서들을 디스플레이 하는데 CSS1를 사용하는, 그리고, CSS1 스타일쉬트를 출력(output)하는, 두가지 부합 필요 조건을 충족시키는 사용도구는 CSS1 규격에 부합하는 것이다.
사용도구는 CSS1의 모든 기능들을 적용해야 하는 것은 아니다. 핵심 기능들을 적용하면 CSS1에 부합하는 것이 될 수 있다. 제외된 부분이라는 명시된 것을 제외하고, 핵심(core) 기능(functionality)이 CSS1 규격의 전체를 구성한다. 이 규격에서는 "CSS1 핵심:"이라고 표시하고, 그 뒤에 어떤 기능이 핵심 기능 밖에 있는가의 설명이 따른다. 핵심 기능 밖의 것들을 CSS1 발전된 기능이라 한다.
이 항목에서는 단지 CSS1 부합성을 정의한다. 향 후 CSS 수준에서 부합하기 위하여 사용도구는 다른 기능들의 수행이 필요하게 된다.
메디아의 표현에서 제한적인 예제들은, 제한된 자원들(fonts, color)과 제한된 해상도(resolution), 따라서 테두리(margin)들이 정확하지 않은 것 등이다. 이런 경우 사용도구는 스타일쉬트 값들의 대략을 사용하여야 한다. 또한, 다른 사용자 인터페이스(interface) 기준에서 그 들 자신의 제한을 가질 수 있는데 예를 들어 비디오(VR) 브라우저에서 사용자와의 "거리"에 따라 스케일을 다시(rescale)할 수 있다.
사용도구들은 리더(for reader)에게 표현의 추가적인 선택을 제공할 수 있다. 예를 들어, 사용도구가 리더에게 시각 장애자 선택 또는 깜빡거림(blink) 중지 선택을 줄 수 있다.
CSS1은 양식화의 모든 견지들을 정의하지 않는다는 점을 주시하라. 예를 들어, 사용도구는 글자 간격(letter-spacing)이 기능 방법(algorithm) 선택은 자유이다.
이 규격은 사용도구에, 요구하지 않으나, 추천하는 것들이 있다.
위의 부합성 설명은. 사용자에게 표현(user interface)되는 것이 아니고. 그 기능적 면 만을 설명한 것이다.
이 규격은 CSS 수준(level) 1을 정의한다. 추가적인 기능들를 갖는 CSS의 높은 수준이 기대되며 이는 향후 정의될 것이다. 사용도구들이 단순히 CSS1를 지원하지 않고, 향 후 더 높은 수준의 스타일쉬트를 읽을 수 있도록 지원을 확실히 하기 위하여, 이 항목은 사용도구가 CSS1에서 유효하지 않은 구조를 만나면, 어떻게 하여야 하는가를 정의한다.
H1 { color: red; rotation: 70deg }
사용도구는 이를 아래와 같은 스타일쉬트로 처리한다.
H1 { color: red; }
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top"은 유동('float')의 값이 아님 */
IMG { background: "red" } /* CSS1의 키워드(keyword)에는 따옴표가 없음 */
IMG { border-width: 3 } /* 단위는 길이의 값으로 지정하여야 함 */
위 예제에서, CSS1 처리자(parser)는 첫 명령(rule) 만 인정하고 나머지는 무시 하여 다음과 같아 질 것이다.
IMG { float: left }
IMG { }
IMG { }
IMG { }
향 후 CSS 규격에 부합하는 사용도구는 하나이상의 다른 규칙도 받아 드릴 수 있어야 한다.
@three-dee {
@background-lighting { azimuth: 30deg; elevation: 190deg; }
H1 { color: red }
}
H1 {color: blue}
CSS1에서 '@three-dee'는 무효 코드이다. 따라서 모든 at-rule( 세번째 '}'를 포함하여 그 것까지) 무시된다. CSS1 사용도구는 건너 띄워, 스타일쉬트를 효과적으로 아래와 같이 줄인다.
H1 {color: blue}
더 자세히 설명하면:
CSS 각 버전의 CSS 스타일쉬트는 statements의 목록으로 구성되어 있다. 두종류의 statements가 있는데, at-rules과 rulesets이다. statements의 앞과 뒤에 공백(space, tab, newline)이 있어도 된다.
CSS 스타일쉬트는 자주 HTML 문서들에 깔리며(embed), 옛날(older) 사용도구들에서는 스타일쉬트를 감출 수 있는데, 이는 스타일쉬트를 HTML 코멘트(Comment) 안에 넣는데 편리하다. HTML 코멘트(Comment)의 "<!--"와 "-->"가 statements의 앞, 뒤, 그리고 그 안에 나올 수 있고, 그 주위에 공백이 올 수 있다.
At-rules은 at-keyword로 시작되며, 그 인식자(identifier)의 시작을 알리는 '@'을 사용한다(예: '@import', '@page'). 인식자(identifier)는 글자, 수치, 대쉬(-)와 에스케입된(escaped) 글자들로 구성된다(아래 정의).
at-rule은 다음에 나오는 쎄미콜론(;) 또는 블럭(block: 곧 설명 함) 중 먼저 나오는 것까지, 그리고 그것을 포함하여, 모든 것으로 구성된다. CSS1 사용도구는, '@import' 이외의 다른 at-keyword로 시작되는 at-rule을 만나면, at-rule과 그 다음의 계속적인 처리(parsing)을 전부 무시한다. 만일 이것이 스타일쉬트의 맨 위에 나오지 않으면, 말하자면 어떤 명령(rule) 다음에 나온다면 그것이 유효하지 않더라도, '@import'로 시작되는 at-rule도 무시한다. 여기 예제가 있다.
CSS1 처리자(parser)가 아래 스타일쉬트를 만났다면:
@import "subs.css";
H1 { color: blue }
@import "list.css";
두번째 '@import'는 CSS1에서 유효하지 않다. CSS1 처리자(parser)는 전체 at-rule을 무시하고, 효과적으로 아래와 같이 간단히 한다.
@import "subs.css";
H1 {color: blue}
한 블럭(block)은 '{'로시작되고 '}'로 끝난다. 그 사이에, 항상 짝이 맞아야 하고 네스트(nest)될 수 있는 괄호들'(), [], {}'들은 제외하고, 글자들이 나올 수 있다. 단일 따옴표(')와 이중 따옴표(") 도 짝을 맞추어 나오고, 그 사이의 글자들은 문자열(string)로 처리(parse)된다. 부록 B 문자열 정의 토큰(token)을 참조하라. 여기 블럭(block)의 예제가 있다. 따옴표 속의 오른쪽 '}'는 블럭(block) 시작 '{'와 짝이 맞지 않고, 두번째 단일 따옴표는 에스케입(escape)된 글자이며, 따라서 열린 따옴표와 짝이 맞지 않음을 주시하라.
{ causta: "}" + ({7} * '\'') }
ruleset는 selector-string와 그 뒤에 declaration-block으로 구성된다. selector-string는 처음 '{'까지, 그 '{'를 포함하지 않는, 모든 것으로 구성된다. selector-string으로 시작하는 ruleset는 무효 CSS1는 건너 뛴다.
CSS1 처리자(parser)가 다음 예제의 스타일쉬트를 만났다면
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
두번째 줄은 CSS1에서 무효인 selector-string를 만났다. CSS1 사용도구는 이 ruleset를 건너 뛰어, 다음과 같이 된다.
H1 { color: blue }
P EM { font-weight: bold }
선언블럭(declaration-block)은 '{'로 시작하고 짝 맞는 '}'로 끝난다. 그 사이에 하나도 없거나 여러개의 선언(declaration)들이 쎄미콜론(;)으로 분리되어 위치한다.
선언(declaration)은 속성(property), 콜론(:) 그리고 값(value)으로 구성된다. 그 앞, 뒤에 공간(whitespace)이 들어 갈 수 있다. 속성은 앞에서 정의한 바와 같은 인식자(identifier)이다. 값에는 어떤 글자도 올 수 있는데 괄호들'(), [], {}'과 단일 따옴표(')와 이중 따옴표(") 도 짝을 맞추어 사용하여야 한다. 괄호들'(), [], {}'은 네스트(nest)될 수 있다. 따옴표 속의 글자들은 문자열(string)로 처리(parse)된다
현재의 속성들에 새로운 속성들과 값들을 향 후 추가할 수 있게하기 위하여, 사용도구는 유효하지 않은 속성 이름이나 유효하지 않은 값을 갖는 선언을 건너 뛰어야 한다. 각 CSS1 속성은 그것이 수용(accept)하는 값들에 문법적, 의미적 제한이 있다.
CSS1 처리자(parser)가 다음 예제의 스타일쉬트를 만났다면
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
첫번째 줄의 두번째 선언에서 '12pt'는 무효 값이다. 두번째 줄의 두번째 선언에서 'font-vendor'는 정의되지 않은 속성이다. CSS1 처리자(parser) 이 선언들을 건너 띄고, 다음과 같이 줄일 것이다.
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
코멘트(Comment: 항목 1.7 참조)는, 공백으로 고려되는, 공백이 있는 곳에는 어디나 나올 수 있다. CSS1는 값의 안에서 추가적으로 공백이 나올 수 있는 곳을 정의하였다. 그 곳에서 코멘트(Comment)도 허용된다.
다음 규칙이 항상 적용된다.
주기: HTML의 CLASS 애트리뷰트는 클래스(class) 이름에 위 선택자(selector)로 허용된 글자 이외의 다른 글자들을 허용한다.
CSS1에서, 이들 글자들은 에스케입(escape)되거나 또는 Unicode 번호로 써야 한다.
"B&W?"는 "B\&W\?" 또는 "B\26W\3F"로 쓸 수 있고,
그리스어(Greek: "kouros"): "κουρος"는 "\3BA\3BF\3C5\3C1\3BF\3C2"로 써야한다.
항 후 CSS 버전에서는 더 많은 글자를 직접 입력할 수 있을 것으로 기대된다.
부록 B CSS1 문법을 참조하라.
[1] 영문 W3C 스타일쉬트 자원 페이지 (http://www.w3.org/Style)
[2] HTML 4 규격 번역문,
영문 HTML 4.0 규격 "http://www.w3.org/TR/REC-html40/",
D. Raggett, A. Le Hors, I. Jacobs, December 1997.
[3] T Berners-Lee, D Connolly: "Hypertext MarkupLanguage - HTML 2.0",
영문 RFC1866,
MIT/W3C, November 1995.
영문 규격 웹양식 "http://www.w3.org/MarkUp/html-spec/html-spec_toc.html"
[4] F Yergeau, G Nicol, G Adams, M Dürst:
영문 Hypertext Markup Language의 국제화 "ftp://ds.internic.net/rfc/rfc2070.txt"
[5] 영문 ISO 8879:1986
정보 처리 - 텍스트와 오피스 시스템 -
Standard Generalized Markup Language (SGML)
HTML의 SGML 설명을 참조하라.
[6] 영문 ISO/IEC 10179:1996
정보 기술 -- 프로그램 언어 --
Document Style Semantics and Specification Language (DSSSL).
[7] 영문 ISO/IEC 9899:1990
프로그램 언어 -- C.
[8] 유니코드 컨소시움(The Unicode Consortium),
Unicode 표준 -- 세계 글자 엔코딩 -- Version 1.0,
Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] 영문 인터넷을 위한 표준 디폴트 색상, version 1.10,
M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.
[10] CIE Publication 15.2-1986, 영문 Colorimetry, 제 2 판,
ISBN 3-900-734-00-3
"http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html"
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)",
영문 RFC1738,
CERN, Xerox Corporation, University of Minnesota, December 1994
[12] 영문 PNG (Portable Network Graphics) 규격, Version 1.0
"http://www.w3.org/TR/REC-png-multi.html"
[13] Charles A. Poynton: 영문 Macintosh Platform에서 감마(gamma) 수정
"ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf"
[14] 국제 색상 컨소시움(International Color Consortium):
영문 ICC Profile Format Specification, version 3.2, 1995
"ftp://sgigate.sgi.com/pub/icc/ICC32.pdf"
[15] S C Johnson: "YACC - Yet another compiler compiler",
Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
짧은 HTML의 역사 동안, 여러번의 영문 스타일쉬트 제안들이 있었는데, 이 제안은 그 것들에 기인하였다. 특히 Robert Raisch, Joe English와 Pei Wei의 제안들에서 영향을 많이 받았다.
CSS1 발전에 여러 사람들이 공헌하였다. 우리는 특히 다음 사람들에게 감사드린다. Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irène Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood and Stephen Zilles.
이 작업과 HTML3을 작업한 Dave Raggett, 특히 색상과 글꼴 분야에서 계속적인 공헌한 Chris Lilley, 그리고 이 구성과 창의적인 숙련을 제공한 Steven Pemberton, 이 세 분의 공헌을 특별히 명시한다.
(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)
다음 스타일쉬트는 작성 [3] HTML 2.0 규격으로 암시되는 표현을 하기 위해 제공 되었다. 일부 스타일들, 예를 들어, 색상들은 완전성을 위하여 추가되었다. 아래의 제시된 스타일쉬트와 유사한 것이 사용도구의 디폴트로 사용되기를 제안한다.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* 그 모체에 상대적 */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* 치밀한 양식 */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom'도 사용될 수 있다 */
A:link { color: blue } /* 방문하지 않은 연결 */
A:visited { color: red } /* 방문 했던 연결(visited link) */
A:active { color: lime } /* 활성 연결(active link) */
/* 앤커 이미지 엘레멘트 주위의 테두리 설정은
복합(contextual) 선택자(selector)가 필요하다 */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
(이 부록은 지명적이다)
(CSS의 어떤 버전의) 최소의 CSS 문법은 지원할 필요가 있는 모든 적용들이 항목 7에 정의되어 있다. 아래의 문법은 훨신 짧게 기술되어 있는데 이는 CSS1의 문법(syntax)을 정의한다.
그러나 어떤 의미에서는 여전히 CSS1의 superset이다. 이 문법에는 표현되지 않은 추가적인 의미적인 제한들이 있다. 부합하는 사용도구는 또한 향 후 버전 부합성(항목 7.1) 처리(parsing), 그 속성과 값 표현(항목 5) 그리고 단위 표현(항목 6)를 준수하여야 한다. 또한 HTML도 제한이 있는데, 예를 들면, CLASS 애트리뷰트의 가능한 값들 등이다.
아래 문법은 LL(1)이다. 그러나 대부분의 사용도구들은 직접 사용하지 않아야 한다. 왜냐하면 이는 그 처리(parsing) 자체를 표현한 것이 아니고, CSS1의 문법 만을 다룬 것이기 때문이다. 이 양식은 인간이 읽기 좋게 최적화하였으며, [15] yacc 이외의 약식 표기도 사용하였다.
* : 0 또는 그 이상 + : 1 또는 그 이상 ? : 0 또는 1 | : 대체 가능한(alternative) 항목의 분리 [] : 구룹지우기(grouping)
결과물은 다음과 같다.
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* 예: @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* "id"는 엘레멘트 타입에 왼쪽에 P#p007와 같이 추가되는 ID이다.
** "solitary_id" 는 #p007 처럼 그렇게 추가되지 않은 ID이다.
** 글라스(class)들과 가상 글라스(pseudo-class)에서 동시에.
*/
simple_selector
: element_name id? class? pseudo_class? /* 예: H1.subject */
| solitary_id class? pseudo_class? /* 예: #xyz33 */
| solitary_class pseudo_class? /* 예: .author */
| solitary_pseudo_class /* 예: :link */
;
element_name
: IDENT
;
pseudo_class /* A:link에서 처럼 */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* :link에서 처럼 */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* P.note에서 처럼 */
: CLASS_AFTER_IDENT
;
solitary_class /* .note에서 처럼 */
: CLASS
;
pseudo_element /* P:first-line에서 처럼 */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* :first-line에서 처럼 */
: FIRST_LETTER
| FIRST_LINE
;
/* id와 solitary_id에서 "#" 다음 부분은
** 유효한 HTML ID 값 이어야 한다는 제한이 있다.
** 예: "#x77"는 OK, 그러나 "#77"는 무효.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* 문법 오류를 방지하기 위하여 */
;
prio
: IMPORTANT_SYM /* 중요(!important) */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* 색상에서 "#" 다음에 16 진수(0-9a-fA-F)가
** 3 개 또는 6 개가 나와야 한다는 제한이 있다.
** 예: "#000"는 OK, 그러나 "#abcd"는 무효.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
다음은 [16] flex로 기술한 토큰화하는 것(tokenizer)이다. flex의 8-bit 적용을 가정함을 주시하라. 토큰화하는 것(tokenizer)은 대소문자를 구분한다(case-insensitive). (flex command line option -i).
unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\)|
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)
{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)
{BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* 공간 무시 */}
\n {BEGIN(0); /* 공간 무시 */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)
HTML 문서들은 대략 30,000개의 유니코드(Unicode)에서 정의한 다른 글자들을 가질 수 있다. 많은 문서들은 몇 백가지 글자로서 충분하다. 많은 글꼴들 또한 몇 백가지의 도형(glyph)들 만을 가지고 있다. 이 부록은, 항목 5.2 글꼴의 속성들과 조합하여, 문서의 글자들과 글꼴의 도형(glyph)들이 어떻게 서로 맞는가를 설명한다.
HTML 문서의 내용(content)은 글자(character)들과 마크업(markup)들의 연속이다. 쓰여진 것이 송신되면, 이는, 여러가지 가능한 방법 중 한가지 엔코딩(encoding)을 사용하여, 바이트(byte)들의 연속으로 바뀌어(encode) 진다. HTML 문서는 글자들은 찾기 위 해 엔코딩되어야 한다. 예를 들어, 서부 유럽에서, 관습적으로 a-with-grave-accent (à)를 위하여, 244 바이트(bite)를 사용하였다. 그러나 히브리어(Hebrew)에서는, 224을 Aleph를 위하여 사용하는 것이 더 보편적이다. 일본어에서는 한 바이트(byte)의 의미가 그 뒤의 바이트들에 의하여 달라진다. 일부 엔코딩(encoding)에서는 한 글자가 두개(혹은 그 이상)의 바이트들로 엔코딩된다.
사용도구는 http header에 있는 글자세트("charset")를 점검하여 어떻게 엔코딩할 것인가를 안다. 전형적인 엔코딩(encoding: 글자세트의 값)들은 영어에서 아스키("ASCII"), 서유럽에서 "ISO-8859-1", 히브리어에서 "ISO-8859-8", 일본어에서 "Shift-JIS", 한글에서 "EUC-KR"이다.
[2] HTML 2.0과 [4] HTML 4에서, 일반적으로 유니코드(Unicode)에 의하여 정의되어 있는 30,000여 다른 글자들을 허용한다. 그렇게 많은 글자들을 사용하는 문서들은 많지 않을 것이다. 그리고 올바른 엔코딩(encoding)의 선택은 일반적으로 그 문서가 한 글자마다 한 바이트(byte) 만 필요하게 해 줄 것이다. 엔코딩 밖에 있는 때때로 사용하는 글자들도 글자 참조 수치를 입력하여 사용할 수 있다. 'Π'는 어느 엔코딩를 사용하던 관계없이 항상 그리스어 Pi의 대문자(Π)를 의미한다. 사용도구들은, 단지 몇가지 엔코딩(encoding)들 만을 채택한다 하더라도, 어떤 유니코드(Unicode) 글자도 처리할 수 있어야 한다는 점을 주시하라.
HTML의 엔코딩 설명을 참조하라.
글꼴(font)는 글자(character)들을 포함하지 않고 글자들의 도형(glyph)이라 불리우는 그림(picture)들을 갖는다. 이 도형(glyph)들은 아우트라인(outline) 비트맵(bitmap)에서 글자의 독특한 표현을 한다. 명시적(explicit)으로 혹은 암시적(implicit)으로, 각 글꼴는 그에 연관된 글꼴 엔코딩 표(font encoding table)를 갖는데, 이는 각 도형(glyph)이 어떤 글자을 표현하는가를 말해 준다. 타입(Type) 1 글꼴(font)는, 표에서 엔코딩 벡터(encoding vector)로 참조된다.
실제로, 많은 글꼴들은 한 글자를 위하여 여러가지 도형(glyph)들을 같는다. 어느 도형(glyph)이 사용되는가는 언어의 명령(rule)들이나 도형 설계자를 참조하는데 따라 채택된다.
예를 들어 아랍어(Arabic)에서, 모든 글자들은 네가지 다른 모양(shape)들을 갖는데, 그 글자가 단어의 앞에 오는가, 가운데 오는가, 끝에오는가 혹은 독립적으로 사용되는가에 따라 다르다. 이는 모든 경우에 같이 적용되고, 따라서 HTML 문서에서 한 가지의 글자인 것이다. 그러나 인쇄되면 매 번 다르게 보인다.
그래픽 디자이너들이 여러 대체 모양들 중에서 골라 사용할 수 있는 글꼴들도 남겨 놓았다. 불행하게도 CSS1은 아직 이들 대체 모양을 선택하는 수단을 제공하지 못하고 있다. 현재로서는 선택된 그런 글꼴는 항상 디폴트 모양(shape)으로 된다.
단일 글꼴로 문서나 단일 엘레멘트의 모든 글자들을 표현하기에 불 충분한 경우의 문제를 다루기 위하여, CSS1는 글꼴쎄트(font set)들의 사용을 허용한다.
CSS1에서 글꼴쎄트(font set)는 글꼴들의 목록이다. 모두 같은 스타일(style)과 크기를 갖고있으며, 어떤 글자가 도형(glyph)을 갖고 있는가를 점검하는 일련의 순서이다. 한 엘레멘트가 영어 텍스트를 가지고 수학기호(mathematical symbol)들과 섞여 있을 때, 하나는 글자와 수자, 다른 하나는 수학기호를 갖는, 두가지 글꼴의 글꼴쎄트가 필요할 수 있다. 글꼴쎄트를 선택하는 기능(mechanism)에 대한 설명은 항목 5.2 글꼴 속성을 참조하라.
아래 글꼴쎄트 예제는 문장에 영어(Latin) 글자들, 일본어 글자들과 수학기호들이 들어가는 것이 예상되는 경우에 적당하다.
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Baskerville 글꼴(Latin 글자만 있슴)에 있으면 그 글꼴에서 채택하고, 일본어는 Mincho 글꼴에서, 그리고 수학기호는 Symbol 글꼴에서 올 것이다. 다른 글자들은 (희망적으로) 일반 글꼴(generic font family)인 'serif' 글꼴에서 올 것이다. 'serif' 글꼴는 하나이상의 다른 글꼴들이 없을 때도 사용될 수 있다.
(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)
감마(gamma)에 대하여 잘 모르면 [12] PNG 규격의 영문 감마 안내서(Gamma Tutorial)를 참조하라.
사용도구들이 CRT(화면)에 디스플레이는, 계산하는데 있어, 이상적인 CRT를 가정하고 떨림(dithering)에 의하여 발생되는 gamma의 효과를 무시할 수 있다. 이는 현재의 프래트폼(platform)들에서 필요한 처리를 최소화 함을 의미한다.
감마를 적용한다("applying gamma")는 것은 운영체계(OS)에서 처리되기 전에 각 R, G, B 삼색이 R'=Rgamma, G'=Ggamma, B'=Bgamma로 환산되어야 한다는 의미이다.
이는 브라우저마다 아래와 같이 한번에 256-엘레멘트 조견표(table)를 만들므로서 신속히 이루어 질 수 있다.
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
그러면 이것은 색상 애트리뷰트마다나 픽셀(pixel)마다의 어떤 고급 계산의 필요를 피할 수 있다.
(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)
CSS1에 대하여 작업하는 목표는 HTML 문서들을 위하여 간단한 스타일쉬트 기능을 만들기 위한 것이다. 현재의 규격은 스타일쉬트을 웹에 사용 타당성을 제시하는 간단성과 풍부한 보이는 제어를 위하여 제작자들로부터의 압력에 의한 것의 사이에서 균형을 갖춘 상태이다. CSS1는 다음 사항들을 제공한다.
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
스타일쉬트로는:
H1 { font-style: small-caps }
<H1>Headline</H1>
CSS1는 아래 사항들을 제공하지 않는다.
CSS에서 다음 여러 방향으로 확장될 것으로 기대한다.
CSS는 다음 사항을 취급하지 않을 것이다.
(이 부록은 지명적이 아니고 정보를 제공하기 위한 것이다.)
이 규격은 1996년 11월 17일 최초 발표된 것으로부터 개정된 CSS1 추천안으로, 아래 목록은 모든 변경들을 설명한다. 스타일쉬트 오류("errata")를 선택 함으로서 해당 변경들이 부각된다.
Komachi Yushi, Steve Byrne, Liam Quinn, Kazuteru Okahashi, Susan Lesch, Tantek Çelik에게 이 개정을 준비하는데 도움을 준 것에 대해 감사한다.
맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )