[HTML/CSS] 마우스 커서 손모양으로 바꾸기

 

cursor

웹에서 마우스 커서의 모양은 자동으로 변경됩니다.

링크가 있을 경우 손가락 모양으로,

텍스트를 입력하는 란에서는 텍스트 입력 커서로 자동으로 변경됩니다.

 

마우스 커서를 사용자 임의로 변경할 수도 있습니다.

이때, CSS의 cursor 속성을 사용합니다.

 

  예제  

<p class='pointer'>손모양</p>
<p class='wait'>로딩중</p>
<p class='zoomin'>돋보기</p>

.pointer {
  cursor: pointer;
}

.wait {
  cursor: wait;
}

.zoomin {
  cursor: zoom-in;
}

위 예제는 각 텍스트에 마우스 포인터를 가져가면

cursor 속성에 정의된 값에 따라

커서의 모양이 변경됩니다.

(pointer, wait, zoom-in)

 

 

좀 더 많은, 커서의 모양은

다음의 MSDN 문서를 참고하세요.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

cursor - CSS: Cascading Style Sheets | MDN

 

---

 

CSS의 cursor 속성을 사용하여

마우스 포인터의 모양을 변경하는 방법을 알아보았습니다.