특성 정의에 사용되는 문법
폰트 특성
색상과 배경 특성
문장 특성
상자 특성
분류 특성
단위
특성 정의에서 사용되는 문법
<Foo>
Foo의 값. 공통 형은 단위 절에서 논의하겠다.
Foo
문자적으로 표시되는 키워드. 쉼표와 Slash 또한 문자적으로 표시된다.
A B C
순서대로 A가 발생하고 B, C가 발생
A | B
A 나 B 가 발생
A || B
순서대로 A나 B 또는 둘다 발생
[ Foo ]
[ ]는 아이템을 함께 묶는데 사용
Foo*
Foo가 "0"번이상 반복
Foo+
Foo가 한번이상 반복
Foo?
Foo는 조건부
Foo{A,B}
Foo는 적어도 A번 발생하고 많아야 B번 발생
글꼴 특성 글꼴 지정(Font Family)
문법
font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
가능한값
<family-name>
<generic-family>
serif (예 , Times)
sans-serif (예 , Arial나 Helvetica)
cursive (예 , Zapf-Chancery)
fantasy (예 , Western)
monospace (예 , Courier)
초기값
브로우저에 의존
적용범위
모든태그
상속
됨
글꼴지정에는 특정 글꼴이나 내정된 글꼴을 지정한다. 지정한 글꼴이 내정된 글꼴과 같아서는 안된다. 여러개의 글꼴을 지정할 수 있으며, 글꼴을 지정했다면 지정한 글꼴이 없을 경우에 사용되도록 내정 글꼴을 이어 지정해야 한다.
간단한 font-family 의 선언은 다음과 같다.
P { font-family: "New Century Schoolbook", Times, serif }
처음 지정된 두개는 특정한 글꼴(New Century Schoolbook과 Times)이라는 것에 주의하기 바란다. 그러나 이들 둘다 serif 글꼴이므로 내정 글꼴은 두개의 글꼴 중 어느 하나도 이 시스템에 존재하지는 않지만 대치할 수 있는 serif 글꼴을 가지고 있는 경우를 위해 지정되었다.
공백을 포함하는 글꼴명은 큰 따옴표나 작은 따옴표로 감싸야 한다.
font-family는 또한 font
글꼴 속성(Font Style)
문법
font-style: <value>
가능한값
normal | italic | oblique
초기값
normal
적용범위
모든 태그
상속
됨
font-style 특성은 글꼴이 normal , italic 또는 oblique 중 하나로 출력되도록 한다. font-style 선언을위한 간단한 Style Sheet는 다음과 같다.
H1 { font-style: oblique }
P { font-style: normal }
글꼴 변형(Font Variant)
문법
font-variant: <value>
가능한값
normal | small-caps
초기값
normal
적용범위
모든 태그
상속
됨
font-variant 특성은 글꼴이 normal 로 출력될 것인지 small-caps 로 출력될 것인지를 결정한다. Small-caps는 단어의 모든 문자를 소문자보다 약간 큰 대문자로 출력한다. CCS의 다음 버전은 condensed, expanded, small-caps numerals이나 사용자변형과 같은 문자변형을 지원할 것이다. font-variant 지정의 간단한 예는 다음과 같다.
SPAN { font-variant: small-caps }
글꼴 두께(Font Weight)
문법
font-weight: <value>
가능한값
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
초기값
normal
적용범위
모든 태그
상속
됨
font-weight 특성은 글꼴의 두께를 지정하는데 사용된다.bolder 와 lighter 는 상속된 가중치와 연관이 있는 반면 다른 값들은 절대 글꼴 가중치이다.
주의 :
모든 글꼴이 9가지의 두께를 갖는 것은 아니므로 이 두께들 중 몇몇은 할당되면서 함께 묶여 사용된다. 만약 정의된 두께를 사용할 수 없으면 다음과 같은 규칙을 근거로 두께를 대치한다.
500 은 400 로 바뀐다. 반대인 경우도 마찬가지이다.
100 -300 은 다음으로 얇은 두께나 굵은 두께로 대치된다.
600 -900 은 보다 굵은 것이 있으면 보다 굵은 것으로 대치되며 그렇치 않으면 다음으로 얇은 것으로 대치된다.
font-weight 지정 예:
H1 { font-weight: 800 }
P { font-weight: normal }
글꼴 크기(Font Size)
문법
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
가능한값
<absolute-size>
xx-small | x-small | small | medium | lar
ge | x-large | xx-large <relative-size>
<length>
<percentage> (외곽 태그에 대한)
초기값
medium
적용범위
모든 태그
상속
됨
font-size 특성은 출력되는 글꼴의 크기를 변경하는데 사용된다. lenght는 따양한 해상도에 맞춰 조정하기 힘들기 때문에 가급적 사용하지 않는게 좋다.
글꼴 크기를 변경하는 몇가지 예는 다음과 같다.
H1 { font-size: large }
P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger }
저자들은 Microsoft Internet Explorer
H1 { font-size: 200% }
와 같은 규칙을 적용하면 만들어지지만 글꼴의 크기가 외곽 태그에 사용된 폰트가 아니라 M$IE의 내정 글꼴에비해 두배가 되는 H1태그가 만들어진다는 점에서 다소 문제가 있다. 이 경우 대부분 BODY가 외곽 태그가 되며 보통 "medium" 크기의 글꼴을 사용한다. 반면에 M$IE에서 H1 태그에 대한 내정된 글꼴의 크기는 "xx-large"이므로 지나치게 큰 글꼴이 나타내게된다.
이러한 의도하지 않은 버그가 있으므로 웹 페이지 저자는
font-size 에서 백분을을 사용하는데 주의를 기울여야 한다.
글꼴(Font) font 특성은 줄간격 뿐만아니라 약식으로 글꼴 특성을 변경하는데 사용된다. 예를들어
P { font: italic bold 12pt/14pt Times, serif }
는 문단의 속성을 줄간격을 14 포인트로 하고 글꼴은 크기가 12 포인트인 Times 또는 Serif를 사용하며 글자 속성을 뚜거운 이태릭체로 지정한다.
색상과 배경 특성 색상(Color)
문법
color: <color>
초기값
브로우저에 의존
적용범위
모든 태그
상속
됨
color 특성으로 웹 페이지의 저자는 임의의 태그에대한 색상을 지정할 수 있다. 색상표는 색상 절을 참조하기 바란다. 간단한 예는 다음과 같다.
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
배경색상(Background Color)
문법
background-color: <value>
가능한값
<color> | transparent
초기값
transparent
적용범위
모든 태그
상속
안됨
background-color 특성은 각 태그의 배경 색상을 설정한다. 간단한 예는 다음과 같다.
BODY { background-color: white }
H1 { background-color: #000080 }
또한 약식으로 배경(background) background-color 특성보다 더 잘 지원된다.
배경그림(Background Image)
문법
background-image: <value>
가능한값
<url> | none
초기값
없음
적용범위
모든 태그
상속
안됨
background-image 특성은 각 태그의 배경그림을 설정한다. 간단한 예는 다음과 같다.
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }
배경그림을 정의하는 경우 이미지를 로딩하지 않는 부분들을 위해 유사한 특성인 background color 또한 정의되어야 한다.
또한 약식으로 배경(background) background-image 특성보다 더 잘 지원된다.
배경그림 반복(Background Repeat)
문법
background-repeat: <value>
가능한값
repeat | repeat-x | repeat-y | no-repeat
초기값
repeat
적용범위
모든 태그
상속
안됨
background-repeat 특성으로 지정된 배경그림(background image) 이 얼마나 반복되어야 하는지를 지정할 수 있다. repeat-x 로 배경그림은 수평 반복되며 반면에 repeat-y 로는 수직으로 반복한다. 간단한 예는 다음과 같다.
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
위의 예에서 배경그림은 단지 수평으로만 반복될 것이다.
또한 약식으로 배경(background) background-repeat 특성보다 더 잘 지원된다.
배경그림 스크롤(Background Attachment)
문법
background-attachment: <value>
가능한값
scroll | fixed
초기값
scroll
적용범위
모든 태그
상속
안됨
background-attachment 특성으로 지정된 배경그림(background image) 을 내용따라 스코롤 시킬것인지, 캔바스에대해 고정 시킬 것인지를 결정한다. 간단한 예는 다음과 같다.
BODY { background: white url(candybar.gif);
background-attachment: fixed }
또한 약식으로 배경(background) background-attachment 특성보다 더잘 지원된다.
배경그림 위치(Background Position)
문법
background-position: <value>
가능한값
[<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
초기값
0% 0%
적용범위
블럭태그와 대치태그
상속
안됨
background-position 특성으로 지정된 배경그림(background image) 의 초기위치를 지정할 수 있다. 이 특성은 블럭태그(block-level elements) 와 대치태그에만 적용된다.(대치태그는 본질적인 속성, 차원이 알려진 태그들이다. HTML에서 대치태그는 IMG , INPUT , TEXTAREA , SELECT 와 OBJECT 등이다.)
배경그림 위치를 할당하는 가장 쉬운 방법은 다음과 같은 키워드를 사용하는 것이다.
수평 키워도(Horizontal keywords) (left , center , right )
수직 키워드(Vertical keywords) (top , center , bottom )
백분율 과 길이 가 배경그림의 위치를 할당하는데 사용된다. 백분율은 태그의 크기에대한 상대적인 크기이다. 길이가 허용되지만 이들은 서로 다른 해상도를 처리하는데 있어서 본질적인 약점이 있기때문에 가급적 사용하지않기 바란다.
백분율이나 길이를 사용할 때 수평 위치를 먼저 지정하고 수직위치를 지정해야 한다. 20% 65% 은 배경그림의 수평으로 20%, 아래로 65%되는 지점을 각 태그의 수평으로 20%, 아래로 65% 되는 지점에 두도록 만든다. 5px 10px 은 배경그림의 좌상단을 각 태그의 좌상단으로부터 우측으로 5 픽셀 아래로 10 픽셀되는 지점에 두도록 만든다.
만약 수평 값만이 지정하면, 수직 값은 50%가 될 것이다. 길이와 백분율의 조합은 허용되지만 이때 길이는 음수만 가능하다. 예를들어 10% -2cm 은 허용된다. 그러나 백분율과 길이는 키워드로는 조합할 수 없다.
키워드는 다음과 같이 해석된다.
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
만약 배경그림이 캔바스에대해 고정(fixed) 된다면, 각 태그 대신에 캔바스에대한 위치에 놓어진다.
또한 약식으로 배경(background) background-position 특성보다 더 잘 지원된다.
배경(Background) background 특성은 훨씬 자세한 배경관련 특성의 약식표현으로 사용된다. background 의 선언에대한 예는 다음과 같다.
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
지정되지 않은 값은 초기치가 사용된다. 예를들어 위에서 처음 세개의 규칙의 background-position 0% 0% 으로 설정될 것이다.
문장 특성(Text Properties) 단어간격(Word Spacing)
문법
word-spacing: <value>
가능한값
normal | <length>
초기값
normal
적용범위
모든 태그
상속
됨
word-spacing 특성은 단어사이의 간격을 정의한다. 값은 길이(length) 형식으로 주어지며, 음수도 사용할 수 있다.
예
P EM { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }
글자간격(Letter Spacing)
문법
letter-spacing: <value>
가능한값
normal | <length>
초기값
normal
적용범위
모든 태그
상속
됨
letter-spacing 특성은 글자 사이의 간격을 정의한다. 값은 길이(length) 형식으로 주어지며 음수도 사용가능하다. 0 로 설정함으로서 행간 고르기(justification)를 방지할 수 있다.
예:
H1 { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }
문자장식(Text Decoration)
문법
text-decoration: <value>
가능한값
none | [ underline || overline || line-through || blink ]
초기값
none
적용범위
모든 태그
상속
안됨
text-decoration 특성으로 다섯가지 속성(underline , overline , line-through , blink 또는 내정 값인 none )중 하나로 문자를 장식할 수 있다.
예를들어, 다음과 같은 방법으로 밑줄이 없는 링크를 만들 수 있다.
A:link, A:visited, A:active { text-decoration: none }
수직정렬(Vertical Alignment)
문법
vertical-align: <value>
가능한값
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
초기값
baseline
적용범위
인라인 태그
상속
안됨
vertical-align 특성은 외곽 태그나 태그 행에대한 인라인 태그의 수직 위치를 변경하는데 사용된다.(인라인 태그는 앞뒤로 어떠한 줄바꿈(Line Break)도 갖지 않는 태그들이다. 예를들어 HTML에서는 EM , A 와 IMG 이다.)
값은 각 태그의 줄간격(line-height) 백분율(percentage) 이다. 줄간격(line-heigh)은 외곽 태그의 기저행 위로 지정된 양만큼 태그의 기저라인을 끌어 올린다. 음수도 사용가능하다.
값은 또한 키워드일 수도 있다. 다음의 키워드는 외곽 태그에대한 상대적 위치를 변경한다.
baseline (태그나 외곽 태그의 기저행으로 정렬한다)
middle (외곽 태그의 x-높이(문자 x의 높이)의 반을 기저행으로 태그의 중간지점으로 정렬한다.)
sub (아래첨자(subscript))
super (윗첨자(superscript))
text-top (태그나 외곽 태그의 글꼴의 상단에 정렬한다.)
text-bottom (태그나 외곽 태그의 글꼴의 하단에 정렬한다.)
태그 행에대한 상대적 위치에 영향을 미치는 키워드는 다음과 같다.
top (해당 행의 가장 큰 요소로 요소의 상단에 정렬한다.)
bottom (해당 행의 가장 큰 요소로 요소의 하단에 정렬한다.)
vertical-align 특성은 그림을 정렬하는데 특히 유용하다. 다음은 몇몇 예이다.
IMG.middle { vertical-align: middle }
IMG { vertical-align: 50% }
.exponent { vertical-align: super }
문자변환(Text Transformation)
문법
text-transform: <value>
가능한값
none | capitalize | uppercase | lowercase
초기값
none
적용범위
모든 태그
상속
됨
text-transform 특성으로 다음과 같은 네가지 속성중 하나에의해 문자를 변환할 수 있다.
capitalize (각단어의 첫글자를 대문자로 만든다.)
uppercase (각단어의 모든 글자를 대문자로 만든다.)
lowercase (각단어의 모든 글자를 소문자로 만든다.)
none (초기값)
예:
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
text-transform 특성은 단지 유의할 문자에만 사용해야 한다. 예를들어, 국가명이나 인명을 대문자로 만들기 위해 text-transform 을 사용하는 것은 바람직하지 못하다.
문단정렬(Text Alignment)
문법
text-align: <value>
가능한값
left | right | center | justify
초기값
브로우저에 의존
적용범위
블럭 태그
상속
됨
text-align 특성은 태그내 문장을 정렬하는 것으로 블럭 태그(block-level elements) (P , H1 등등)에만 적용될 수 있다. 이러한 특성은 문단, 제목, 분할에대한 HTML의 ALIGN과 기능적으로 유사하다.
간단한 예는 다음과 같다.
H1 { text-align: center }
P.newspaper { text-align: justify }
들여쓰기(Text Indentation) text-indent 특성은 태그내 첫행의 들여쓰기를 정의하는 것으로 블럭태그(block-level elements) (P , H1 등등)에만 적용될수 있다. 값은 길이(length) 나 백분율(percentage) 이어야 하며 백분율은 외곽 태그 폭에대한 상대 값이다. text-indent 의 가장일반적인 사용은 문단을 들여쓰기 하는 것이다.
P { text-indent: 5em }
줄간격(Line Height) line-height 특성으로 문장 기저행 사이의 공간을 조정할 수 있다. 값이 숫자인 경우 줄간격은 태그내 글꼴 크기에 값을 곱한 값이된다. 백분율인경우 태그내 글꼴 크기에대한 상대값이며, 음수는 허용되지 않는다.
줄간격 또한 글꼴 크기와 함께 글꼴(font)
line-height 특성은 다음과 같이 더블 스페이스에 사용될 수 있다.
P { line-height: 200% }
상자 특성 윗여백(Top Margin) margin-top 특성은 길이(length) 나 백분율(percentage) 을 지정함으로서 각 태그의 윗 여백을 설정한다. 백분율은 외곽태그의 폭에대한 상대값이며 음수도 허용된다.
예를들어, 다음과 같은 규칙은 문서의 윗여백을 제거한다.
BODY { margin-top: 0 }
주의 :
수직여백을 조정하는 것은 최대 여백과 서로 충돌을 일의킬 수 있다.
우측여백(Right Margin) margin-right 특성은 길이(length) 나 백분율(percentage) 을 지정함으로서 각 태그의 우측여백을 설정한다. 음의 여백도 지정할 수 있다.
예:
P.narrow { margin-right: 50% }
주의 :
수직여백을 조정해도 별다른 충돌은 없다.
아래여백(Bottom Margin) margin-bottom 특성은 길이(length) 나 백분율(percentage) 을 지정함으로서 태그의 아래여백을 설정한다. 백분율은 외곽 태그 폭에대한 상대값이며 음수의 여백도 가능하다.
예:
DT { margin-bottom: 3em }
주의 :
수직여백을 조정하는 것은 최대 여백과 서로 충돌을 일의킬 수 있다.
좌측여백(Left Margin) margin-left 특성은 길이(length) 나 백분율(percentage) 을 지정함으로서 태그의 좌측여백을 설정한다. 백분율은 외곽태그 폭에대한 상대 값이며 음수의 여백도 허용된다.
예:
ADDRESS { margin-left: 50% }
주의 :
수직여백을 조정해도 별다른 충돌은 없다.
여백(Margin) margin 특성은 1-4 개의 값을 지정함으로서 태그의 여백을 설정한다. 여기서 각각의 값들은 길이(length) , 백분율(percentage) 또는 자동(auto) 중 하나이다. 백분율은 외곽 태그의 폭에대한 상대 값이며 음의 여백도 허용된다.
만약 4개의 값이 주어지면, 이들은 각각 윗여백, 우측여백, 아래여백, 좌측여백에 적용된다. 하나의 값만 주어지면 모든 여백에 적용된다. 두개나 세개의 값이 주어지면 생략된 값은 반대쪽 여백을 따른다.
여백주기의 예:
BODY { margin: 5em } /* all margins 5em */
P { margin: 2em 4em } /* top and bottom margins 2em,
left and right margins 4em */
DIV { margin: 1em 2em 3em 4em } /* top margin 1em,
right margin 2em,
bottom margin 3em,
left margin 4em */
주의 :
수직 여백을 조정하는 것은 최대 여백을 사용하는 경우 충돌을 일의킬수있지만 수평 여백은 어떠한 충돌도 발생하지 않는다.
margin 특성을 사용함으로서 모든 여백을 설정할 수 있다. 또 다른 방법으로 margin-top margin-bottom margin-left margin-right
위 경계 여백(Top Padding) padding-top 특성은 top border 와 선택자 내용 사이에 얼마의 여백을 둘 것인가를 설정한다. 값은 길이(length) 이거나백분율(percentage) 이다. 백분율은 외곽 태그의 폭에대한 상대값이다. 음의 여백은 허용되지 않는다.
우측 경계 여백(Right Padding) padding-right 특성은 우측 경계(right border) 와 선택자 내용 사이에 얼마의 공백을 둘 것인가를 설정한다. 값은 길이(length) 이거나백분율(percentage) 이다. 백분율은 외곽 태그의 폭에대한 상대값이다. 음의 여백은 허용되지 않 는다.
아래 경계 여백(Bottom Padding) padding-bottom 특성은 아래경계(bottom border) 와 선택자 내용 사이에 얼마의 공백을 둘 것인가를 설정한다. 값은 길이(length) 이거나백분율(percentage) 이다. 백분율은 외곽 태그의 폭에대한 상대값이다. 음의 여백은 허용되지 않 는다.
좌측경계 여백(Left Padding) padding-left 특성은 좌측경계(left border) 와 선택자 내용 사이에 얼마의 공백을 둘 것인가를 설정한다. 값은 길이(length) 이거나백분율(percentage) 이다. 백분율은 외곽 태그의 폭에대한 상대값이다. 음의 여백은 허용되지 않 는다.
경계여백(Padding) padding 특성은 padding-top padding-right padding-bottom padding-left
태그의 경계여백(padding)은 경계(border) 와 태그 내용사이의 공백의 양이다. 한개에서 네개까지의 값이 주어지며 각각의 값은 길이(length) 이거나백분율(percentage) 이다. 백분율은 외곽 태그의 폭에대한 상대값이다. 음의 여백은 허용되지 않 는다.
예를들어 다음과 같은 규칙으로 위 경계 여백을 2em으로, 우 경계 여백을 4em으로 아래 경계 여백을 5em으로, 좌 경계 여백을 4em으로 설정할 수 있다.
BLOCKQUOTE { padding: 2em 4em 5em }
위 경계 폭(Top Border Width)
문법
border-top-width: <value>
가능한값
thin | medium | thick | <length>
초기값
medium
적용범위
모든 태그
상속
안됨
border-top-width 특성은 태그의 위 경계(top border) 폭을 지정하는데 사용된다. 값은 글꼴 크기에 영향을 받지 않는 세개의 키워드중 하나이거나 상대적인 폭을 달성하는데 사용할 수 있는 길이(length) 이다. 음수는 허용되지 않는다.
또한 약식으로 border-top border-width border
우 경계 폭(Right Border Width)
문법
border-right-width: <value>
가능한값
thin | medium | thick | <length>
초기값
medium
적용범위
모든 태그
상속
안됨
border-right-width 특성은 태그의 우 경계(right border) 폭을 지정하는데 사용된다. 값은 글꼴 크기에 영향을 받지 않는 세개의 키워드중 하나이거나 상대적인 폭을 달성하는데 사용할 수 있는 길이(length) 이다. 음수는 허용되지 않는다.
또한 약식으로 border-top border-width border
아래 경계 폭(Bottom Border Width)
문법
border-bottom-width: <value>
가능한값
thin | medium | thick | <length>
초기값
medium
적용범위
모든 태그
상속
안됨
border-bottom-width 특성은 태그의 아래경계(bottom border) 폭을 지정하는데 사용된다. 값은 글꼴 크기에 영향을 받지 않는 세개의 키워드중 하나이거나 상대적인 폭을 달성하는데 사용할 수 있는 길이(length) 이다. 음수는 허용되지 않는다.
또한 약식으로 border-top border-width border
좌 경계 폭(Left Border Width)
문법
border-left-width: <value>
가능한값
thin | medium | thick | <length>
초기값
medium
적용범위
모든 태그
상속
안됨
border-left-width 특성은 태그의 좌 경계(left border) 폭을 지정하는데 사용된다. 값은 글꼴 크기에 영향을 받지 않는 세개의 키워드중 하나이거나 상대적인 폭을 달성하는데 사용할 수 있는 길이(length) 이다. 음수는 허용되지 않는다.
또한 약식으로 border-top border-width border
경계 폭(Border Width)
문법
border-width: <value>
가능한값
[ thin | medium | thick | <length> ]{1,4}
초기값
정의되지 않음
적용범위
모든 태그
상속
안됨
border-width 특성은 하나에서 네개의 값을 지정함으로서 경계 폭을 설정하는데 사용된다. 각각의 값은 키워드이거나 길이(length) 이며 음수는 허용되지 않는다.
네개의 값이 주어지면 각각 위 경계 폭, 우경계 폭, 아래경계 폭, 좌경계 폭의 순으로 적용된다. 하나의 값이 주어지면 모든 방면에 같은 값이 적용된다. 두개 또는 세개의 값이 주어지면 빠진 값은 반대측에서 취해진다.
이 특성은 border-top-width border-right-width border-bottom-width border-left-width
또한 간단하게 border
경계 색상(Border Color)
문법
border-color: <value>
가능한값
<color> {1,4}
초기값
The value of the color
적용범위
모든 태그
상속
안됨
border-color 특성은 태그 경계(border) 의 색상을 설정한다. 하나에서 네개의 색상 값(color values) 이 지정된다. 네개가 지정되면 각각 위 경계, 우 경계, 아래 경계, 좌 경계의 색상으로 지정된다. 하나의 값만 지정되면 모든 경계가 같은 값으로 설정된다. 두개 또는 세개가 주어지면 빠진 값은 반대측 경계값을 취한다.
또한 약식으로 border
경계 스타일(Border Style)
문법
border-style: <value>
가능한값
[ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
초기값
none
적용범위
모든 태그
상속
안됨
border-style 특성은 태그 경계(border) 의 스타일을 설정하는데 사용된다. 이 특성이 지정되어야만 경계를 볼 수 있다.
하나에서 네개의 키워드가 지정된다. 네개가 지정되면 각각 위 경계, 우 경계, 아래 경계, 좌 경계의 스타일로 지정된다. 하나의 값만 지정되면 모든 경계가 같은 값으로 설정된다. 두개 또는 세개가 주어지면 빠진 값은 반대측 경계값을 취한다.
또한 약식으로 border
위 경계(Top Border) border-top 특성은 태그 위 경계의 폭(width) , 스타일(style) 과 색상(color) 을 설정하는데 사용되는 약식표현이다.
단지 하나의 border-style
또한 약식으로 border
우 경계(Right Border) border-right 특성은 태그 우 경계의 폭(width) , 스타일(style) 과 색상(color) 을 설정하는데 사용되는 약식표현이다.
단지 하나의 border-style
또한 약식으로 border
아래 경계(Bottom Border) border-bottom 특성은 아래 경계의 폭(width) , 스타일(style) 과 색상(color) 을 설정하는데 사용되는 약식표현이다.
단지 하나의 border-style
또한 약식으로 border
좌 경계(Left Border) border-left 특성은 좌 경계의 폭(width) , 스타일(style) 과 색상(color) 을 설정하는데 사용되는 약식표현이다.
단지 하나의 border-style
또한 약식으로 border
경계(Border) border 특성은 태그 경계의 폭(width) , 스타일(style) 과 색상(color) 을 설정하는데 사용되는 약식표현이다.
경계를 선언하는 간단한 예는 다음과 같다.
H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
border 특성은 단지 모든 네 방향의 경계에대해서만 설정될 수 있다. 즉, 하나의 경계폭과 경계 스타일만 주어져야 한다. 태그의 네 방향 경계에 서로 다른 값을 주기위해서는 border-top border-right border-bottom border-left border-color border-width border-style border-top-width border-right-width border-bottom-width border-left-width
폭(Width) 각각의 블럭 태그(block-level) 나 대치 태그(replaced element)에 길이(length) , 백분율(percentage) 이나 auto 와 같은 것으로 지정된 폭이 지정될 수 있다. (대치 태그(replaced element)는 본질적인 속성이나 차원이 알려진 태그이다. HTML에서 대치 태그는 IMG , INPUT , TEXTAREA , SELECT 와 OBJECT 가 있다.) width 특성에대한 초기 값은 auto 이며, 태그의 본래의 폭을 자동으로 판정한다(예, 태그 자체의 폭, 예를들어 그림의 폭). 백분율은 외곽 태그의 폭에대한 상대값이며 음의 값은 허용되지 않는다.
이 특성으로 submit과 reset 버튼과 같은 INPUT 태그의 공통 폭을 지정할 수 있다.
INPUT.button { width: 10em }
높이(Height)
문법
height: <value>
가능한값
<length> | auto
초기값
auto
적용범위
블럭 태그와 대치 태그
상속
안됨
각각의 블럭 태그(block-level) 나 대치 태그(replaced element)에 길이(length) 이나 auto 와 같은 것으로 지정된 높이가 지정될 수 있다. (대치 태그(replaced element)는 본질적인 속성이나 차원이 알려진 태그이다. HTML에서 대치 태그는 IMG , INPUT , TEXTAREA , SELECT 와 OBJECT 가 있다.) height 특성에대한 초기 값은 auto 이며, 태그의 본래 높이를 자동으로 판정한다(예, 태그 자체의 높이, 예를들어 그림의 높이). 음의 값은 허용되지 않는다.
width height 특성은 그림의 크기를 조정하는데 사용될 수 있다.
IMG.foo { width: 40px; height: 40px }
대부분의 경우에 그림 편집 프로그램을 이용해서 그림의 크기를 조정할 것을 권고한다. 왜냐하면 브로우저가 고 품질로 그림을 조절하지 못하는 경우가 있으며, 크기가 줄어든 그림때문에 사용자가 불필요하게 큰 파일을 내려받는 경우가 있기 때문이다. 그러나 사용자의 시스템상의 문제를 극복하기위해 사용자 정의 스타일에 사용할 경우 width 와 height 특성은 유용한 옵션이다.
Float
문법
float: <value>
가능한값
left | right | none
초기값
none
적용범위
모든 태그
상속
안됨
float 특성으로 저자는 태그 주변의 문장을 랩(wrap)시킬 수 있다. 이것은 HTML 3.2 에서 IMG 의 ALIGN=left , ALIGN=right 와 목적상 동일하다. 그러나 CSS1은 모든 태그에대한 "float"를 허용한다. 반면에 HTML 3.2 에서는 images 와 tables 에서만 허용하고 있다.
Clear
문법
clear: <value>
가능한값
none | left | right | both
초기값
none
적용범위
모든 태그
상속
안됨
clear 특성은 태그의 어떤 측에 floating 태그를 허용할 것인지를 지정한다. left 값으로 임의의 floating 태그 아래의 태그가 floating 태그의 좌측으로 이동한다. right 도 우측의 floating 태그에대해 유사하게 동작한다. 다른 값은 none 이며 이 것이 초기 값이다. 마지막 both 는 floating 태그 아래의 태그를 floating 태그 양측으로 이동 시킨다. 이 특성은 기능적으로 HTML 3.2 의 <BR CLEAR=left|right|all|none> 와 유사하지만 CSS1은 모든 태그에대해 적용된다.
분류 특성(Classification Properties) 화면출력(Display)
문법
display: <value>
가능한값
block | inline | list-item | none
초기값
block
적용범위
모든 태그
상속
안됨
display 특성은 다음 네개의 값중 하나로 태그를 정의한다.
block (태그 앞뒤에에서 개행)
inline (태그 앞뒤에서 개행하지 않음)
list-item (목록 표식이 추가되는 점을 제외하고 block 과 동일)
none (화면출력 없음)
각각의 태그들은 전형적으로 HTML 사양에서 제안된 표현법에따라 브로우저에의해 내정된 display 값을 갖는다.
display 특성은 부적당한 형식을 갖는 태그들을 화면에 출력시킬 수 있기때문에 위험스러울 수있다. none 값을 사용하는 것은 지정된 태그와 이 태그 내의 태그들을 출력하지 않게된다.
공백(Whitespace)
문법
white-space: <value>
가능한값
normal | pre | nowrap
초기값
normal
적용범위
블럭 태그
상속
됨
white-space 특성은 태그 내의 공백을 어떻게 처리할 것인가를 결정한다. 이 특성은 다음 세가지 값중 하나를 갖는다.
normal (여러개의 공백을 하나로 만든다.)
pre (여러개의 공백을 그대로 출력한다.)
nowrap (<BR> 태그 없이는 랩(line wrap)을 허용하지 않는다.)
목록 형식(List Style Type)
문법
list-style-type: <value>
가능한값
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
초기값
disc
적용범위
display list-item 을 갖는 태그
상속
됨
list-style-type 특성은 목록 표식의 형식을 지정한다. list-style-image none 이거나 그림 적재가 사용되지 않는다면 list-style-type 특성이 사용된다.
예:
LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
목록 그림(List Style Image)
문법
list-style-image: <value>
가능한값
<url> | none
초기값
none
적용범위
display list-item 을 갖는 태그
상속
됨
list-style-image 특성은 그림 적재를 사용중일 때 목록 표식으로 사용될 그림을 지정하며 list-style-type
예:
UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }
목록 위치(List Style Position)
문법
list-style-position: <value>
가능한값
inside | outside
초기값
outside
적용범위
display list-item 을 갖는 태그
상속
됨
list-style-position 특성은 값으로 inside 나 outside 를 취하며 outside 가 내정치이다. 이 특성은 목록에대한 목록 표시를 어디에 둘것인가를 결정한다. 만약 inside 가 사용된다면 그 행은 들여쓰기 없이 목록 표식 아래에 랩(wrap)될 것이다. 표시한 예를 보면 다음과 같다.
Outside 표현:
* 목록 1
목록의 두번째 줄
Inside rendering:
* 목록 1
목록의 두번째 줄
목록 스타일(List Style) list-style 특성은 list-style-type list-style-position list-style-image
예:
LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside }
단위(Units) 길이 단위(Length Units) 길이 값은 + (조건부)나 - 에 이어 숫자나, 단위를 나타내는 두 문자로된 약어를 이어서 쓴다. 길이는 어떠한 공백도 포함해서는 안된다. 예를들어 1.3 em 는 타당한 길이가 아니지만 1.3em 은 타당한 값이다. 0 은 단위를 필요로 하지 않는다.
CSS1에서는 상대적 , 절대적 길이가 지원된다. 상대적 단위는 다른 길이 특성에대한 상대적 길이를 나타내며 서로 다른 매체에대해 조정하기 용이하므로 선호된다. 다음과 같은 상대적 단위를 사용할 수 있다.
em (ems, 태그 글꼴의 높이)
ex (x-height, 문자 "x"의 높이)
px (pixels, 캔바스 해상도에 상대적인)
절대적 단위는 출력 매체에 크게 의존하며 따라서 상대적 단위보다 덜 유용한다. 다음과 같은 절대적 단위를 사용할 수 있다.
in (inches; 1in=2.54cm)
cm (centimeters; 1cm=10mm)
mm (millimeters)
pt (points; 1pt=1/72in)
pc (picas; 1pc=12pt)
백분율(Percentage Units) 백분율은 + (조건부)나 - 에 이어 숫자, %를 이어서 쓴다. 백분율 값에는 어떠한 공백도 포함되어서는 안된다.
백분율은 각각의 특성에대해 정의된 다른 값에대한 상대 값이다. 아주 종종 백불율 값은 태그내 글꼴 크기의 상대값이다.
색상표(Color Units) 색상은 키워드나 숫자로 구성된 RGB 값이다.
16개의 키워드는 Windows VGA 팔레트에서 취해지며 각각 하늘색(aqua) , 검정색(black) , 파란색(blue) , 분홍색(fuchsia) , 회색(gray) , 녹색(green) , 연두색(lime) , 밤색(maroon) , 청색(navy) , 황토색(olive) , 자주색(purple) , 빨간색(red) , 은색(silver) , 군청색(teal) , 흰색(white) , 노란색(yellow) 이다.
RGB 색상은 다음 네가지 방법중 하나의 방법으로 표현된다
#rrggbb (예 , #00cc00 )
#rgb (예 , #0c0 )
rgb(x,x,x) 여기서 x 는 0-255 사이의 값이다.(예 , rgb(0,204,0) )
rgb(y%,y%,y%) 여기서 y 는 0.0-100.0사이의 값이다.(예 , rgb(0%,80%,0%) )
위의 모든 예는 동일한 색상을 지정하고 있다.
Douglas R. Jacobson이 빠르게 참조할 수 있는 RGB 색상 표 (61 kB)를 만들었다.
URLs URL 값은 url(foo) 에의해 주어지며 여기서 foo 는 URL이다. URL은 작은 따옴표, 큰 따옴표로 감쌀 수 있으며, URL의 앞뒤에 공백을 포함할 수 있다.
URL 내의 괄호, 쉼표, 공백, 작은 따옴표, 큰 따옴표는 역슬래쉬에의해 Escape되어야 한다. 부분적인 URL은 HTML 소스가 아니라 Style Sheet 소스에대한 상대 URL로 해석된다.
예:
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url("Ulalume".png) } /* quotes in URL escaped */ 
(