[CSS] 마우스오버 시 (마우스를 갖다댈 때) 손모양 커서로 바꾸기 - cursor 속성

CSS

 

예를 들어, 어떤 글자에 마우스를 갖다댔을 때 마우스의 모양이 손가락 모양으로 바뀌게 하고 싶다면 CSS 속성값을 주면 된다.

cursor: pointer;

위 속성값을 주면 글씨에 마우스오버를 할 때 커서가 손모양으로 바뀌게 된다.

 

 

👍실제 사용 사례:

팔로잉 <strong @click="moveFollow" style="color: red; cursor: pointer;">{{ following_cnt }}</strong>

현재 진행 중인 프로젝트에서 마우스오버 시 커서 모양을 변경하는 속성을 사용한 부분의 코드를 예시로 들어봤다.

style 태그 안에 cursor 속성을 지정해준 것을 확인할 수 있다.

---

🌷참고 사이트:

https://www.w3schools.com/cssref/pr_class_cursor.asp

CSS cursor property

위 사이트에 다양한 cursor 속성값들이 소개되어있다.

그리고 Try it Yourself >> 버튼을 클릭하면

이렇게 실제 코드가 작성된 페이지가 나타나고, 실행된 결과인 오른쪽 부분에서 마우스를 갖다대면 주어진 속성값에 해당하는 모양으로 커서가 변경되는 것을 확인할 수 있다.