CSS는 HTML을 표현하는데 있어서 한단계 진보된 방식이야.
HTML로만 표현하게되면 걸림돌이 생기게 되는 때가 많이 있게되지, "왜 이렇게는 안되는걸까?"
"다른 컴퓨터에서는 내가 의도한데로 안나오자나" 이런 생각을 하게 될때 10중에 9는 CSS를
통해 해결된다고 해도 과언이 아니야. 아래 간단하게 소개를 보고, 이해.
| Style Sheet
Style Sheet... 웹문서 작성에 있어 기본이 된지 이미 오래다. |
■ 어떤걸 CSS 로 정의할 수 있느냐 |
| 기존 태그에 대한 재정의 | HTML 태그의 디폴트를 새로 정하는 것 |
| link 관련 태그를 재정의 | 기존의 <a> 태그가 가진 디폴트를 재정의하는 것 |
| 사용자가 만드는 스타일 | 사용자가 만든 스타일 |
■ 어디에 CSS 를 정의할 수 있느냐 |
| 태그내에 (inline) | <font style="font-size: 9pt"> 홍길동 </font> * 이 태그에만 적용된다 |
| 문서내에 (internal) | <head> <style type="text/css"> font { font-size:9pt ;} </style> </head> * 문서 전체에 적용된다 |
| 외부문서로 (external) | 위의 <style> ~ </style> 부분을 확장자를 css 로 저장 사용할 웹문서에서 이 파일을 참조하려면 <link rel="stylesheet" type="text/css" href="style.css"> * 이 스타일이 필요한 모든 웹문서에서 위의 방법으로 사용! |
■ 사용자 정의 CSS 사용법 |
| 정의하기 |
<head> <style type="text/css"> .myfont { font-size:12pt ;} </style> </head> * 문서내 또는 외부문서에 .이름 으로 정의! |
| 사용하기 |
<font class="myfont"> * class 를 사용한다 |
[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);
헤드안에 정의
<style type="text/css">
<!--
body {background-image: url(images/favorite_yk.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position:left top}
-->
</style>
[출처] 빛남이
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
