CSS 규격

CSS (Cascading Style Sheets) Level 1

CSS는 일찍이 HTML의 타락(문서의 구조가 아닌 표현과 관련된 태그로 오염되는)과 웹디자이너의 아픔과 고통을 덜고자 탄생했다.
CSS는 HTML을 보완하고, 사이트의 전체적인 스타일과 디자인을 통일성 있게 계획하고 제작할 수 있도록 도와주는 W3C의 표준입니다.
CSS 명세 … http://www.w3.org/Style/CSS/
CSS1 부라우저 호환성 표 … http://www.ddj.com/webreview/style/css1/charts/mastergrid.shtml
아래의 Form Value Example에서 "속성값1 | 속성값2" 로 적어준 것에서 | 는 or 의 의미로 사용하였다. 즉, 여러 속성값 중에 하나들 선택하여 적용할 수 있음을 뜻한다. || 는 속성값을 적용하는 또 다른 방법을 보여준다.

Cascading Style Sheet Level 1 (CSS1) Properties

Properties Set	Property:	Korean Name	Form Value Example
Font 글꼴	font-family:	글꼴종류	font-family: family-name | generic-family || , ,"",
	font-style:	글꼴체	font-style: normal | italic | oblique
	font-variant:	글꼴변형	font-variant: normal | small-cap
	font-weight:	글꼴굵기	font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
	font-size:	글꼴크기	font-size: xx-small | x-small | small | medium | large | x-large | xx- large || larger | smaller || length
	font:	글꼴	font : font-style font-variant font-weight font-size line-height font-family
Color and Background 색상과 배경	color:	색상	color: #000000 | black
	background-color:	배경색	background-color: #000000 | black
	background-image:	배경그림	background-image: url(image.gif)
	background-repeat:	배경그림 반복	background-repeat: repeat|repeat-x|repeat-y|no-repeat
	background-attachment:	배경의 성격	background-attachment: scroll | fixed
	background-position:	배경그림 위치	background-position: length || top left || top|center|bottom|left|center|right
	background:	배경	background: background-color background-image background-repeat background-attachment background-position
Text 문장	word-spacing:	낱말간격	word-spacing: normal | length
	letter-spacing:	문자간격	letter-spacing: normal | length
	text-decoration:	장식	text-decoration: none | underline | overline | line-through | blink
	vertical-align:	수직정렬	vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage
	text-transform:	문자변환	text-transform: none | capitalize | uppercase | lowercase
	text-align:	수평정렬	text-align: left | right | center | justify
	text-indent:	들여쓰기	text-indent: length
	line-height:	줄간격	line-height: normal | length
Box 바깥여백	margin-top:
	margin-right:
	margin-bottom:
	margin-left:
	margin:	바깥여백	DIV { margin: top right bottom left }
Box 안여백	padding-top:
	padding-right:
	padding-bottom:
	padding-left:
	padding:	안여백	DIV { margin: top right bottom left }
Box 테두리선	border-top-width:
	border-right-width:
	border-bottom-width:
	border-left-width:
	border-width:	선굵기	border-width: thin | medium | thick | length || top rigth bottom left
	border-color:	선색상	border-color: color || top rigth bottom left
	border-style:	선형태	border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset || top rigth bottom left
	border-top:
	border-right:
	border-bottom:
	border-left:
	border:	테두리선	border: border-widht border-style color
Box 크기	width:	너비	width: length | percentage | auto
	height:	높이	height: length | percentage | auto
Box 배치	float:	어울림	float: left | right | none
	clear:	배척함	clear: none | left | right | both
Classification Properties 문단형식	display:	표시	display: block | inline | list-item | none
	white-space:	공백	white-space: normal | pre | nowrap
	list-style-type:	list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
	list-style-image:	list-style-image: url(image.gif) | none
	list-style-position:	list-style-position: inside | outside
	list-style:	목록	list-style: list-style-type list-style-position || url(image)

CSS Level 2

CSS2 Reference … http://www.w3schools.com/css/css_reference.asp

CSS2 Reference

속성 링크를 클릭하면 해당 속성의 유용한 정보를 볼 수 있습니다

Browser support :  NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Background Border Classification Dimension Font

Generated Content List and Marker Margin Outlines Padding

Positioning Table Text

Background

On-line examples

Property	Description	Values	NN	IE	W3C
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position	6.0	4.0	CSS1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed	6.0	4.0	CSS1
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent	4.0	4.0	CSS1
background-image	Sets an image as the background	url none	4.0	4.0	CSS1
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	6.0	4.0	CSS1
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat	4.0	4.0	CSS1

Border

On-line examples

