CSS로 마우스 커서를 내가 원하는 이미지로 변경하기 | 커서가 안 바뀔 때

 

웹사이트를 만들 때 클라이언트의 요구 혹은 디자이너의 요구로 인해 커서를 내가 원하는 이미지로 변경해야 하는 경우가 생깁니다.

시스템에서 제공해주는 기본 커서로 변경하는 방법은 매우 간단합니다.

시스템 기본 커서로 변경하는 방법 입니다.

.link:hover { cursor : pointer; }

가장 많이 쓰이는 방법이며, 특정 태그를 마우스 오버 했을 때 손가락 모양으로 바꾸는 코드입니다.

pointer 외에도 기본적인 시스템 커서는 아래 링크에서 확인해 보시면 됩니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/cursor

cursor - CSS: Cascading Style Sheets | MDN

 

내가 원하는 이미지를 이용해서 커서를 변경할 때에는 아래와 같은 방법을 이용 합니다.

.link:hover { curosr : url(cursor.png) 20 30, url(cursor2.png) 20 30, auto; }

기본 커서로 변경하는 것 보다 다소 복잡해 보일 수 있는데 그리 어렵지는 않습니다.

 

url(cursor.png) 20 30, url(cursor2.png) 20 30, auto;

위 코드를 3개의 구역으로 나누면 쉼표를 기준으로 나눠지게 됩니다.

현재는 3개로 나눴지만 url을 입력해 주는 부분은 1개를 사용해도되며, 2개 이상 사용하셔도 됩니다.

url을 여러개 써줬을 경우는 첫번째(파란색)이미지 로딩이 실패했을 경우 두번째(초록색)를 실행하며, 두번째도 실패했을 경우 세번째(보라색)코드를 실행하여 현재 상황에 맞는 커서로 자동 변경 됩니다.

 

맨 마지막 값인 auto는 url을 사용할때는 반드시 입력해 주어야 합니다.

물론 auto가 아닌 pointer, grap, wait 등의 기본 커서명을 입력해 주셔도 됩니다.

 

그럼 url을 입력했을 때 각 입력값들이 무엇을 의미하는지 알아보겠습니다.

 

url(cursor.png) 20 30

cusor.png는 커서로 변경하고자 하는 이미지의 경로 입니다.

/img/curosr.png 처럼 경로와 함께 입력도 가능합니다.

 

url(cursor.png) 20 30

이미지의 x좌표 y좌표를 의미합니다. 좌표값을 입력해주지 않아도 사용이 가능하지만 입력해주지 않을 경우 마우스 포인터의 우측 하단에 이미지가 표시됩니다. 그럼 약간 부자연스럽게 보일 수 있어 마우스 포인트 중앙에 이미지를 위치 시키고 싶을 때 혹은 원하는 위치에 표시해 줄 때 사용이 됩니다.

만약에 이미지 사이즈가 40px * 60px 일 때 마우스 포인터 정중앙으로 이미지를 위치 시키고 싶을 때는 이미지 사이즈의 절반 20 30을 입력해주시면 됩니다.

x좌표에 입력한 값 만큼 왼쪽으로 이동, y좌표에 입력한 값 만큼 위로 이동 합니다.

 

 

만약 이미지 대신 커서의 확장자인 .cur 파일을 이용하고 싶으신 경우에는 아래 사이트에서 png파일을 cur파일로 변환할 수 있습니다.

https://convertio.co/kr/png-cur/

PNG CUR 변환 (온라인 무료) — Convertio

 

cur파일을 웹에서 직접 도트를 찍어 만들수 있는 사이트도 있습니다.

물론 기존 파일을 업로드하여 사이즈 및 위치 조정도 가능합니다.

https://www.cursor.cc/

Cursor Editor

 

마우스 커서 이미지를 적용했는데 바뀌지 않아요.

 

마우스 커서를 이미지로 변경을 했는데 커서가 정상적으로 적용이 되지 않는 경우가 있습니다.

개발자 도구로 확인해봐도 이미지 경로도 정확한데 안나오는 경우입니다. 저도 이런 경우가 있어 많이 헤맸습니다.ㅠ

 

보통 이런 경우는 이미지 사이즈가 너무 커서 그렇습니다.

마우스 커서로 사용할 수 있는 이미지의 최대 크기는 128px이기 때문에 이미지가 128px 이상이라면 경로가 정확함에도 불구하고 아예 무시를 해버립니다.

마우스커서에 사용하는 이미지는 반드시 128px이하의 사이즈로 사용하셔야 합니다.