행복한 스마일맨 ^^*

JAVASCRIPT STYLE SHEET

☞스타일의 사용

<style class="text/css">...</style>
<style type="text/css">...</style>
<style>...</style>
<태그 style="..."></태그>
<style rel="stylesheet" type="text/css" href="외부스타일문서">

☞스타일의 지정

1. 태그로 지정 : td{...}
2. 클래스로 지정 : .text{...} -> <태그 class="text">
3. 아이디로 지정 : #text{...} -> <태그 id="text">

☞ 폰트 속성

※ 윈도우기본폰트 : 굴림, 굴림체, 궁서, 궁서체, 돋움, 돋움체, 바탕, 바탕체, Arial, Arial Black, Arial Narrow, Bookman Old Style, Comic Sans MS, Courier New, Garamon, Geogia, Impact, MingLiU, MS Hei,Minon Web, Morden, Monotype.com, MS Gothic, MS Song, Time New Roman, Trebuchet MS, Verdana

1. font-family
2. font-style : normal, italic, italic small-caps, oblique, oblique small-caps, small-caps
3. font-variant : normal
4. font-size : %, pt, xx-small, x-small, small, medium, large, x-large, xx-large, expression(document.body.clientWidth/13)<--브라우저 크기에 따라 변형
5. font-weight : 100~900, normal, bold, bolder, lighter

※ 일괄지정 : font : 스타일 대소문자 굵기 크기/줄간격 폰트

☞ 텍스트 속성

1. text-align : left, center, right, justify
2. vertical-align : top, middle, bottom, baseline(문자기본선), text-top(문자윗선), text-bottom(문자아래선), super, sub, %
3. text-transform : none, uppercase, lowercase, capitalize(첫번째 대문자)
4. text-decoration : none, blink(넷스케이프), underline, overline, line-through
5. letter-spacing : normal, %, 값(pt, px 등)
6. word-spacing(넷스케이프) : normal, %, 값(pt, px 등)
7. text-indent : pt, px, % 등

☞ 테두리 속성

1. border-color
2. border-style : none, dotted, dashed, solid, double, groove, ridge, inset, outset
3. border-width
4. border-top, border-bottom, border-let, border-right, border-top-속성

※ 일괄지정 : border : 스타일 두께 색상

☞ 여백 속성

1. margin-width
2. margin-height
3. margin-top,bottom,left,right
4. padding-top,bottom,left,right

※ 일괄지정 : margin: 상 우 하 좌 / padding:상 우 하 좌

☞ Float/Clear 속성

1. float : left, right, none
2. clear : left, right, none, both

☞ 색상과 배경 속성

1. color
2. background-color
3. background-image : url(URL)
4. background-repeat : no-repeat, repeat, repeat-x, repeat-y
5. background-attachment : scroll, fix
6. background-position : %, top center bottom, left center right

※ 일괄지정 : background-image: url(URL) 반복

☞ 위치결정과 겹치기 속성

1. position : absolute(브라우저 화면 기준, top/left/bottom/right %,값,Auto 지정), relative(겹치기 가능, top/left/bottom/right %,값,Auto 지정), static(기본값), fixed(브라우저 화면 기준,위치 고정)
2. drection : ltr(왼쪽배열), rtr(오른쪽배열)
3. z-index : 숫자(높을수록 위로), auto(0)

☞ 목록특성

1. list-style-type : disc, circle, square, demical, lower-roman, upper-roman, lower-alpha, upper-alpha, none
2. list-style-image : url(URL)
3. list-style-position : inside(들여쓰기), outside(내어쓰기), none

☞ 하이퍼링크의 지정

a:link{...}
a:visited{...}
a:active{...}
a:hover{...}

☞ 스크롤박스 만들기

overflow : visible(내용이 박스보다 커도 보여줌), hidden(내용이 크면 잘라서 보여줌), auto(내용이 크면 오른쪽스크롤바를 생성), scroll(항상 스크롤바생성)
<div style="width:500; height:60; background-color:#FFF799; border:solid 1 #827B00; overflow:auto;">

☞ 스타일과 자바스크립트

1. 객체.style.backgroundColor
2. 객체.style.fontWeight
3. 객체.style.fontStyle
4. 객체.style.fontFamily
5. 객체.style.color
6. 객체.style.filter

☞ 필터의 활용

1. filter : alpha(opacity=0~100, finishopacity=0~100, style=0(단일) 1(선형) 2(구형) 3(사각형), startx=시작값, starty=시작값, finishx=끝값, finishy=끝값)
2. filter : blur(add=0 또는 1 원본이미지와 합치기, strength=픽셀수, direction=0 45 90 135 180 225 270 315)
3. filter : chroma(color=투명처리할 색)
4. filter : dropshadow(color=그림자색, offx=거리, offy=거리, positive=1(불투명픽셀 대상) 또는 0(투명픽셀 대상))
5. filter : flipH 수평뒤집기
6. fliter : flipV 수직뒤집기
7. filter : glow(color=번질색, strength=1~255)
8. filter : gray
9. filter : invert
10. filter : lighta 빛이 투사
11. filter : mask(color=투명 영역에 칠할 색)
12. filter : shadow(color=그림자색, direction=0 45 90 135 180 225 270 315)
13. filter : wave(strength=0~100, freq=웨이브수, lightstrength=0~100 빛의강도, add=0 또는 1 원본이미지와 합치기, phase=0~100 웨이브각도)
14. filter : xray 경계
15. filter : blendTrans(duration=값)
16. filter : revealTrans(duration=값, transition=23가지의 효과)

☞ 마우스 포인터의 속성

 cursor : auto, default(화살표), help(물음표), wait(모래시계), hand(손), crosshair(십자), text(텍스트), e-resize(가로화살표), ne-resize(/화살표), n-resize(상하화살표), nw-resize(＼화살표), w-resize(가로화살표), sw-resize(/화살표), s-resize(세로화살표), se-resize(＼화살표)

☞ 스크롤바 속성

1. scrollbar-face-color
2. scrollbar-highlight-color
3. scrollbar-3dlight-color
4. scrollbar-shadow-color
5. scrollbar-darkshadow-color
6. scrollbar-track-color
7. scrollbar-arrow-color