개요
cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.
auto : 자동
default : 기본값 (화살표)
pointer : 클릭시의 마우스 (손가락 모양)
wait : 로딩
등 다양한 종류의 cursor 속성이 있다.
사용법
<p style="cursor:wait">Wait</p>
예제
<html> <head> </head> <body> <p style="cursor:auto">Auto</p> <p style="cursor:crosshair">Crosshair</p> <p style="cursor:default">Default</p> <p style="cursor:pointer">Pointer</p> <p style="cursor:move">Move</p> <p style="cursor:e-resize">e-resize</p> <p style="cursor:ne-resize">ne-resize</p> <p style="cursor:nw-resize">nw-resize</p> <p style="cursor:n-resize">n-resize</p> <p style="cursor:se-resize">se-resize</p> <p style="cursor:sw-resize">sw-resize</p> <p style="cursor:s-resize">s-resize</p> <p style="cursor:w-resize">w-resize</p> <p style="cursor:text">Text</p> <p style="cursor:wait">Wait</p> <p style="cursor:help">Help</p> </body> </html>
출력 결과:
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Text
Wait
Help