CSS로 커서 이미지 변경하기: 커스터마이징과 문제 해결 가이드
웹사이트를 제작하다 보면 클라이언트나 디자이너의 요구에 따라 마우스 커서를 특정 이미지로 변경해야 하는 경우가 생깁니다.
이 글에서는 기본 커서 변경 방법, 커스텀 이미지 커서 적용법, 그리고 커서가 적용되지 않을 때의 원인과 해결 방법까지 상세히 알아보겠습니다.
기본 커서로 변경하는 방법
시스템에서 제공하는 기본 커서로 변경하는 방법은 매우 간단합니다. 가장 많이 사용하는 방법은 특정 태그에 마우스 오버 시 손가락 모양으로 바꾸는 코드입니다.
.link:hover {
cursor: pointer;
}pointer 외에도 다양한 시스템 기본 커서가 있습니다. 아래 링크에서 기본 커서 목록과 상세 설명을 확인할 수 있습니다.
커스텀 이미지로 커서 변경하는 방법
내가 원하는 이미지를 커서로 사용하려면 아래와 같은 방법을 사용합니다.
.link:hover {
cursor: url(cursor.png) 20 30, url(cursor2.png) 20 30, auto;
}코드 설명
- url(cursor.png): 커서로 사용할 이미지 경로.
- 20 30: 이미지의 x, y 좌표를 의미하며, 이미지를 마우스 포인터의 원하는 위치에 표시할 때 사용.
(예: 이미지 크기가 40 x 60px 이라면 정중앙에 위치시키기 위해 20 30 입력). - auto: 기본 커서(예: pointer, wait 등)를 지정하며, 필수적으로 포함해야 함.
이미지 경로와 포맷
- cursor.png: 커서로 사용할 이미지 경로.
- /img/cursor.png: 경로와 함께 사용할 수 있음.
- .cur 파일 사용 가능: PNG 이미지를 .cur 파일로 변환 하려면 Convertio 같은 도구를 활용.
- 직접 .cur 파일 제작: Cursor.cc를 통해 웹에서 직접 제작 가능.
여러 URL을 사용할 때의 동작
쉼표(,)로 구분된 URL은 순서대로 대체 커서를 지정합니다.
- 첫 번째 url(cursor.png) 로딩 실패 시 → 두 번째 url(cursor2.png) 실행.
- 두 번째도 실패하면 → 기본값(auto)로 대체.
커서가 바뀌지 않을 때: 문제와 해결 방법
커스터마이징한 커서가 적용되지 않는 경우가 종종 있습니다. 아래에서 주요 원인과 해결책을 살펴봅니다.
- 이미지 크기의 문제
- 원인: 마우스 커서로 사용할 이미지의 최대 크기는 128x128px입니다. 이를 초과하면 경로가 정확해도 무시됩니다.
- 해결책: 이미지를 128px 이하로 줄여 사용하세요.
- 경로 문제
- 원인: 이미지 경로가 잘못되었거나 파일이 존재하지 않을 수 있음.
- 해결책: 개발자 도구(Chrome DevTools)로 경로와 파일 로딩 상태를 확인하세요.
- 브라우저 호환성 문제
- 원인: 일부 오래된 브라우저나 특정 환경에서는 cursor: url() 속성이 제대로 동작하지 않을 수 있음.
- 해결책: 주요 브라우저(Chrome, Edge, Firefox 등)에서 테스트하고, 기본 커서를 auto로 설정해 대비하세요.
유용한 도구와 참고 링크
- 이미지 변환 도구: Convertio - PNG to CUR
- 커서 제작 도구: Cursor.cc
- CSS 커서 속성 참고: MDN: cursor - CSS
마무리
CSS로 마우스 커서를 변경하는 방법은 비교적 간단하지만, 커스텀 이미지를 사용하는 경우 이미지 크기, 경로, 브라우저 호환성을 주의해야 합니다. 위 내용을 참고하여 깔끔한 커스텀 커서를 적용해 보세요!