[펌] 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

background 관련 속성

[background-color] 배경색을 지정한다

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

[background-image] 이미지가 배경색 위에 표시

1. "background-image: url(상대경로)"

[background]  속성을 한번에 사용하기

1. <background: url(경로명) yellow no-repeat top left fixed>  
      background   image      color     repeat  position attachment

[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: right bottom;>        배경화면이 왼쪽아래쪽에 위치된다
2. <background-position: 200px 100px;>       배경화면이 200px 100px 쪽에 위치된다

[background-attachment]    브라우저 화면에 고정되는지 안되는지를 결정

1. <background-attachment: scroll;>      고정안됨
2. <background-attachment: fixed;>        고정됨

text 관련 속성

[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;" <밑줄> <윗즐> <가운데줄>

[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-transform] 글자를 대문자나 소묹로 변형시킴

1. {text-transform: none}     
2. {text-transform: uppercase}    대문자로 바꿈
3. {text-transform: lowercase}    소문자로 바꿈
4. {text-transform: capitalize}     첫문자를 대문자로 바꿈

[letter-spacing]   글자간의 간격을 지정하는 속성

1 "letter-spacing: 1em;"

box 관련 속성

[padding] 네곳의 공백을 동시에 정한다

1. {padding: 1px 2px 3px 4px}   <위1px ,오른쪽2px ,아래3px , 왼쪽4px ><시계방향으로 입력>
2. {padding: 50px}   <모든공백이 50px>

[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. <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"

[color] 글자색깔

1. {color: navy;}
2. {color: #369369;}
3. {color: rgb(80%,80%,80%);}
4. {color: rgb(111,111,999);}

[line-height]

1. {line-height:40%}  <글자 행의간격을 40%준다>
2. {letter-spacing:1em}    글자간의 간격을 지정해주는 속성

[word-spacing]

1 "word-spacing: 1em;"

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


* 출처 : http://blog.naver.com/21southpaw?Redirect=Log&logNo=140011078254