섭군 - by seob: CSS

레이블이 CSS인 게시물을 표시합니다. 모든 게시물 표시

2009년 9월 21일 월요일

[펌]CSS 스타일 스크롤바 소스

출처 : 태그 코리아 - http://www.tagkorea.pe.kr/scrollbar.html

아래 자료는 자바스크립트 홈페이지에서 발췌한 스크롤 스타일입니다.

→ CSS 스타일시트를 이용해 웹페이지에 사용되는 스크롤바 색상 바꾸기

요즘 태그생성기를 이용해 스크롤바를 손쉽게 만드실수 있습니다만.. 복잡하다고 생각하시거나

귀차니즘을 토로하시는 분들이 있는거 같더군요..;

그래서 귀차니즘과 성격 급하신 분들을 위해 스크롤바 소스를 모아봤습니다.

<style type="text/css"> body {scrollbar-face-color: #556B2F; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #556B2F; scrollbar-darkshadow-color: #556B2F; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff;} </style>

<style type="text/css"> body { scrollbar-face-color: #FF9B00; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FF9B00; scrollbar-darkshadow-color: #FF9B00; scrollbar-track-color: #F5F5F5; scrollbar-arrow-color: #ffffff; } </style>

<style type="text/css"> body {scrollbar-face-color: #FFA2AD; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFA2AD; scrollbar-darkshadow-color: #FFA2AD; scrollbar-track-color: #FFF0F0; scrollbar-arrow-color: #ffffff;} </style>

<style type="text/css"> body { scrollbar-face-color: #DB631F; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #DB631F; scrollbar-darkshadow-color: #DB631F; scrollbar-track-color: #FFCA9B; scrollbar-arrow-color: #ffffff; } </style>

<style type="text/css"> body {scrollbar-face-color: #CD2E57; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #CD2E57; scrollbar-darkshadow-color: #CD2E57; scrollbar-track-color: #fffffc; scrollbar-arrow-color: #ffffff;} </style>

<style type="text/css"> body { scrollbar-face-color: #FFA2AD; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFA2AD; scrollbar-darkshadow-color: #FFA2AD; scrollbar-track-color: #FFE6EB; scrollbar-arrow-color: #ffffff; } </style>

<style type="text/css"> body {scrollbar-face-color: #FFE6EB; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFE6EB; scrollbar-darkshadow-color: #FFE6EB; scrollbar-track-color: #fffffc; scrollbar-arrow-color: #ffffff;} </style>

<style type="text/css"> body { scrollbar-face-color: #266C6C; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #266C6C; scrollbar-darkshadow-color: #266C6C; scrollbar-track-color: #A5E3E6; scrollbar-arrow-color: #ffffff; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033 } </style>

<style type="text/css"> body { SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959; } </style>

<style type="text/css"> body { scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4; } </style>

<style type="text/css"> body { scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff; } </style>

<style type="text/css"> body { scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB; } </style>

<style type="text/css"> body { scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227; } </style>

<style type="text/css"> body { scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000 } </style>

<style type="text/css"> body { scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC; } </style>

<style type="text/css"> body { scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE; } </style>

<style type="text/css"> body { scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4; } </style>

<style type="text/css"> body { scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10; } </style>

<style type="text/css"> body { scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222; } </style>

<style type="text/css"> body { scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCFF00; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#CCFF00; scrollbar-shadow-color:#CCFF00; } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF } </style>

<style type="text/css"> body { scrollbar-3dlight-color:#0000FF; scrollbar-arrow-color:white; scrollbar-track-color:white; scrollbar-darkshadow-color:#0000FF; scrollbar-face-color:#0000FF; scrollbar-highlight-color:white; scrollbar-shadow-color:white; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #A864A8; scrollbar-shadow-color: #A864A8; scrollbar-arrow-color: #A864A8; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #FF0000; scrollbar-shadow-color: #FF0000; scrollbar-arrow-color: #FF0000; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #FFAE5A; scrollbar-shadow-color: #FFAE5A; scrollbar-arrow-color: #FFAE5A; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #CCCCCC; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #CCCCCC; scrollbar-shadow-color: #CCCCCC; scrollbar-arrow-color: #CCCCCC; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #F765AD; scrollbar-shadow-color: #F765AD; scrollbar-arrow-color: #F765AD; scrollbar-face-color: #FBDBE9; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #F765AD; scrollbar-shadow-color: #F765AD; scrollbar-arrow-color: #F765AD; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #009AFF; scrollbar-shadow-color: #009AFF; scrollbar-arrow-color: #009AFF; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#00BEF7; scrollbar-face-color:#E6FAFF; scrollbar-shadow-color:#00BEF7; scrollbar-darkshadow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#00BEF7; } </style>

<style type="text/css"> body { scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#B58E63; scrollbar-face-color:#F2ECE6; scrollbar-shadow-color:#B58E63; scrollbar-darkshadow-color:white; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#B58E63; } </style>

<style type="text/css"> body { scrollbar-face-color:#FFEEAA; scrollbar-shadow-color:#FFF0AC; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFCC00; scrollbar-darkshadow-color:#EABB00; scrollbar-track-color:#FFF9E1; scrollbar-arrow-color:#ED8E0E; } </style>

<style type="text/css"> body { scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#0071BD; scrollbar-face-color:#E8F5FF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#0071BD; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#0071BD; } </style>

<style type="text/css"> body { scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#0071BD; scrollbar-face-color:#E8F5FF; scrollbar-shadow-color:#0071BD; scrollbar-darkshadow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#0071BD; } </style>

<style type="text/css"> body { scrollbar-highlight-color: #ACD373; scrollbar-shadow-color: #ACD373; scrollbar-arrow-color: #ACD373; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; } </style>

<style type="text/css"> body { scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff; } </style>

--------------------------------------------------------------------------------------

2009년 9월 4일 금요일

CSS 스타일시트 정리-font,text,letter,word,color,back....

선의 굵기(border-width)굵기(border-width) 와 선의 색상(border-color)은 별도로 설명할 필요는필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.

style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예예

style="border-width: 10pt; border-style: inset; border-color:yellow"

테이블에 border style 을 적용한 예

스타일시트 소스

</style>

---------------------------------------------------------------------------------

▶ 각 항목을 클릭하시면 새창으로 상세사용법을 보실수 있습니다.

css 속성모음 입니다.
실제로 적용할때 많이 사용하는 부분을 모아 두었습니다.
많이 활용하세요.

배경값 설정	background	B
배경 이미지의 스크롤 여부 설정	background-attachment
배경색 설정	background-color
배경 이미지	background-image
배경 위치 설정	background-position
배경 이미지의 반복 설정	background-repeat
박스 경계선의 속성 설정	border
박스 아래 경계선의 속성 설정	border-bottom
박스 아래 경계선의 두께 설정	border-bottom-width
박스 경계선의 색상 설정	border-color
박스 왼쪽 경계선의 속성 설정	border-left
박스 왼쪽 경계선의 두께 설정	border-left-width
박스 오른쪽 경계선의 속성 설정	border-right
박스 오른쪽 경계선의 두께 설정	border-right-width
경계선 스타일 지정	border-style
박스 위쪽 경계선의 속성 설정	border-top
박스 위쪽 경계선의 두께 설정	border-top-width
박스 경계선의 두께 설정	border-width

이미지나 테스트의 배치 지정	clear	C
글자색의 설정	color

디스플레이 값의 변경 설정	display	D

이미지나 택스트의 배치 지정	float	F
글꼴 속성 설정	font
글꼴 종류 설정	font-family
글자 크기 설정	font-size
글자 모양 설정	font-style
글꼴의 전환	font-variant
글자 두께 지정	font-weight

Element(요소) 높이 설정	height	H

글자간의 간격 조절	letter-spacing	L
각 줄간격 설정	line-height
목록의 스타일 설정	list-style
목록의 이미지 설정	list-style-image
목록의 위치 형태 설정	list-style-position
목록의 형태 설정	list-style-type

모든 여백 설정	margin	M
맨 아래쪽 여백 설정	margin-bottom
맨 왼쪽 여백 설정	margin-left
맨 오른쪽 여백 설정	margin-right
맨 위쪽 여백 설정	margin-top

박스내의 간격 설정	padding	P
박스내의 아래쪽 간격 설정	padding-bottom
박스내의 왼쪽 간격 설정	padding-left
박스내의 오른쪽 간격 설정	padding-right
박스내의 위쪽 간격 설정	padding-top

수평 정열을 설정	text-align	T
텍스트의 효과 조절	text-decoration
텍스트에서 첫번째 줄 들여쓰기	text-indent
문자열의 변환	text-transform

수직 정열을 설정	vertical-align	V

띄어쓰기 부분의 처리	white-space	W
Element(요소) 너비 설정	width
단어들 사이의 간격 조절	word-spacing

-------------------------------------------------------------------------------------

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

nw-resize : 커서의 방향이 북서쪽
ne-resize : 커서의 방향이 북동쪽
sw-resize : 커서의 방향이 남서쪽
se-resize : 커서의 방향이 남동쪽
e-resize : 커서의 방향이 동서쪽
w-resize : 커서의 방향이 서동쪽
n-resize : 커서의 방향이 북남쪽
s-resize : 커서의 방향이 남북쪽
help: ? 모양으로 표시
move : 이동 모양으로 표시
text : 텍스트 입력상태로 표시
crosshair : 십자가로 표시
wait : 모래시계 모양으로 표시
hand : 손 모양으로 표시

-------------------------------------------------------------------------------------

웹페이지의 기본이라고 할 수 있는 css 정의.. 태그별로 쓸 수 있는 css 정리..

<body>

background-color / 배경색 / background-color:#ff0000

background-image:url / 배경그림 / background-image:url("이미지명")

background-repeat / 배경그림 반복여부 / background-repeat:no-repeat

background-position / 배경그림의 위치 / background-position:right bottom

background-attachment / 배경그림 고정여부 / background-attachment:fixed

예제>

<STYLE TYPE="text/css">
body {
color:#7BA2AA;
font-weight:bold;
background-color:#FFFFFF;
background-image:url("person1.gif");
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
</STYLE>

<문서 글꼴과 서식>

color / 글꼴색 / red ,blue , ..#ffffff,...

font-style / 글꼴 / normal , italic , oblique

font-weight / 굵기 / none,bold,lighter,bolder, 100 , 200 ,...

font-size / 글꼴 크기 / 10,11,...

font-family / 글꼴 family / serif, sans-serif,굴림,돋움...

text-decoration / 장식 / none , underline,overline,line-through,blink

text-align / 정렬방법 / left,right,center

margin-top / 윗여백 / 10px, 20px, 숫자 + 단위로 구성단위를 안주면 default 로 px 가 붙음

margin-left / 왼쪽 여백 / 10px..

margin-right / 오른쪽 여백 / 10px..

margin-bottom / 아래쪽 여백 / 10px..

line-height / 줄간격 / normal, 150% , 1

letter-spacing / 문자 간격 / -1, 0.5em (em 은 그 범위에서 유효한 글자 크기를 1로 함.)

word-spacing / 단어 간격 / 1em 예제>

<STYLE TYPE="text/css">
body {
font-family: 돋움체,돋움,굴림체,굴림,Arial;
text-decoration:italic;
font-weight:bold;
font-size:12pt;
margin-top:30px;
margin-left:80px;
margin-right:80px;
margin-bottom:10px;
text-align:center;
letter-spacing:0.5em;
word-spacing:1em;
}
</STYLE>

<링크스타일>

A: link {스타일} / 링크

A: visited{스타일} / 이미 방문한 링크

A: active{스타일} / 링크 클릭 후 마우스를 떼었을 때

A: hover{스타일} / 링크에 마우스를 over 하였을 때

예제>

<STYLE TYPE="text/css">
A:link {color:blue; text-decoration:none}
A:visited {color:#A58778; text-decoration:none}
A:active {color:red; text-decoration:none}
A:hover {color:aqua; text-decoration:underline}
</STYLE>

<태그위치>

position / 상대위치,절대위치 / absolute , relative ==> div로 되는 layer 에 많이 쓰인다..

left / x 위치 / 10px..

top / y 위치 / 10px..

width / 폭 / 10px..

height / 높이 / 10px..

예제>

<STYLE TYPE="text/css">
h1. ex1 {
포지션:relative; ==> 네이버에서 태그가 중복되어 앞에 한글로 보여드립니다.
left:20;
top:30;
width:600px;
background-color:blue;
height:300px
}
h1. ex2 {
포지션:relative; ==> 네이버에서 태그가 중복되어 앞에 한글로 보여드립니다.
left:-20;
top:10;
width:500px;
background-color:red;
height:100px
}
</STYLE>

<기타속성>

visibility / 태그가 화면에 보이는 여부 / hidden, visible

display / 태그가 화면에 표현되는 여부 / none/inline/block

z-index / 태그들 사이의 순서 / 숫자 값

예제>

<STYLE TYPE="text/css">
h1.one {
visibility:visible;
}
h1.two {
visibility:hidden;
}
</STYLE>

CSS 스타일시트 정리

일반적인 CSS 정의하는 방법 및 기본적인 CSS 사용법들...
태그별 사용되는 스타일 등이 있습니다..
조금이나 도움이 되었으면 합니다..

C S S

1. DHTML(Dynamic Hyper Text Markup Language)이란?
   ․ 동적인 웹 문서 작성을 지원하기 위해 HTML에 스타일 시트(Style Sheet)와
   Script 언어(VBScript, JavaScript, JScript), 그리고 DOM(Document Object Model)이
추가된 문서를 의미한다.
   ․ 서버의 도움없이도 클라이언트 자체에서 사용자가 요구한 새로운 페이지를
   즉시 생성하여 보여 줄 수 있다.

2. 스타일 시트(Style Sheet)
․ 문서의 외형인 글자 크기, 글자 모양, 줄 간격, 배경 색상, 테두리 장식 등을
다양하게 효과적으로 지정할 수 있도록 지원하는 개념이다.

3. CSS(Cascading Style Sheet)
․ 속성과 속성값을 이용하여 스타일을 지정한다.

4. JSSS(JavaScript Style Sheet)
․ 자바스크립트를 이용하여 스타일을 지정한다.
․ 넷스케이프에서만 지원한다.

5. 스타일 시트의 구성요소
   ․ 선택자(Selector)
   - HTML 문서에서 스타일을 정의할 대상을 의미한다.
   - 하나 또는 그 이상의 선택자가 지정될 수 있다.
   - 선택자의 나열은 “,”로 한다.
   ․ 선언(Declaration)
   - 선택자에게 지정한 스타일을 의미한다.
   - 속성(Property)과 속성값(Value)으로 구성된다.
   - 속성과 속성값은 “:”으로 구분한다.
   - 선언은 반드시 “;”으로 끝나야 한다.

6. 스타일 시트 선언방법
․ 내부 스타일 시트 : <head>와 </head>사이에 선언하는 방법
․ 외부 스타일 시트 : 외부의 파일로 작성한 후 <LINK> 또는 @import 명령을
이용하여 선언하는 방법

․ 인라인 스타일 시트 : 일반 html 태그에 스타일을 직접 지정하는 방법

7. 내부 스타일 시트 선언 형식
   <style type = "text/css" 또는 “text/JavaScript">

8. 외부 스타일 시트 선언 형식
   ․ 별도의 파일에 스타일을 정의한다. 파일의 혹장자는 “.CSS"이다.
   ․ 외부 파일도 <head>와 </head>사이에 선언해야 한다.
   단, type = "text/css"를 기입하면 무관하다.
   ․ <LINK>를 이용하여 연결
   - 형식 : <LINK rel = "stylesheet" type = "text/css" href = "파일명“>
   ․ @import를 이용하여 연결
   - 형식
<style type = "text/css" or "text/JavaScript">

</style>
   - 다른 선언들과 함께 사용될 수 있지만, 반드시 다른 선언들보다 앞에 존재해야 한다.

9. 인라인 스타일 시트 선언 형식
․ <태그 style = "속성:속성값; 속성:속성값“> 문장 </태그>
․ 단, <head>와 <title>에서는 사용할 수 없다.

10. CLASS 선택자를 이용하는 방법
   ․ 하나의 선택자에 서로 다른 여러개의 스타일을 정의할 때 사용한다.
   ․ 형식 : 선택자.클래스명 {속성:속성값}
사용시 : <선택자 class = "클래스명“>
   .클래스명 {속성:속성값}
사용시 : <태그 class = "클래스명“>

11. ID 속성을 이용하여 스타일을 정의하는 경우
   ․ ID 속성은 한 문서에 선언되는 동일한 태그에 여러번 선언될 수 없다. 즉, 한번만 선언되어야 한다.
   ․ ID 속성은 CLASS속성 보다 우선적으로 적용된다.
   ․ id 이름은 대․소문자를 구분한다.
   ․ 형식 : #id이름 {속성:속성값}
   사용시 : <태그 id = "id이름“>

12. 문맥 선택자를 이용하여 스타일을 정의하는 경우
   ․ 선택자에 포함된 특정 요소에 다른 스타일을 적용시키고자 할 때 사용
   ․ 형식 : 태그 태그들 {속성:속성값}
   사용시 <태그> <태그> 문장 </태그> </태그>

13. 가상 클래스 선택자를 이용하여 스타일을 지정하는 경우
․ 예 : A:link, visited, hover, active {속성:속성값;}

14. 가상 요소를 이용하여 스타일을 지정하는 경우
․ 예 : 선택자.first-letter, 선택자.first-line {속성:속성값}

15. 스타일 시트의 상속성 및 우선순위
   ․ 상속성이란? 지정된 스타일이 특정 요소뿐만 아니라 그 요소의 자식에게도 적용됨을 의미한다.
   ․ 상속된 스타일은 우선 순위가 가장 낮게 변경된다.
   ․ 가장 마지막에 선언된 스타일 시트가 가장 높은 우선 순위를 가지게 된다.

16. 스타일 시트에서 사용하는 단위
․ 절대적 단위 : in, cm, mm, pt, px
․ 상대적 단위 : em(현재크기), ex(em의 1/2크기)

17. Font 관련 스타일
   ․ font "값들만“ : 대표속성
   ․ font-family : 글꼴, 글꼴 이름은 쉼표(,)로 구분, 글꼴 이름이 두 단어 이상이면
   큰 따옴표로 묶는다. 브라우저는 앞에 있는 글꼴부터 보여준다.
   ․ font-style "normal, italic, oblique" : 기울임꼴을 적용
   ․ font-variant "normal, small-caps" : small-caps 크기가 작은 대문자
   ․ font-weight "normal, bold, 100～900" : 글자 굵기
normal=400, bold=700, 숫자는 인식 못하는 경우 있음
   ․ font-size "숫자em(상위 element 크기에 배수), 숫자pt" : 글자 크기 유전되지 않음

18. Text 관련 스타일
   ․ line-height "normal, 숫자, 숫자em, %“ : 줄간격
   ․ text-indent "숫자em, 퍼센트, 숫자“ : 들여쓰기, 음수사용시 내여쓰기
   ․ text-align "left, right, center, justify" : 텍스트나 이미지 수평정렬
   ․ text-decoration “none, underline, overline, line-through" : 줄 긋기
유전되지 않음
   ․ letter-spacing "normal, 숫자em, 숫자“ : 글자 간격
   ․ text-transform "capitalize, uppercase, lowercase, none" : 영문자 변환
첫글자만    대문자    소문자
   ․ vertical-align "baseline, sup, sub, middle, text-top, top, text-bottom, bottom" 텍스트나 이미지 수직정렬

19. 색상과 배경에 관련된 스타일
   ․ color "영문자, RGB“ : 글자 및 밑줄 색
   ․ background-color "영문자, RGB, transparent" : 배경색, 유전되지 않음
   ․ background-image "none, url(파일위치)“ : 배경 그림, 유전되지 않음
   ․ background-repeat "repeat, repeat-x, repeat-y, no-repeat" : 배경
   이미지 반복 여부
   ․ background-attachment "scroll, fixed" : 화면이 스크롤될때 이동여부
   ․ background-position "top, bottom, left, center, right, 가로% 세로%“ :
   이미지 반복 여부 가로p 세로p(음수됨)

20. 상자와 테두리에 관련된 스타일
   ․ margin "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 여백지정, 모든 단위 사용 가능
   ․ margin-top, margin-right, margin-bottom, margin-left : 여백 지정
   ․ border-style "dotted, dashed, groove, ridge, inset, outset" : 테두리 선의
   모양, dotted와 dashed는 익스플로러 5.0에서는 지원되지 않음
   ․ border-width "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리 두께
   ․ border-top-width, border-right-width, border-bottom-width

   border-left-width : 각각 테두리 두께 따로 지정
   ․ border-color "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리선의 색
   ․ border-top-color, border-right-color, border-bottom-color,
   border-left-color : 각각 테두리선의 색 따로 지정
   ․ border-top, border-right, border-bottom, border-left : 테두리 두께및 색
   ․ padding "위쪽, 오른쪽, 아래쪽, 왼쪽“ : 테두리와 테두리 안의 내용 사이의 간격
   ․ padding-top, padding-right, padding-bottom, padding-left : 간격따로지정
   ․ float "left, right, none" : 이미지 및 텍스트와 다른 내용과의 배치
   ․ position "absolute, relative, static" : element가 브라우저에서의 표시위치,유전 안됨
   ․ overflow "scroll, hidden, visible, auto" : 상자안의 내용이 상자를 넘어 갈때의 처리 여부
hidden : 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다.
visible : 크기에 관계없이 내용을 모두 보여준다.
auto : 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다.
   ․ overflow-x, overflow-y : 스크롤 바를 따로 지정
   ․ visibility "inherit, visible, hidden" : element의 화면 표시 여부
․ z-index "auto, 숫자“ : 여러개의 element가 서로 상하로 겹치게 만들 수 있 는속성, 상대․절대일때만 사용, 유전 안됨
auto : 쓴 순서대로 싸인다. z-index가 0인 것과 같다.
숫자 : 숫자가 낮은 element가 밑으로 간다.
   ․ top, left "숫자, %, auto" : 위, 왼쪽위치, 위치가 상대․절대일때만 사용
   유전 안됨
․ width, height "숫자, %, auto" : 내용의 너비와 높이를 지정, 위치가 상대․ 절 대일때만 사용, 유전 않됨,
   block-level가 img에 이용
   ․ clear "none, left, right, both" : 지정한 방향에는 다른 내용이 올 수 없음을 나타낸다.

21. 목록 관련 스타일
   ․ list-style-type "disc, circle, square, decimal, lower-roman, none,
   upper-roman, lower-alpha, upper-alpha"
   ․ list-style-image "url, none" : 리스트의 블릿 기호를 이미지로 지정
   ․ list-style-position "inside, outside" : 리스트의 문장이 출력될 지점

   inside : 새로운 줄로 출력할 때 리스트 모양이 있는 곳부터 출력
   outside : 새로운 줄로 출력할 때 문장의 첫글자가 있는 곳부터 출력
   ․ list-style "list-style-type, position, image" : 3가지 속성을 한꺼번에 지정

22. 커서 모양 지정 스타일
․ cursor "crosshair, help, move, pointer, text, wait" : 커서 모양
e-resize, w-reseze, s-resize, n-resize, ne-resize, nw-resize,
sw-resize, se-resize

23. 글자나 그림에 각종 효과주는 스타일
   ․ filter : "alpha,blur,chroma,dropshadow,shadow,filph,filpv,glow,gray,invert,
   light,xray,wave"
   ․ alpha
   - 그림이나 글자에 투명도를 조정하는 속성
   - 형식 : alpha(opacity="값“, style="값”, finishopacity="값“, startx="값”,
starty="값“, finishx="값”, finishy="값“)
   ․ blur
   - 그림이나 글자에 흐려지는 효과를 지정하는 속성
   - 형식 : blur(add="값“, direction="값”, strength="값“)
   ․ chroma
   - 그림이나 글자의 특정색을 투명하게 처리하는 속성
   - 형식 : chroma(color="색상값“)
   ․ shadow
   - 지정된 색상의 그림자 효과를 지정하는 속성
   - 형식 : shadow(color="색상값“, direction="그림자 방향 도”)
   ․ dropshadow
   - 그림자의 위치를 지정해서 그림자 효과를 지정하는 속성
   - 형식 : dropshadow(color="색상값“, offx="값”, offy="값“,positive="0,1")
   ․ filph
   - 그림이나 글자를 수평 반전시킨다.
   ․ filpv
   - 그림이나 글자를 수직 반전시킨다.
   ․ glow
   - 경계선 바깥쪽을 발광하게하는 효과를 지정하는 속성
   - 형식 : glow(color="색상값“, strength="값”)

   ․ gray()
   - 그림이나 글자를 흑백으로 표시한다.
   ․ invert()
   - 그림이나 글자의 채도 및 색조를 반전시킨다.
   ․ light()
   - 빛이 투과된 효과를 지정
   ․ xray()
   - 경계선만 보여주는 효과
   ․ wave
   - 파도 효과를 지정하는 속성
   - 형식 : wave(add="값“, freq="값”, lightstrength="값“, phase="값”,
strength="값“)
   ․ mask
   - 투명한 채색 효과를 지정
   - mask(color="색상값“)

24. 페이지를 나누는 스타일
․ page-break-after : 지정후 페이지를 나눈다.
․ page-break-before : 지정전 페이지를 나눈다.