기본적인 CSS 규칙은 선택자(selector)와 선언문(declaration)두 부분으로 구성됩니다. 선택자는 규칙을 어디에 적용할 것인지를 지정하고, 선언문은 CSS 속성 이름과 속성값으로 구성하여 규칙의 내용을 기술합니다. 아래 예제에서 선언한 CSS 규칙은 모든 blockquote 요소에 적용됩니다.
blockquote { font:bold 18pt "굴림" }
-속성-- 속성값 -
- 선택자 - - 선언문 -
선언문은 { }로 표시되어야 하며, 하나 이상의 선언문을 사용할 때는 세미콜론(;)으로 구분해 주어야 합니다. 아래는 다중 선언문의 예제입니다.
blockquote { font: bold 18pt "Times New Roman"; background-color: whitesmoke;
margin: 1em; padding: 0.5em; }
[COLOR="navy"]선택자(Selectors)[/COLOR]
자주 사용되는 CSS 선택자에는 다음과 같은 것이 있습니다. 자세한 정보는 CSS2 Specification을 참고하십시오.
[COLOR="navy"]타입 선택자(Type selectors) [/COLOR]
HTML 요소에 스타일을 지정할 때 사용합니다.
h1 { font-size: 24pt; font-weight: bold }
ol { list-style: upper-roman }
[COLOR="navy"]조건 선택자(Descendant selectors)[/COLOR]
먼저 지정한 선택자(selector) 안에 나중에 지정한 선택자가 오는 경우에 적용할 스타일을 지정할 때 사용합니다. 다음 예제는 blockquote 안에 나오는 em 요소에만 적용됩니다.
blockquote em { font-style: normal }
[COLOR="navy"]클래스 선택자(Class selectors)[/COLOR]
지정한 클래스 속성의 값을 가진 모든 요소에 적용되는 스타일을 지정합니다.
p.foo { margin:1em; padding:5px }
[COLOR="navy"]ID 선택자 ((ID selectors)[/COLOR]
지정한 ID 속성값을 갖는 요소에 적용되는 스타일을 지정합니다.
#i8 { position: absolute; top: 10px; left: 15em }
[COLOR="navy"]그룹 선택자(Group selectors)[/COLOR]
한꺼번에 여러 선택자에 대해 스타일을 적용할 때 사용합니다. 쉼표(,)로 구분하여 선택자를 표기합니다.
h1, h2, h3 { font-family: sans-serif }
[COLOR="navy"]일반 선택자(universal selector)[/COLOR]모든 요소에 적용되는 스타일을 지정할 때 사용합니다. *로 표시합니다.
* { border: thin solid red }
[COLOR="navy"]가상 클래스(Pseudo-class)와 가상 요소(pseudo-element)[/COLOR]
HTML 요소가 아니지만 가상으로(pseudo) 요소인 것처럼 속성을 지정하는 것을 가리킵니다.
a:link { color: blue }
a:active { color: red }
a:visited { color: gray }
[COLOR="navy"]스타일 시트(Style Sheets) [/COLOR]
스타일 시트란 여러 개의 스타일을 모아 놓은 것으로, HTML 문서에 스타일을 사용하는 방법에는 세 가지가 있습니다.
[COLOR="navy"]인라인 스타일(Inline style)을 적용하는 방법 [/COLOR]
예를 들어 <P> 태그 안에 다음과 같이 style 속성을 이용하여 인라인 스타일을 적용할 수 있습니다. 다음은 스타일을 이용하여 문단의 속성을 파란색 글자에 점선 테두리가 나타나도록 지정한 경우입니다.
<P style="color:blue; margin:1; border-width:1; border-color:blue;
border-style:dotted;">스타일 이용하기</P>
[COLOR="navy"]STYLE 요소를 사용하는 방법 [/COLOR]
스타일이 문서 전체에 적용되도록 하려면 <HEAD> 태그 안에 <STYLE>을 사용하여 스타일을 정의합니다. 이렇게 정의한 스타일은 해당 문서에서 <BODY>에 입력된 내용에 적용됩니다. .yellow는 클래스로 스타일을 정의한 것이고, #black은 ID로 정의한 것입니다. 클래스로 정의한 스타일은 문서 안에서 선택하여 반복적으로 사용할 수 있습니다.
<STYLE>P { color:blue; }
H1 { color: red; }
H2 { color: green; }
.yellow { color:yellow; }
#black { color:black; }
</STYLE>
[COLOR="navy"]외부 스타일 시트 파일을 연결하는 방법[/COLOR]
<STYLE> 요소로 정의한 내용을 별로의 파일로 저장하여 관리할 수 있습니다. 이때 파일의 확장자는 *.css를 사용하며 HTML 문서에 적용하려면 css 파일을 연결시켜야 합니다. 앞에서 사용한 스타일을 'mystyle.css' 라는 이름의 파일로 저장했을 경우, 'mystyle.css' 파일의 내용은 다음과 같습니다.
P { color:blue; }
H1 { color: red; }
H2 { color: green; }
.yellow { color:yellow; }
#black { color:black; }
HTML 문서에는 다음과 같이 <HEAD> 태그 안에 스타일 시트 파일을 연결시킵니다.
<LINK rel="stylesheet" type="text/css" href="mystyle.css">
CSS 속성값 형식
[COLOR="navy"]Intergers/Real Numbers [/COLOR]
정수와 실수는 십진수에서만 지정됩니다. 정수는 0에서 9까지의 숫자 중 하나 이상의 숫자로 구성된 수를 의미합니다. Number는 정수일 수도 있고 0 또는 소수점이 있는 실수일 수도 있습니다. 정수와 실수는 음수(-)가 될 수도 있고 양수(+)가 될 수도 있습니다.
[COLOR="navy"]Length[/COLOR]
길이값은 '부호('+' 또는 '-') + number + 길이 단위('px', 'deg'...)'와 같은 형식으로 사용됩니다. 부호는 생략할 수 있으며 기본값은 '+'입니다. 길이값이 '0'인 경우에는 길이 단위를 생략할 수 있습니다.
길이에는 상대 길이(relative)와 절대 길이(absolute)의 두 가지 유형이 있습니다. 상대 길이는 다른 length 속성에 따른 상대적인 길이를 의미합니다. 스타일 시트에서 길이를 상대 길이로 정의하면 보다 쉽게 미디어 간의 수치를 측정할 수 있습니다.
상대 단위:
[LIST]
[*]em: font-size에 대한 상대적인 크기
[*]ex: 알파벳 소문자 x의 높이
[*]px: 화면 해상도에 따른 상대적 크기
[/LIST]
'em'은 사용되는 font-size를 참조합니다. 만약 font-size 속성에 'em' 단위가 사용된 경우에는 부모 요소의 글꼴 크기를 참조합니다.
'ex'는 알파벳 소문자 x의 높이를 말합니다. 흔히 'x-높이(x-height)'라고 부르지만 알파벳 x 뿐만 아니라 x를 포함하고 있지 않은 문자에도 해당됩니다.
픽셀 단위는 화면 해상도에 따른 상대적 크기입니다.
상대적인 값은 상속되지 않습니다. 반면에 상대적인 값에 근거한 "산술값"은 상속됩니다.
body { font-size: 12pt; text-indent: 3em; }
h1 { font-size: 15pt }
위의 예에서 text-indent값은 font-size의 상대적인 크기로 계산되기 때문에 12pt의 3배 크기인 36pt가 됩니다. body 요소의 모든 자식 요소는 이러한 "산술값"을 상속하게 됩니다. 따라서 H1 요소의 text-indent 값은 15pt의 3배인 45pt가 아니라 상속한 "산술값"인 36pt가 됩니다.
절대 단위:
[LIST]
[*]in: 인치
[*]cm: 센티미터
[*]mm: 밀리미터
[*]pt: 포인트 (1/72 인치)
[*]pc: 파이카 (12 포인트)
[/LIST]
절대 단위는 사용자들이 추정할 수 없는 단위기 때문에 가능하면 사용하지 않는 것이 좋습니다.
[COLOR="navy"]Percentages[/COLOR]
퍼센트값은 '부호('+' 또는 '-') + number + %'와 같은 형식으로 사용됩니다. 부호는 생략할 수 있으며 기본값은 '+'입니다.
퍼센트값은 항상 다른 값에 대한 상대적인 값을 나타냅니다. 퍼센트값을 사용하는 속성을 정의할 때에는 상대적으로 퍼센트값을 계산하기 위해 참조할 대상도 함께 정의해야 합니다. 참조할 대상은 같은 요소 안의 다른 속성값이나 부모 요소의 속성값, 또는 블록 요소의 너비와 같은 서식과 관련된 값일 수도 있습니다.
자식 요소는 부모 요소의 산술된 "산술값"을 상속합니다. 다음 예제의 경우, P 요소의 자식 요소는 line-height에 지정된 120%를 상속받지 않고 120%를 근거로 계산된 산술값인 12pt를 상속받습니다.
p { font-size: 10pt; line-height: 120% }
[COLOR="navy"]URLs[/COLOR]
URL은 웹에서 리소스의 위치를 나타냅니다. URL을 사용하는 형식은 다음과 같습니다.
위의 예제와 같이 'url('의 뒤에 공백 문자를 넣거나 넣지 않을 수 있고 마지막 ')' 앞에 공백 문자를 넣을 수도 있고 생략할 수도 있습니다. 경로를 나타낸 부분은 작은 따옴표('')나 큰따옴표("")로 묶어줄 수도 있고 생략할 수도 있습니다.
Strings 스트링은 작은 따옴표('')나 큰따옴표("")로 묶어서 표현합니다. 큰따옴표("")는 다시 큰따옴표("") 안에 사용할 수 없으나 꼭 필요한 경우에는 다음 예제와 같이 사용할 수 있습니다.
예제:
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
스트링 안에서는 줄바꾸기를 직접 할 수 없습니다. 줄바꾸기를 해야 하는 경우에는 "\A"를 사용합니다. A의 16진수값은 Unicode에서 줄바꾸기를 나타냅니다.
스트링을 여러 줄로 나누려면 백슬래쉬(\)로 표현해 주어야 합니다.
예제:
a[title="a not s\o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
[COLOR="Navy"]Colors[/COLOR]
색깔을 나타냅니다. 16진수로 된 RGB 코드값 또는 16가지의 기본 색깔 이름으로 표기되며, 16진수로 표기할 때는 "#" 문자를 앞에 표기해야 합니다. 각 색깔의 RGB 코드값은 다음과 같습니다.
Color Name sRGB Value
-----------------------------
Black #000000
Silver #C0C0C0
Gray #808080
White #FFFFFF
Maroon #800000
Red #FF0000
Purple #800080
Fuchsia #FF00FF
Green #008000
Lime #00FF00
Olive #808000
Yellow #FFFF00
Navy #000080
Blue #0000FF
Teal #008080
Aqua #00FFFF
다음 색깔은 사용자의 운영 체제에 정의된 색깔을 참조하는 것입니다. 아래와 같은 색깔을 사용하면 좀 더 다양하게 문서를 꾸밀 수 있습니다.
Color Name Corresponding UI Element
-----------------------------
ActiveBorder 활성 창틀
ActiveCaption 활성 제목 표시줄
AppWorkspace 여러 문서 인터페이스의 배경
Background 바탕 화면
ButtonFace 3차원 개체 표면
ButtonHighlight 3차원 개체의 어두운 그림자 부분
ButtonShadow 3차원 개체의 그림자 부분
ButtonText 버튼 텍스트
CaptionText 캡션, 크기 상자, 이동줄 상자 크기
GrayText 비활성 텍스트
Highlight 컨트롤에서 선택된 항목
HighlightText 컨트롤에서 선택된 항목의 텍스트
InactiveBorder 비활성 창틀
InactiveCaption 비활성 제목 표시줄
InactiveCaptionText 비활성 제목 텍스트
InfoBackground 도구 설명 배경
InfoText 도구 설명 텍스트
Menu 메뉴 배경
MenuText 메뉴 텍스트
Scrollbar 이동줄 회색 부분
ThreeDDarkShadow 3차원 개체의 어두운 그림자 부분
ThreeDFace 3차원 개체 표면
ThreeDHighlight 3차원 개체의 강조 부분
ThreeDLightShadow 3차원 개체의 밝은 부분
ThreeDShadow 3차원 개체의 어두운 그림자 부분
Window 창 배경
WindowFrame 창틀
WindowText 창의 텍스트
[COLOR="navy"]Counters [/COLOR]
카운터는 식별자로 표시합니다. (counter-increment 및 counter-reset 속성 참조) 카운터값을 참조하려면 'counter(identifier)' 또는 'counter(identifier, list-style-type)'와 같이 표시합니다. 기본 스타일은 'decimal'입니다.
같은 이름의 중첩된 카운터를 순서대로 참조하려면 'counters(identifier, string)' 또는 'counters(identifier, string, list-style-type)'와 같이 표시합니다.
CSS2에서는 카운터값은 content 속성에서만 참조될 수 있습니다. list-style-type 값으로 'none'을 사용할 수도 있습니다. 예를 들어 'counter(x, none)'으로 정의한 경우에는 빈 스트링이 표시됩니다.
counter-reset 범위를 벗어나는 카운터는 0으로 지정된 것으로 간주합니다.
캐스케이딩 및 상속
CSS 의 두가지 특별한 기능은 캐스케이딩과 상속입니다.
[COLOR="navy"]상속[/COLOR]
CSS 속성 중의 일부 값은 부모 요소에서 자식 요소로 대물림됩니다. 이것을 상속이라 합니다. 각 속성에는 상속여부가 정의되어 있습니다.
예를들어 BODY요소의 font-family를 "굴림"으로 지정하면 지정된 body 내의 모든 요소들의 텍스트는 "굴림" 폰트를 나타냅니다. 마찬가지로 DIV 요소에 적용된 모든 상속 스타일은 DIV 내의 모든 요소에 적용됩니다. 그러나 자식 속성에 부모의 속성과는 다른 값이 지정된 경우에는 자식 속성에 지정된 값이 사용되며 부모의 값은 무시됩니다.
퍼센트값은 상속되지 않습니다. 반면에 퍼센트값에 근거한 "산술값"은 상속됩니다.
body { font-size: 10pt }
blockquote { font-size: 80% }
<blockquote>This wine is <em>very</em> good.</blockquote>
위와 같이 지정된 경우, blockquote의 폰트 크기는 8pt입니다. 즉, blockquote 내의 <em> 요소에 의하여 상속되는 것은 8pt이지 80%가 아닙니다.
[COLOR="navy"]캐스케이딩[/COLOR]
스타일 정의는 저자, 사용자, 웹 브라우저의 세가지를 기본으로 정의됩니다.
[LIST]
[*]저자: 저자는 HTML 문서 내부에 외부 스타일 시트를 연결할 수 있고 HTML 정의를 할 때 선언문을 사용할 수도 있습니다.
[*]사용자: 사용자는 웹 브라우저의 기능을 사용하여 스타일을 지정할 수 있습니다.
[*]웹 브라우저: 웹 브라우저는 기본 설정 스타일 시트를 가지고 있으며 스타일 정보가 새로 주어지지 않으면 기본 설정을 적용시킵니다.
[/LIST]
서로 다르게 지정한 스타일 규칙들이 충돌할 경우를 대비하여 CSS 스펙에 어떻게 이러한 충돌을 해결하고 어떤 규칙을 먼저 적용할 것인지 정의하고 있습니다. 몇 가지 기준에따라 더 중요한 규칙이 결정됩니다. 규칙들이 서로 충돌할 경우에는 중요도가 가장 큰 규칙이 우선 적용됩니다.
우선권을 부여하는 기준은 아래와 같습니다:
[COLOR="navy"]1. "!important" 키워드[/COLOR]
선언문의 끝에 "!important" 라는 키워드를 추가할 경우, 규칙은 중요도를 부여받습니다. 타 규칙들이 동등한 중요도를 갖고 있지 않는한 우선 적용됩니다.
[COLOR="navy"]2. 출처 [/COLOR]
저자의 규칙과 사용자의 규칙이 동등한 중요도를 가지고 있고, "!important" 라는 표시가 없으면 사용자의 규칙이 우선 적용됩니다. 저자의 규칙과 사용자의 규칙은 모두 웹 브라우저의 규칙보다 우선 적용됩니다.
[COLOR="navy"]3. 명확도 [/COLOR]
더 명확한 규칙(선택자가 더 많은 규칙)일수록 덜 명확한 규칙에 우선합니다. 중요도 순서에서 명확도는 다음과 같은 사항에 영향을 받습니다: (1) 선택자에 얼마나 많은 ID 이름이 있는가, (2) 선택자에 얼마나 많은 클래스 이름이 있는가, (3) 선택자에 얼마나 많은 요소 이름이 있는가. 아래의 예는 낮은 중요도에서 높은 중요도 순서로 배열되어 있습니다.
* { color: black }
p { color: gray }
div p { color: yellow }
p.foo { color: green }
p.foo.goo { color: blue }
div p.foo.goo { color: fuscia }
p#bob { color: red }
위의 규칙을 적용할 경우, 어떤 단락이 "foo" 와 "goo" 라는 클래스에 속해 있으며 동시에 "bob"이라는 ID 이름을 가지고 있다면 그 단락은 빨간색으로 나타납니다.
[COLOR="navy"]4. 순서[/COLOR]
두 개의 충돌하는 규칙들이 동일한 중요도를 가지고 있을 경우에는 스타일 시트의 마지막에 있는 규칙이 우선 적용됩니다. 하지만 외부 스타일 시트 규칙은 내부의 스타일 시트 규칙보다 앞에 있는 것으로 간주됩니다. 또한 스타일 선언문은 다른 모든 규칙보다 뒤에 있는 것으로 간주됩니다.
추천 : 