[CSS] 16. Cursor ( 마우스 커서 모양 )

CSS에서는 커서의 모양을 설정할 수 있는 cursor 속성을 제공합니다. 

이 속성은 submit버튼을 누를때 마치 링크가 걸려있을 때 손가락이 보이는 것처럼 설정을 해줄 수 있도록 해줍니다.  

 

아래 테이블에는 커서 속성이 가질 수 있는 값들에 대한 설명이 나와있습니다.

Value	Description
auto	Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on...
crosshair	A crosshair or plus sign
default	An arrow
pointer	A pointing hand (in IE 4 this value is hand)
move	The I bar
e-resize	The cursor indicates that an edge of a box is to be moved right (east)
ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resize	The cursor indicates that an edge of a box is to be moved up (north)
se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resize	The cursor indicates that an edge of a box is to be moved down (south)
w-resize	The cursor indicates that an edge of a box is to be moved left (west)
text	The I bar
wait	An hour glass
help	A question mark or balloon, ideal for use over help buttons
<url>	The source of a cursor image file

 

그럼 다음 예제를 한번 보도록 하죠.

<p>각 속성값 명칭 위에 마우스를 올려보세요. 마우스 커서모양이 변하는 것을 보실 수 있을 겁니다.</p> <div style="cursor:auto">Auto</div> <div style="cursor:crosshair">Crosshair</div> <div style="cursor:default">Default</div> <div style="cursor:pointer">Pointer</div> <div style="cursor:move">Move</div> <div style="cursor:e-resize">e-resize</div> <div style="cursor:ne-resize">ne-resize</div> <div style="cursor:nw-resize">nw-resize</div> <div style="cursor:n-resize">n-resize</div> <div style="cursor:se-resize">se-resize</div> <div style="cursor:sw-resize">sw-resize</div> <div style="cursor:s-resize">s-resize</div> <div style="cursor:w-resize">w-resize</div> <div style="cursor:text">text</div> <div style="cursor:wait">wait</div> <div style="cursor:help">help</div>

 

결과는 아래와 같습니다.

각 속성값 명칭 위에 마우스를 올려보세요. 마우스 커서모양이 변하는 것을 보실 수 있을 겁니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_cursors.htm