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

 

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.

auto	crosshair	default	move
hand	text	wait	help

 

These cursors are "directional" or arrow cursors:

n-resize	s-resize	ne-resize	sw-resize
nw-resize	se-resize	e-resize	w-resize

 

Newer cursors

The following values are supported starting in Internet Explorer 6.

pointer	progress	not-allowed	no-drop
vertical-text	all-scroll	col-resize	row-resize

 

Custom cursors

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

cursor1.cur

cursor2.ani