Property	Description	Values	NN	IE	W3C
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color	4.0	4.0	CSS1
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color	6.0	4.0	CSS1
border-bottom-color	Sets the color of the bottom border	border-color	6.0	4.0	CSS2
border-bottom-style	Sets the style of the bottom border	border-style	6.0	4.0	CSS2
border-bottom-width	Sets the width of the bottom border	thin medium thick length	4.0	4.0	CSS1
border-color	Sets the color of the four borders, can have from one to four colors	color	6.0	4.0	CSS1
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color	6.0	4.0	CSS1
border-left-color	Sets the color of the left border	border-color	6.0	4.0	CSS2
border-left-style	Sets the style of the left border	border-style	6.0	4.0	CSS2
border-left-width	Sets the width of the left border	thin medium thick length	4.0	4.0	CSS1
border-right	A shorthand property for setting all of the properties for the right border in one declaration	border-right-width border-style border-color	6.0	4.0	CSS1
border-right-color	Sets the color of the right border	border-color	6.0	4.0	CSS2
border-right-style	Sets the style of the right border	border-style	6.0	4.0	CSS2
border-right-width	Sets the width of the right border	thin medium thick length	4.0	4.0	CSS1
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset	6.0	4.0	CSS1
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color	6.0	4.0	CSS1
border-top-color	Sets the color of the top border	border-color	6.0	4.0	CSS2
border-top-style	Sets the style of the top border	border-style	6.0	4.0	CSS2
border-top-width	Sets the width of the top border	thin medium thick length	4.0	4.0	CSS1
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length	4.0	4.0	CSS1

Classification

On-line examples

Property	Description	Values	NN	IE	W3C
clear	Sets the sides of an element where other floating elements are not allowed	left right both none	4.0	4.0	CSS1
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	6.0	4.0	CSS2
display	Sets how/if an element is displayed	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	4.0	4.0	CSS1
float	Sets where an image or a text will appear in another element	left right none	4.0	4.0	CSS1
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4.0	4.0	CSS2
visibility	Sets if an element should be visible or invisible	visible hidden collapse	6.0	4.0	CSS2

Dimension

On-line examples

Property	Description	Values	NN	IE	W3C
height	Sets the height of an element	auto length %	6.0	4.0	CSS1
line-height	Sets the distance between lines	normal number length %	4.0	4.0	CSS1
max-height	Sets the maximum height of an element	none length %			CSS2
max-width	Sets the maximum width of an element	none length %			CSS2
min-height	Sets the minimum height of an element	length %			CSS2
min-width	Sets the minimum width of an element	length %			CSS2
width	Sets the width of an element	auto % length	4.0	4.0	CSS1

Font

On-line examples

Property	Description	Values	NN	IE	W3C
font	A shorthand property for setting all of the properties for a font in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	4.0	4.0	CSS1
font-family	A prioritized list of font family names and/or generic family names for an element	family-name generic-family	4.0	3.0	CSS1
font-size	Sets the size of a font	xx-small x-small small medium large x-large xx-large smaller larger length %	4.0	3.0	CSS1
font-size-adjust	Specifies an aspect value for an element that will preserve the x-height of the first-choice font	none number			CSS2
font-stretch	Condenses or expands the current font-family	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded			CSS2
font-style	Sets the style of the font	normal italic oblique	4.0	4.0	CSS1
font-variant	Displays text in a small-caps font or a normal font	normal small-caps	6.0	4.0	CSS1
font-weight	Sets the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4.0	4.0	CSS1

Generated Content

Property	Description	Values	NN	IE	W3C
content	Generates content in a document. Used with the :before and :after pseudo-elements	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote			CSS2
counter-increment	Sets how much the counter increments on each occurrence of a selector	none identifier number			CSS2
counter-reset	Sets the value the counter is set to on each occurrence of a selector	none identifier number			CSS2
quotes	Sets the type of quotation marks	none string string			CSS2

List and Marker

On-line examples

Property	Description	Values	NN	IE	W3C
list-style	A shorthand property for setting all of the properties for a list in one declaration	list-style-type list-style-position list-style-image	6.0	4.0	CSS1
list-style-image	Sets an image as the list-item marker	none url	6.0	4.0	CSS1
list-style-position	Sets where the list-item marker is placed in the list	inside outside	6.0	4.0	CSS1
list-style-type	Sets the type of the list-item marker	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	4.0	4.0	CSS1
marker-offset		auto length			CSS2

Margin

On-line examples

Property	Description	Values	NN	IE	W3C
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left	4.0	4.0	CSS1
margin-bottom	Sets the bottom margin of an element	auto length %	4.0	4.0	CSS1
margin-left	Sets the left margin of an element	auto length %	4.0	3.0	CSS1
margin-right	Sets the right margin of an element	auto length %	4.0	3.0	CSS1
margin-top	Sets the top margin of an element	auto length %	4.0	3.0	CSS1

