[HTML&CSS] 마우스 커서 변경하기(물음표, 금지, 손가락 등)

마우스 포인터

마우스 커서는 여러 가지 종류가 있다.

버튼이나, 링크의 경우 손가락으로 변경되고,

무언가를 입력하는 창에서는 글씨를 쓸 수 있을 것 같은 모양의 포인터로 변경된다.

클릭하면 안 되는 것에는 금지 표시로 보여주면 좀 더 직관적으로 표현될 수 있다.

보통은 알맞게 변경되는데, 버튼에 도움말 표시를 달아주던가,

버튼이지만 클릭이 되지 않는 것을 보여주도록 일반 포인터로 바꾸던가 할 때는 강제로 변경시켜줘야 한다.

변경하기 위한 속성은 cursor 속성을 사용하면 된다.

 

cursor 속성별 정리

1. cursor : default 

기본 마우스 포인터 모양이다.

 

2. cursor : none

마우스 포인터를 보이지 않게 없앤다.

 

3. cursor : help

커서에 물음표 모양을 추가시킨다.

 

4. cursor : move

네 방향으로 퍼진 아이콘으로 변경시킨다.

 

5. cursor : text

텍스트 입력 모양으로 변경시킨다.

 

6. cursor : no-drop 또는 not-allowed

금지 모양의 포인터로 변경시킨다.

 

7. cursor : progress 또는 wait

동그랗게 돌아가는 기다림 모양으로 변경시킨다.

 

8. cursor : zoom-in 또는 zoom-out

+커서 또는 -커서로 변경시킨다.

 

전체 속성은 아래에서 볼 수 있다.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

Tryit Editor v3.6