ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [펌] css
    study/reference 2008. 2. 16. 17:02

    글자 관련 속성

    [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

    댓글

Designed by Tistory.