cursor Property

Home > Document > CSS > Font > cursor

cursor Property

cursor Property 는 cursor 의 형태를 지정하는 Property 입니다. 지정하기에 따라서 사용자가 원하는 형태로 cursor 모양을 변형 시킬 수 있습니다. MS 에서는 링크 글자에 cursor를 올리면 생기는 손가락 모양의 cursor를 hand라고 부르는데, 원래 W3C의 Spec에는 없는 Keyword이고 pointer라고 되어있습니다. 그런데 얼마 전 IE 6.0에서 자기들이 만들어서 이제 새로 나온 양 은근 슬쩍 끼워 넣었습니다. 그리고 IE의 경우 s-resize, n-resize 등 방향을 가르키는 cursor가 IE 5.5 version 까지는 지정한 방향만을 가르켰는데, IE6 version 으로 올라 오면서 그 반대 방향까지 가르키게 되어 같은 모양이 2개씩 생깁니다. 전 보다 못한 듯...

  [표 보는 방법]
cursor Property
Value [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | Inherit
Initial auto
Applies to all elements
Inherited yes
Percentages N/A
Media Visual, Interactive
HTML Syntax { cursor: sCursor }
Scripting object.style.cursor [ = sCursor ]



CSS Scripting
onMouseOver="this.style.cursor='pointer';"


Cell 위에 마우스를 올리면 cursor 형태가 나옵니다.
auto crosshair default pointer
move text wait help
e-resize w-resize s-resize n-resize
se-resize sw-resize ne-resize nw-resize


Custom cursor

Custom cursor는 위의 keyword로 지정하는 cursor가 아니라, 확장자가 .cur이나 .ani인 파일을 cursor로 사용하는 방법 입니다. .cur, .ani 파일은 Windows/Cursors 폴더를 보면 여러개가 있고, 표기 방법은 다음과 같습니다. 예를 들어 http://www.webdesigners.co.kr/cursor/mycursor.ani 가 파일 경로라면

입력
{ cursor : url("http://www.webdesigners.co.kr/cursor/mycursor.ani") } /*따옴표 생략 가능함*/


Custom cursor sample

Custom cursor sample
pen_m.cur 3dgarro.cur barber.ani horse.ani


*IE Only cursor

MS 에서 만든 Explorer 전용 cursor 들입니다. IE 6.0 이상에서 만 보입니다.

IE 6.0 Only cursor
hand progress not-allowed no-drop
vertical-text all-scroll col-resize row-resize




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색