HTML - class modal popup mouse cursor 변경

오늘은 조금은 단순한 생각에서 개발 메모를 해본다.

최근 구현한 기능중에 Modal을 이용한 popup 기능을 개발하였는데, 마우스를 올리면, 마우스 커서가 변경이 되지 않아 사용자들에게 링크인지 혼돈? 줄 수 있을 것 같아, 이 기능이 어떻게 구현할 수 있는 찾아보았다.

그런데 답은 의외로 단순하게 CSS에 cursor를 선언 해주면 된다.

 

 

아래와 같이 CSS 파일에 cursor를 선언해주자.

.model-popup-btn {
    cursor: pointer;
}

그리고 사용하고자 하는 아이콘에 class를 추가로 지정해주면 끝이다.

 

웹 사이트를 들어가서 확인하면, 정상적으로 마우스를 아이콘에 올려놓을 때 링크에 사용되는 손 아이콘이 나타나는 것을 알 수 있다.