본문 바로가기
프로그래밍/html & jsp

cursor 옵션

by Super User 2009. 6. 29.

[cursor]

마우스 포인터의 모양을 설정 합니다.
N:6.0/IE:4.0/CSS2


문법

HTML {cursor: Property}
JScript object.style.cursor = 'Property'


cursor: help
물음표
cursor: hand
cursor: crosshair
십자선(초점)
cursor: default
기본(화살표)
cursor: move
이동
cursor: wait
모래시계
cursor: e-resize
화살표(동, 동서)
cursor: w-resize
화살표(서, 동서)
cursor: s-resize
화살표(남. 남북)
cursor: n-resize
화사표(북, 남북)
cursor: se-resize
화살표(남동)
cursor: sw-resize
화살표(남서)
cursor: ne-resize
화살표(북동)
cursor: nw-resize
화살표(북서)
cursor: progress
손+모래시계
cursor: row-resize
열 사이즈 조절
cursor: col-resize
행 사이즈 조절
cursor: all-scroll
휠 스크롤
cursor: pointer
포인터
cursor: no-drop
드롭 금지


style="cursor: cursortype"

IE 6.0이하에서는 방향 스타일의 화살표는 한쪽 방향으로 나옵니다.
IE 6.0이상에서는 방향 스타일의 화살표과 양쪽 방향으로 나옵니다.

아래는 IE 6.0이상과 그 이후 버전에서 사용 됩니다
{cursor: progress}
{cursor: row-resize}
{cursor: col-resize}
{cursor: all-scroll}
{cursor: pointer}
{cursor: no-drop}

cursor 이미지를 직접 만들어서 사용 할수  있습니다.
먼저 커서 이미지는 아이콘 제작툴을 이용해서 커서이름.cur 또는 커서이름.ani 로 제작하세요.

style="cursor: url(커서이미지경로)"

경로는 상대/절대 모두 가능하며 본문 전체가 아니라 특정 부분에 사용 하시려면 해당 태그에 적용 하시면 됩니다.