Cursor

Cursor

개요 : 이 속성은 마우스 커서의 모양을 지정한다.

정의

cursor	설명
값	[ [<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
기본값	auto
적용대상	모든 요소
상속	안됨
백분율	사용 불가
미디어	visual?, interactive?

값

값	설명
<uri>	사용할 커서 이미지의 경로를 지정한다.
auto	문맥에 맞춰 자동으로 지정한다.
crosshair	십자가(+) 형태로 지정한다.
default	기본 형태로 지정한다. 보통 화살표 형태로 표현된다.
pointer	연결(link)을 지시하는 형태로 지정한다. 보통 손가락 형태로 표현된다.
move	이동을 지시하는 형태로 지정한다.
text	글자를 선택할 수 있는 형태로 지정한다. 보통 I-bar 로 표현된다.
wait	프로그램의 동작을 사용자가 기다려야 함을 지시하는 형태로 지정한다. 보통 모래시계로 표현된다.
help	커서에 개체 object 가 있을 때 도움말은 나타낸다. 보통 물음표(?) 로 표현된다.
uri	사용도구는 URI를 자원이 지정한 커서으로 부터 읽어온다. 바(\|) 형태로 표현된다.
n-resize	상단 모서리를 조절하는 형태로 지정한다.
ne-resize	상단 오른쪽 모서리를 조절하는 형태로 지정한다.
e-resize	오른쪽 모서리를 조절하는 형태로 지정한다.
se-resize	하단 오른쪽 모서리를 움직이는 형태로 지정한다.
s-resize	하단 모서리를 조절하는 형태로 지정한다.
sw-resize	하단 왼쪽 모서리를 조절하는 형태로 지정한다.
w-resize	왼쪽 모서리를 조절하는 형태로 지정한다.
nw-resize	상단 왼쪽 모서리를 조절하는 형태로 지정한다.
inherit	부모 요소의 값을 상속하도록 지정한다.

마우스 커서 이미지로 사용할 URL 을 지정할 땐, 지정한 파일을 사용할 수 없을 때를 대비하여 대체 사용할 커서 타입을 끝에 명시해 주어야 한다.

View Source :

<style>
 p {cursor: pointer;}
</style>
<body>
 <p>마치 연결(link)된 것처럼, 마우스를 손가락 모양으로 지정한다. </p>
</body>

Result :

 마치 연결(link)된 것처럼, 마우스를 손가락 모양으로 지정한다.  -> 현재 css가 적용되지 않아 손가락 모양이 표시 되지 않음.

Pet2r