마우스커서를 원하는 이미지로 변경해보자

 

 

안녕하세요 :) 무택입니다🧔

이번에 알아볼 기능은 가끔 웹페이지에서 마우스커서가 기본 커서가 아니라 커스텀 커서인 경우를 볼 수 있는데 바로 그 기능, 마우스커서 커스텀 변경 기능입니다. 일반적인 경우에는 사용하지 않지만 브랜딩이 잘 되어있거나 자신만의 색깔을 나타내고자 할 때 사용하면 좋은 기능이라고 생각합니다. 잘 사용하면 효과를 볼 수 있지만 잘 사용하지 못하면 오히려 마이너스인 경우가 많은 것 같아요.

 

 

HTML

<div class="top">텍스트</div>
<div class="middle">텍스트</div>

 

CSS

.top {width: 100%; height: 150px; background: #555;}
.middle {width: 100%; height: 150px; background: #999;}
.top:hover { cursor : url(https://i.ibb.co/wNg5NbF/2.png), auto; }
.middle:hover {cursor : url(https://i.ibb.co/wNg5NbF/2.png)64 64, auto;}

 

See the Pen 마우스커서 이미지로 변경하기 by TytanLee (@TytanLee) on CodePen.

 

여기서 {cursor : url(...), auto;} 코드가 커스텀 이미지로 바꿔주는 코드입니다. 보여줄 이미지 링크를 설정하고 ,뒤에 오는 auto는 앞의 url(...)이 정상적이지 않을 때 나타낼 코드입니다. {cursor : url(...), url(...);} 이렇게 설정해줘도 상관이 없습니다. 참고로 마우스 커서의 이미지는 128x128까지의 크기만 지원하니 너무 큰 이미지로 설정하면 안 나올 수 있습니다.

 

html{
  cursor: url(...), url(...), auto;
}

body{
  cursor: url(...), url(...) 4 4, auto; /*url뒤의 4 4는 이동시킬 픽셀 설정*/
}

 

보통은 html 전체에 설정하거나 body에 설정하기도 하고 원하는 섹션에서만 설정하기도 합니다. 그럼 많은 도움 되었으면 하면서 마무리하겠습니다.

혹시라도 잘못된 코드가 있다면 댓글 부탁드립니다.