[마우스 꾸미기 3탄] 마우스를 내가 만든 아이콘으로 바꾸기

드디어 마우스 꾸미기 3탄!

내가 만든 아이콘으로 변경하는 법에 대해 설명하고자 한다.

---

3) 내가 만든 마우스로 지정하기

 

참고로 나는 마우스를 만드는 사이트에서 만들었다. 아래 사이트에서 쉽게 아이콘을 제작해서 저장할 수 있기 때문에 활용해 보았다.

Cursor Editor

사이트에 들어가면 아래와 같이 점을 찍어서 도트 형식으로 마우스 아이콘을 그릴 수 있도록 되어 있다.

자유롭게 만들어서 저장도 가능하고, 만들다 망쳤을 때에는 Create New Cursor를 눌러서 다시 새로 도트를 찍어서 만들 수 있다.

다 만든 아이콘을 다운로드 해서 저장한 뒤, 

블로그 관리> 스킨 편집> html편집에서 파일 업로드를 이용해서 커서를 업로드했다.

나의 경우에는 링크를 눌렀을 때와 누르지 않았을 때의 커서 모양을 다르게 하고 싶은 마음에

2가지로 제작해서 2가지 모두 업로드를 했다.

 

그리고 업로드한 파일을 적용하기 위해서 CSS탭을 눌러서 아래와 같이 소스를 넣어주었다.

  <CSS> 기본 마우스 모양 변경

html, body { cursor: url('./images/cursor.cur'), auto;} 

  <CSS> 링크 클릭 시 커서 모양 변경

a, a:link { cursor: url('./images/cursor2.cur'), auto;} 
a:hover, a:focus { cursor: url('./images/cursor2.cur'), auto;} 
a:active {cursor: url('./images/cursor2.cur'), auto;} 

소스를 넣어준 후엔 적용 후 새로고침을 하면 마우스 커서 모양이 바뀐 것을 확인할 수 있다.

링크 클릭 시 다른 모양으로 바뀌는 것 까지 확인하고 나면 Ok.

이상으로 3가지의 마우스 모양을 변경하는 방법을 다룬 포스팅을 마친다.

추가로 괜찮은 방법을 알게 되면 4탄을 포스팅해 보겠다 :)

---

참고 사이트

[css] 마우스 커서 이미지 바꾸기 - 브라우저별 이미지 확장자 유의

---

[마우스 꾸미기 1탄] 마우스 모양 바꾸기

기본 커서의 속성을 바꿔 마우스 모양을 GUI에서 사용하는 모양으로 바꾸는 방법에 대해 설명했다.

마우스 모양 바꾸기

[마우스 꾸미기 2탄] 마우스 아이콘의 이미지를 변경

마음에 드는 아이콘을 웹 배포용 이미지를 이용하여 변경할 수 있다.

이 부분에 대해선 아래의 포스팅을 참고하길 바란다.

[마우스 꾸미기 2탄] 마우스 아이콘 바꾸기