[Images]
이 페이지의 본문중 나오는 예제 이미지들 입니다.
list1.gif : 
list2.gif : 
Cascading Style Sheets. 이것은 페이지 코딩을 돕는 레퍼런스입니다.
이 페이지는 표준을 준수하여 만들었지만,
모질라 계열에서 '조금 더' 예쁘게 보입니다.
[END] 키를 눌러 페이지 최 하단으로 이동하면 목차를 보실 수 있으며,
[TAB] 키를 누르면 순서대로 보실 수 있습니다.
피드백은 [이곳]을 이용해주세요.
<head>
1. <style>@import url(index.css);</style>
2. <link rel="stylesheet" type="text/css" href="index.css">
3. <style type="text/css">body {background-color: #FFFFFF;}</style>
</head>
4. <body style="background-color: #FFFFFF;">
1. "font-weight: normal;"
2. "font-weight: bold;"
3. "font-weight: bolder;"
4. "font-weight: lighter;"
5. "font-weight: 100"
6. "font-weight: 200"
7. "font-weight: 300"
8. "font-weight: 400"
9. "font-weight: 500"
10. "font-weight: 600"
11. "font-weight: 700"
12. "font-weight: 800"
13. "font-weight: 900"
14. "font-weight: lighter;"
0. Default Size
1. "font-size: 12pt;"
"font-size: 24pt;"
2. "font-size: 1em;"
"font-size: 2em;"
3. "font-size: 16px;"
"font-size: 32px;"
4. "font-size: 0.43cm;"
"font-size: 0.86cm;"
5. "font-size: 4.3mm;"
"font-size: 8.6mm;"
6. "font-size: 0.17in;"
"font-size: 0.34in;"
7. "font-size: 100%;"
"font-size: 200%;"
1. "font-variant: normal;" : Cascading Style Sheets
2. "font-variant: small-caps;" : Cascading Style Sheets
1. "font: italic 900 small-caps 30px 바탕,굴림;"
1. "text-align: left;"
=> Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
2. "text-align: center;"
=> Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
3. "text-align: right;"
=> Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
4. "text-align: justify;"
=> Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
1. "text-indent: 5px;" : Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
2. "text-indent: 3em;" : Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
3. "text-indent: 5cm;" : Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
4. "text-indent: 10%;" : Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
1. "text-decoration: none;"
2. "text-decoration: underline;"
3. "text-decoration: overline;"
4. "text-decoration: line-through;"
5. "text-decoration: line-through overline underline;"
6. "text-decoration: blink;"
1. "text-transform: none;"
2. "text-transform: uppercase;"
3. "text-transform: lowercase;"
4. "text-transform: capitalize;"
"letter-spacing: 1em;"
"word-spacing: 1em;"
1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80%,80%,80%);"
4. "color: rgb(111,111,999);"
1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80%,80%,80%);"
1. "background-repeat: repeat;"
2. "background-repeat: repeat-x;"
3. "background-repeat: repeat-y;"
4. "background-repeat: no-repeat;"
1. "background-position: 10% 10%;"
2. "background-position: 1cm 1cm;"
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"
1. "background-attachment: scroll;"
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').
Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.
Example(s):
This example creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
User agents may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. See the section on conformance for details.
2. "background-attachment: fixed;"
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').
Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.
Example(s):
This example creates an infinite vertical band that remains "glued" to the viewport when the element is scrolled.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
User agents may treat 'fixed' as 'scroll'. However, it is recommended they interpret 'fixed' correctly, at least for the HTML and BODY elements, since there is no way for an author to provide an image only for those browsers that support 'fixed'. See the section on conformance for details.
1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80%,80%,80%);"
1. "margin: 0; background-color: #EEEEEE;"
2. "margin: 50px 50px 50px 50px; background-color: rgb(80%,80%,80%);"
3. "margin: 0 0 0 -30px; background-color: rgb(80%,80%,80%);"
1. "border-style: none;"
2. "border-style: solid;"
3. "border-style: dotted;"
4. "border-style: dashed;"
5. "border-style: double;"
6. I"border-style: groove;"
7. "border-style: ridge;"
8. "border-style: inset;"
9. "border-style: outset;"
10. "border-style: solid dashed dotted outset;"
1. "border-width: 1px 1px 1px 1px;"
2. "border-width: 0 0 0 0; border-style: solid;"
3. "border-width: 1px 1px 1px 1px; border-style: solid;"
4. "border-width: 3px; border-style: solid;"
5. "border-width: 3mm; border-style: solid;"
6. "border-width: 1px 1cm 1mm 1in; border-style: solid;"
7. "border-width: thin; border-style: solid;"
8. "border-width: medium; border-style: solid;"
9. "border-width: thick; border-style: solid;"
1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"
1. "float: none;" Cascading Style Sheets
2. "float: left;" Cascading Style Sheets
3. "float: right;" Cascading Style Sheets
4.
"float: left;"
Cascading Style Sheets
Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
5. Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
"float: right;"
Cascading Style Sheets
Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets Cascading Style Sheets
1. Cascading Style Sheets Cascading Style Sheets
2. Cascading Style Sheets Cascading Style Sheets
3. Cascading Style Sheets Cascading Style Sheets
1. "visibility: visible;" : Cascading Style Sheets
2. "visibility: hidden;" :
3. "visibility: collapse;" : Cascading Style Sheets
1. cursor: auto;
2. cursor: crosshair;
3. cursor: default;
4. cursor: pointer;
5. cursor: move;
6. cursor: e-resize;
7. cursor: ne-resize;
8. cursor: nw-resize;
9. cursor: n-resize;
10. cursor: se-resize;
11. cursor: sw-resize;
12. cursor: s-resize;
13. cursor: w-resize;
14. cursor: text;
15. cursor: wait;
16. cursor: help;
17. cursor: url(list1.gif);
1. "text-shadow: 0.2em 0.2em;"
2. "text-shadow: 3px 3px 5px red;"
3. "text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px;"
1. "font-stretch: wider;"
2. "font-stretch: narrower;"
3. "font-stretch: ultra-condensed;"
4. "font-stretch: extra-condensed;"
5. "font-stretch: condensed;"
6. "font-stretch: semi-condensed;"
7. "font-stretch: semi-expanded;"
8. "font-stretch: expanded;"
9. "font-stretch: extra-expanded;"
10. "font-stretch: ultra-expanded;"
W3C CSS 활동 페이지
http://www.w3.org/Style/CSS
W3C CSS 테스트 수트
http://www.w3.org/Style/CSS/Test/
W3C CSS 오류 검사기(Validity Checker)
http://jigsaw.w3.org/css-validator
[IE Only] Cascading Style Sheets, 레벨 1, 번역자 : 이태호(http://trio.co.kr/),
http://trio.co.kr/webrefer/css1/css1index.html
Cascading Style Sheets, 레벨 2, 번역자 : 이태호(http://trio.co.kr/),
http://trio.co.kr/webrefer/css2/cover.html
[IE Only] HTML and DHTML Reference
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
Cascading Style Sheets Central
http://devedge.netscape.com/central/css/
CSS2 Quick Reference Sidebar tab
http://devedge.netscape.com/toolbox/sidebars/
스타일 시트 레퍼런스 가이드
http://style.webreview.com
WDG CSScheck
http://www.htmlhelp.com/tools/csscheck
CSS2 - IE6 vs Mozilla 1.0
http://www.designdetector.com/tips/CSS2/IE6_vs_Mozilla1.0.html
Cascading Style Sheets: The Definitive Guide
http://www.oreilly.com/catalog/css/
Cascading Style Sheets: The Definitive Guide - Online Book
http://safari.oreilly.com/1565926226
Cascading Style Sheets: The Definitive Guide - 한글 번역서
http://www.hanbitbook.co.kr/look.htm?book_code=000726-00011
font
font-size
font-weight
font-style
font-variant
text-align
text-indent
text-decoration
text-transform
color
background-color
background-image
background-repeat
background-position
background-attachment
background
border-style
border-width
border
list-style-type
list-style-image
list-style-position
list-style