Outlines

Property	Description	Values	NN	IE	W3C
outline	A shorthand property for setting all the outline properties in one declaration	outline-color outline-style outline-width			CSS2
outline-color	Sets the color of the outline around an element	color invert			CSS2
outline-style	Sets the style of the outline around an element	none dotted dashed solid double groove ridge inset outset			CSS2
outline-width	Sets the width of the outline around an element	thin medium thick length			CSS2

Padding

On-line examples

Property	Description	Values	NN	IE	W3C
padding	A shorthand property for setting all of  the padding properties in one declaration	padding-top padding-right padding-bottom padding-left	4.0	4.0	CSS1
padding-bottom	Sets the bottom padding of an element	length %	4.0	4.0	CSS1
padding-left	Sets the left padding of an element	length %	4.0	4.0	CSS1
padding-right	Sets the right padding of an element	length %	4.0	4.0	CSS1
padding-top	Sets the top padding of an element	length %	4.0	4.0	CSS1

Positioning

On-line examples

Property	Description	Values	NN	IE	W3C
bottom	Sets how far the bottom edge of an element is above/below the bottom edge of the parent element	auto % length	6.0	5.0	CSS2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	6.0	4.0	CSS2
left	Sets how far the left edge of an element is to the right/left of the left edge of the parent element	auto % length	4.0	4.0	CSS2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	6.0	4.0	CSS2
right	Sets how far the right edge of an element is to the left/right of the right edge of the parent element	auto % length		5.0	CSS2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4.0	4.0	CSS2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4.0	4.0	CSS1
z-index	Sets the stack order of an element	auto number	6.0	4.0	CSS2

Table

Property	Description	Values	NN	IE	W3C
border-collapse	Sets the border model of a table	collapse separate		5.0	CSS2
border-spacing	Sets the distance between the borders of adjacent cells (only for the "separated borders" model)	length length			CSS2
caption-side	Sets the position of the caption according to the table	top bottom left right			CSS2
empty-cells	Sets whether cells with no visible content should have borders or not (only for the "separated borders" model)	show hide	6.2		CSS2
table-layout	Sets the algorithm used to lay out the table	auto fixed		5.0	CSS2

Text

On-line examples

Property	Description	Possible Values	NN	IE	W3C
color	Sets the color of a text	color	4.0	3.0	CSS1
direction	Sets the text direction	ltr rtl			CSS2
letter-spacing	Increase or decrease the space between characters	normal length	6.0	4.0	CSS1
text-align	Aligns the text in an element	left right center justify	4.0	4.0	CSS1
text-decoration	Adds decoration to text	none underline overline line-through blink	4.0	4.0	CSS1
text-indent	Indents the first line of text in an element	length %	4.0	4.0	CSS1
text-shadow		none color length
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	4.0	4.0	CSS1
unicode-bidi		normal embed bidi-override		5.0	CSS2
white-space	Sets how white space inside an element is handled	normal pre nowrap	4.0	5.5	CSS1
word-spacing	Increase or decrease the space between words	normal length	6.0	6.0	CSS1

속성 120여개 (알파벳순)

azimuth:
background:
background-attachment:
background-color:
background-image:
background-position:
background-repeat:
border:
border-collapse:
border-color:
border-spacing:
border-style:
border-top:
border-right:
border-bottom:
border-left:
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
border-width:
bottom:
caption-side:
clear:
clip:
color:
content:
counter-increment:
counter-reset:
cue:
cue-after:
cue-before:
cursor:
direction:
display:
elevation:
empty-cells:
float:
font:
font-family:
font-size:
font-size-adjust:
font-stretch:
font-style:
font-variant:
font-weight:
height:
left:
letter-spacing:
line-height:
list-style:
list-style-image:
list-style-position:
list-style-type:
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
marker-offset:
marks:
max-height:
max-width:
min-height:
min-width:
orphans:
outline:
outline-color:
outline-style:
outline-width:
overflow:
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
page:
page-break-after:
page-break-before:
page-break-inside:
pause:
pause-after:
pause-before:
pitch:
pitch-range:
play-during:
position:
quotes:
richness:
right:
size:
speak:
speak-header:
speak-numeral:
speak-punctuation:
speech-rate:
stress:
table-layout:
text-align:
text-decoration:
text-indent:
text-shadow:
text-transform:
top:
unicode-bidi:
vertical-align:
visibility:
voice-family:
volume:
white-space:
widows:
width:
word-spacing:
z-index: