내 홈페이지는 내가 원하는 커서를 사용하자.

2008. 9. 9. 15:20 IT 및 개발/HTML/CSS/JS
윈도우즈를 사용하다 보면 테마를 사용하게 됩니다. 테마에는 마우스 커서도 포함이 되어 있죠.
테마로 마우스 커서를 변경이 가능하지만 별도로 마우스 커서만 자신이 원하는 것으로 변경도 가능합니다.
그런데 홈페이지에서도 자신이 원하는 커서를 사용할 수 있는 방법이 있습니다.
CSS를 이용하여 아래와 같이 사용을 하면 됩니다.

1. 기본 커서 설정
- 아래와 같이 body 속성에 cursor의 url을 지정하면 홈페이지의 기본 커서를 설정할 수 있습니다.

<style type="text/css">
    body { cursor:url(http://.../body.cur), pointer; }
</style>


2. 링크 커서 설정
- 아래와 같이 a:hover 속성에 cursor의 url을 지정하면 링크의 커서를 설정할 수 있습니다.

<style type="text/css">
    a:hover { cursor:url(http://.../link.ani); }
</style>


3. 사용자 커서 설정
- 위와는 다르게 사용자가 지정한 부분만 원하는 커서로 변경하는 방법입니다.

<style type="text/css">
    .mycursor { cursor:url(http://.../custom.cur); }
</style>

위에 지정된 스타일을 사용하는 예제입니다.

<span class="mycursor">상현넘™ 블로그</span>

* 일반적인 커서파일 cur 파일이나 애니메이션 커서파일인 ani 파일을 이용하시면 됩니다.

작성자 : 상현넘™ [SHBLITZ.NET]