HTML - 마우스 포인터 바꾸기

html을 사용해 웹페이지를 만들면서 가끔은 마우스 포인터를 바꾸고 싶을 때가 있다. 그때 적절히 사용할 수 있는 태그로 원래는 Style CSS를 적절히 활용하는 것이나, 엄청난 구조화나 어려운 작업이 없기 때문에 때에 따라 그냥 Copy & Paste 로 쓰도록 하자.

예제)
<img src="http://aaa.bbb.com/img.jpg" style="cursor:pointer;">

위 예제에서 스타일 구문을 적용할 경우 평범한 이미지 위에 마우스를 가져갈 경우 링크위에 마우스를 가져갔을때 나오는 손가락이 나온다.


기본적인 마우스 포인터의 모양은 다음과 같다.

crosshair: "+" 형태
default: 기본 형태
pointer: 링크 누를때의 손가락 모양
move: 창 이동 할때 마우스 포인터 모양
text: I-beam 모양, 텍스트 박스에 마우스가 올라 갔을 때
wait: 흔히 모래시계로 표현 됨
progress: 기본 마우스 포인터 + 모래시계
help: 물음표

이외에도 여러가지 종류가 있으며,

style="cursor:url('http://aaa.bbb.com/cursor-basic.cur')"

와 같은 형태를 이용해 cur, ani 파일을 사용할 수도 있다.

아래 링크 접속시 자세한 정보를 얻을 수 있다.
http://www.w3.org/TR/CSS21/ui.html#cursor-props