html 포인터 변경, 커서 변경

마우스를 가져갔을때 스타일이 바뀌는 것 쯤이야 style 태그 혹은 css 에 쉽게 적용할 수 있습니다. 하지만, 매번 div 하나를 위해 css 클래스를 만들고 :hover 와 같이 작성을 하는 것은 참 귀찮습니다. 그래서 오늘은 div의 style=""태그 안에 사용할 수 있는 onmouseover 효과를 적겠습니다

 

커서를 적용을 할 때에는, 많은 방법이 있겠지만, 설명드리게 될 방식은 한 번(한 페이지)만 실행될 커서 변경에 대한 코드입니다

아래는 지정할 수 있는 커서들의 목록이에요!

auto		사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다.
default		플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.
none		커서 없음.
context-menu		콘텍스트 메뉴 사용 가능.
help		도움말 사용 가능.
pointer		링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.
progress		프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대)
wait		프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.
cell		표의 칸이나 여러 칸을 선택할 수 있음.
crosshair		십자 커서. 종종 비트맵 선택에 사용합니다.
text		글씨 선택 가능. 보통 I빔 모양입니다.
vertical-text		세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.
alias		별칭이나 바로가기를 만드는 중.
copy		복사하는 중.
move		움직이는 중.
no-drop		현재 위치에 놓을 수 없음. bug 275173: Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다.
not-allowed		요청한 행동을 수행할 수 없음.
grab		잡을 수 있음. (잡아서 이동)
grabbing		잡고 있음. (잡아서 이동)
all-scroll		모든 방향으로 이동 가능. (패닝) bug 275174: Windows에서 all-scroll은 move와 같습니다.
col-resize		항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.
row-resize		항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.
n-resize		움직일 수 있는 모서리. 예를 들어, se-resize 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 n-resize와 s-resize는 ns-resize와 같습니다.
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize		양방향 크기 조절 커서.
ns-resize
nesw-resize
nwse-resize
zoom-in		확대/축소할 수 있음.
zoom-out

 

See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.