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