홈페이지 제작시 사용되는 스타일시트(CSS) 정리

홈페이지 제작시 사용되는 스타일시트(CSS) 정리

[font-style]
1. 'font-style: normal;'
2. 'font-style: italic;'
3. 'font-style: oblique;'

[font-weight]
1. "font-weight: normal;"
2. "font-weight: bold;"
3. "font-weight: bolder;"
4. "font-weight: lighter;"
5. "font-weight: 100"
6. "font-weight: 200"

[font-size]
1. "font-size: 12pt;"
2 "font-size: 16px;"
3 "font-size: 0.86cm;"
4 "font-size: 8.6mm;"
5 "font-size: 0.34in;"
6 "font-size: 200%;"

[font-variant]
1. "font-variant: normal;" : Cascading Style Sheets
2. "font-variant: small-caps;" : Cascading Style Sheets

[text-align]
1. "text-align: left;"
2. "text-align: justify;"

[text-indent]
1. "text-indent: 5px;"
2. "text-indent: 3em;"
3 "text-indent: 5cm;"  

[text-decoration]
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;"

[text-transform]
1. "text-transform: none;"
2. "text-transform: uppercase;" // 소문자를 대문자로..
3. "text-transform: lowercase;" // 대문자를 소문자로..
4. "text-transform: capitalize;" // 첫 글자만 대문자로..

[letter-spacing]
1 "letter-spacing: 1em;"

[word-spacing]
1 "word-spacing: 1em;"

[color]
1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80%,80%,80%);"
4. "color: rgb(111,111,999);"

[background-color]
1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80%,80%,80%);"

[background-image]
1. "background-image: url(list1.gif)"

[background-repeat]
1 "background-repeat: repeat;"
2. "background-repeat: repeat-x;"
3. "background-repeat: repeat-y;"
4. "background-repeat: no-repeat;"

[background-position]
1. "background-position: 10% 10%;"
2. "background-position: 1cm 1cm;"
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"

[background-attachment]
1. "background-attachment: scroll;"
2. "background-attachment: fixed;"

[background]
1. "background: url(list1.gif) yellow no-repeat top left"

[padding]
1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80%,80%,80%);"

[margin]
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%);"

[border-style]
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;"

[border-width]
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;"

[border]
1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"

[float]
1. "float: left;"

[visibility]
1. "visibility: visible;"
2. "visibility: hidden;"
3. "visibility: collapse;"

[list-style-type]
1. "list-style-type: default;"
2. "list-style-type: disc;"
3. "list-style-type: circle;"
4. "list-style-type: square;"
5. "list-style-type: decimal;"
6. "list-style-type: decimal-leading-zero;"
7. "list-style-type: lower-roman;"
8. "list-style-type: upper-roman;"
9. "list-style-type: lower-greek;"
10."list-style-type: lower-alpha;"
11."list-style-type: upper-latin;"
12."list-style-type: none;"  

[list-style-image]
1. "list-style-image: url(list1.gif)"
2. "list-style-image: url(list2.gif)"  

[list-style-position]
1. "list-style-position: inside"
2. "list-style-position: outside"  

[list-style]
1. "list-style: url(list1.gif) inside;"
2. "list-style: square outside;"
3. "list-style: url(list1.gif);"
4. "list-style: square;"
5. "list-style: inside;"

[cursor]
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);

[ime-mode]
웹을 이용해서..글을 올리는 경우가 많은데..
예를들어 회원등록하는 페이지의 경우  아이디는 영문숫자로만 입력받고 싶을 때가 있다..
이럴때 ime-mode 라는 속성을  스타일로 지정하면 가능하다.

auto Default. IME is not affected. This is the same as not specifying the ime-mode attribute.
active All characters are entered through the IME. Users can still deactivate the IME.
inactive All characters are entered without IME. Users can still activate the IME.
disabled IME is completely disabled. Users cannot activate the IME if the control has focus.


영문숫자만 입력받고자할때는 disabled  값으로 지정하면된다.
active 와 inactive는 테스트해보았으나 거의 차이점이 없는것으로 발견됨.

예)  input, textarea
Active : <INPUT TYPE = text STYLE = "ime-mode:active" ><br>
Inactive : <INPUT TYPE = text STYLE = "ime-mode:inactive" ><br>
Disabled : <INPUT TYPE = text STYLE = "ime-mode:disabled" ><br>

참조 : http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/imemode.asp

추가설명 ----------------------------------------------------------------------

<input type="text" style="ime-mode:active" /> <!-- 주변의 모든 폼요소를 한글로 초기화 -->
<input type="text" style="ime-mode:inactive" /> <!-- 한글모드에서 다시 영문모드로 복귀, 이후의 요소를 모두 영문으로 복귀시킴 -->
<input type="text" /> <!-- 영문으로 입역됨 -->

한글문자 입력 금지 (원천봉쇄): 아예 한/영 키를 눌러도 한글이 입력되지 않는다.
<input type="text" style="ime-mode:disabled" />