[Etc/HTML & CSS]
CSS를 이용한 마우스 커서 모양 지정

2020. 4. 10. 07:39


해당 포스트는 이 글을 인용해 작성되었습니다. 유용한 정보라 공유한다.

이 기능을 잘 이용하면 사용자가 마우스 커서의 아이콘만 보고도 클릭했을때 대충 어떤 기능이 동작하겠구나를 예측할 수 있게 만들수 있을것같다.

<p style="cursor:auto">Auto</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>

아래 단어 위에 마우스 커서를 가져다 마우스 커서의 모양이 변경됩니다.

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help