마우스 커서 커스텀하기
우리의 웹사이트 내에서만 마우스 커서를 좀 이쁘게 바꾸고 싶을때가 있습니다.
그럴때 css cursor custom으로 구글링을 하면 빠르게 css코드를 찾을 수 있습니다.
html{cursor: url(cursor file path), default;위의 코드는 html태그 내에서 즉 우리의 webpage내 모든 영역에서 cursor를
url이 가리키는 곳에 위치한 image로 대체하겠다는 의미입니다.(local 과 web상의 주소 모두 가능)
만약 가져오는 것을 실패하게 될경우 default라는 cursor모양으로 사용을 하겠다 라는
alt부분 까지 지정해주었습니다.
그런데!
커스텀 마우스 커서가 동작하지 않을때는
1. 개발자 도구로 들어가서 우리가 가져오려는 cursor image파일을 잘 가져오는지 확인해줍시다.
제대로 가져오지 못한다면 경로를 다시한번 확인해줍시다.2. 잘 가져오는데 image파일이 보이지 않고 alt로 보인다면 브라우저를 확인해줍시다.
Internet Explorer는 .cur 확장자의 cursor image파일만을 지원합니다.
그 이외의 브라우저에서는 .png , .cur , .jpg , .gif 를 모두 지원합니다.
따라서 .cur 확장자로 변경해줍시다.
3. image 의 size를 확인해줍시다.
호환성등의 여러 문제로 인해 image size는 32x32로 제한합니다.
따라서 image의 size를 변경한 뒤에 다시 custom cursor를 설정해줍시다.
