[HTML/CSS] 커서(cursor)디자인 정하기

 

 

 

커서(cursor) 디자인 정하기

cursor 속성을 이용하면 마우스가 위치할 때, 마우스 커서의 형태를 지정할 수 있습니다.

 

 

 

커서 디자인 종류

default		e-resize
pointer		ne-resize
move		nw-resize
no-drop		n-resize
auto		se-resize
crosshair		sw-resize
text		s-resize
wait		w-resize
help

 

 

 

 

cursor의 속성값은 style="cursor:         "로 입력한다.

style="cursor:default"
style="cursor:pointer"
style="cursor:move"
style="cursor:no-drop"
style="cursor:auto"
style="cursor:crosshair"
style="cursor:text"
style="cursor:wait"
style="cursor:help"
style="cursor:e-resize"
style="cursor:ne-resize"
style="cursor:nw-resize"
style="cursor:n-resize"
style="cursor:se-resize"
style="cursor:sw-resize"
style="cursor:s-resize"
style="cursor:w-resize"

 

 

 

 

결과값

글자위에 마우스를 올리면 커서 형태가 바뀌는 것을 확인할 수 있습니다.

default

pointer

move

no-drop

auto

crosshair

text

wait

help

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

 

 

https://blog.naver.com/anyeong-soft/223542366804