CSS | cursor 종류 속성 / 마우스 커서 변경

2016. 8. 8. 16:34language/css

 

CSS의 cursor 속성에 대해서 간단히 알아본다.

 

어떤 속성이 어떤 모양인지만 알고 있어도 유용하게 사용할 수 있다.

 

 

 

각 커서 모양의 설명이나 사용가능한 스팩(브라우저 버전)에 대해서도 자세히 설명하지 않는다.

 

 

[ 화면 중간과 하단에 테스트해볼 수 있는 부분이 있으니 참고 ]

[ 화면 중간과 하단에 테스트해볼 수 있는 부분이 있으니 참고 ]

 

 

이미지 예시)

이미지 : Microsoft (https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx)

 



 

CSS 의 cursor 속성이다.

 

style="cursor:auto"
style="cursor:crosshair"
style="cursor:default"
style="cursor:pointer"
style="cursor:progress"
style="cursor:move"
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"
style="cursor:text"
style="cursor:wait"
style="cursor:help"
style="cursor:inherit"

 

표에 마우스를 올려보면 각 속성의 마우스 커서 모양을 알 수 있다.

 

Auth Crosshair Default
Pointer Progress Move
e-resize ne-resize nw-resize
n-resize se-resize sw-resize
s-resize w-resize Text
Wait Help Inherit

 

 

 



 

아래는 Microsoft 에서 캡쳐한 내용이다.

아래 이미지 또는 속성명에 마우스를 올려보면 정확한 모양을 알 수 있다.

브라우저에 따라 커서 모양이 다를 수 있고 혹은 지원되지 않을 수 있다. (같은 브라우저라도 버전에 따라 다를 수 있음)

출처 :  https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx

 

Currently Supported Cursors

When you use the cursor property on an element, the mouse pointer changes to the appropriate cursor when hovering over the element. The following values are supported for the cursor property.

 

Basic cursors

The following cursors were supported prior to Internet Explorer 6.

autoauto crosshaircrosshair defaultdefault movemove
handhand texttext waitwait helphelp

 

These cursors are "directional" or arrow cursors:

n-resizen-resize s-resizes-resize ne-resizene-resize sw-resizesw-resize
nw-resizenw-resize se-resizese-resize e-resizee-resize w-resizew-resize

 

Newer cursors

The following values are supported starting in Internet Explorer 6.

pointerpointer progressprogress not-allowednot-allowed no-dropno-drop
vertical-textvertical-text all-scrollall-scroll col-resizecol-resize row-resizerow-resize

 

Custom cursors

You can specify a custom cursor file using the cursor:url(file) style rule. The following are examples of custom cursors.

blue-ecursor1.cur bananacursor2.ani