Dev/HTML, CSS

[css] 손가락 모양의 커서, cursor:pointer

bskyvision.com 2020. 12. 30. 13:56

클릭했을 때 어떠한 액션이 취해지는 요소들에는 커서를 올렸을 때 손가락 모양으로 변하게 해주는 것이 좋습니다. 그렇지 않으면 이것이 클릭 가능한 것인지 가늠하기 힘들기 때문입니다. 이것을 가능하게 하려면 css의 cursor 속성을 활용해야 합니다. 

 

css에 cursor:pointer가 있는 요소에 마우스를 올렸을 때는 커서가 손가락 모양으로 보입니다.

 

 

cursor:pointer로 꾸며주지 않은 요소는 다음과 같이 보입니다. 

 

 

코드는 아래를 참고하세요.

 

<div style="cursor:pointer">cursor:pointer로 꾸며준 요소</div>
<div>cursor:pointer로 꾸미지 않은 요소</div>

 

(이 글은 2021-5-1에 마지막으로 수정되었습니다)