[ CSS ] cursor 속성

cursor 속성은 커서의 모양을 바꿀 때 사용한다.

CSS 2.1 버전에서 표준으로 인정되었다.

cursor의 속성값으로는 한 개 이상 지정할 수 있으며, 쉼표(,)로 구분짓는다.

표준으로 인정된 cursor의 속성값은 다음과 같다.

 
auto | crosshair | default | pointer | move  | text | wait | help | progress | 
e-resize | s-resize | w-resize | n-resize | ne-resize | nw-resize | se-resize | sw-resize | 
initial  | inherit 
 

이미지 파일을 이용할 수 있는 "custom cursor"도 표준으로 되어 있지만, 적용되지 않는 브라우저가 대부분이다.
custom cursor에 대한 자세한 설명은 이 문서 아래쪽에 있다.

msdn library에 설명이 없는 속성은, 익스플로러에서 적용이 안되는 것이라 생각된다.
파이어폭스는 거의 모든 속성값이 사용 가능하다.
사파리는 대부분 1.2 버전 이후부터 적용된다.
오페라에서는 표준으로 인정된 것만이 적용된다. (예외적으로 zoom-in, zoom-out은 사용 가능하다)

아래는 cursor에 지정할 수 있는 속성값 전체 목록이다.
표의 왼쪽 목록으로 마우스를 가져가보면, 포인터의 모양이 바뀐다.
바뀌지 않는다면, "내 브라우저에서는 적용이 안되는구나" 라고 생각하면 된다.

---

General

style="cursor: context-menu"	msdn에는 설명이 없으나 모질라의 mdn에 따르면, 윈도우용 IE10 이후 버전부터 적용됨. 현재 선택된 것에 관한 메뉴 목록이 있을 경우, 목록이 나타남. 메뉴 목록이 없으면, 나타나지 않음.
style="cursor: help"	도움말 커서. 물음표 모양.
style="cursor: pointer"	익스플로러 6이후 버전부터 적용됨. 연결(link)된 곳에 마우스를 올렸을 때 나타남. 보통 손가락으로 가리키는 모양. IE 5.0 이하 버전에서는 cursor:hand이므로, 웹호환을 위해서, 아래와 같이 작성한다. style="cursor: hand; cursor: pointer"
style="cursor: wait"	로딩 중일 때 나타나는 대기용 커서. 실행중이니 기다리라는 뜻. 손목시계나 모래시계, 또는 돌아가는 원모양.
style="cursor: progress"	익스플로러 6이후 버전부터 적용됨. 기본 화살표 모양 옆에 로딩 중일 때 나타나는 아이콘이 있는 형태. The program is busy in the background but the user can still interact with the interface (unlike for wait). 해석이 정확한지는 모르겠으나, 프로그램이 백그라운드에서 돌아가고 있다는 뜻으로 'wait'와는 다르게, 다른 작업을 할 수 있다는 것 같다.
style="cursor: initial"	초기 설정된 값.
style="cursor: inherit"	부모(상위) 요소에 지정된 값을 그대로 물려받도록 한다.

---

Links & status

style="cursor: auto"	태그(개체)에 따라, 브라우저에 기본적으로 설정되어 있는 커서값.
style="cursor: default"	기본 형태. 보통 화살표 모양으로 표시된다.
style="cursor: none"	커서가 나타나지 않음. msdn에는 설명이 없고, 파이어폭스의 mdn에 따르면 IE와 Opera에는 적용되지 않음. Firefox 3, Safari 5, Chrome 5 이후버전부터 적용됨.

---

Selection

style="cursor: cell"	msdn에 설명이 없음(IE 11에서는 됨). 선택 가능한 영역(cell)이라는 뜻.
style="cursor: crosshair"	십자가 모양. 초점을 맞출 때 사용됨.
style="cursor: text"	텍스트를 입력할 수 있는 창에서, 텍스트에 마우스를 가져다 대면 나타나는 일자 모양의 커서.
style="cursor: vertical-text"	익스플로러 6이후 버전부터 적용됨. 가로로 글자(text)를 선택할 수 있다는 뜻.

---

Drag and drop

style="cursor: alias"	msdn에 설명이 없음(IE 11에서는 됨). 단축키가 설정되어 있거나, 또 다른 이름이 지정되어 있다는 뜻.
style="cursor: copy"	msdn에 설명이 없음(IE 11에서는 됨). 복사 가능하다는 뜻.
style="cursor: move"	이동이 가능하다는 뜻. 보통 창이 이동 중임을 나타냄.
style="cursor: no-drop"	익스플로러 6이후 버전부터 적용됨. 접근 불가나 Drop 불가를 나타내냄.
style="cursor: not-allowed"	익스플로러 6이후 버전부터 적용됨. 접근 불가(허용 불가) 모양의 커서.

---

Resize & scrolling

style="cursor: all-scroll"	익스플로러 6이후 버전부터 적용됨. 좌, 우측 스크롤이 모두 가능할때 나타나는 커서.
style="cursor: col-resize"	익스플로러 6이후 버전부터 적용됨. 테이블의 행(column) 사이즈 조절 가능.
style="cursor: row-resize"	익스플로러 6이후 버전부터 적용됨. 테이블의 열(row) 사이즈 조절 가능.
style="cursor: e-resize"	박스의 크기 조절. 오른쪽(동쪽)으로 사이즈를 다시 조절할 수 있다는 뜻.
style="cursor: n-resize"	윗쪽(북쪽)으로 사이즈를 다시 조절할 수 있다는 뜻. 상단 모서리를 움직이는 형태.
style="cursor: s-resize"	아래쪽(남쪽)으로 사이즈를 다시 조절할 수 있다는 뜻. 하단 모서리를 움직이는 형태.
style="cursor: w-resize"	왼쪽(서쪽)으로 사이즈를 다시 조절할 수 있다는 뜻.
style="cursor: ew-resize"	msdn에 설명이 없음(IE 11에서는 됨). 좌우로 사이즈 조절 가능하다는 뜻.
style="cursor: ns-resize"	msdn에 설명이 없음(IE 11에서는 됨). 위아래로 사이즈 조절 가능하다는 뜻.
style="cursor: ne-resize"	북동쪽으로 사이즈를 다시 조절할 수 있다는 뜻. 상단 오른쪽 모서리를 움직이는 형태.
style="cursor: nw-resize"	북서쪽으로 사이즈를 다시 조절할 수 있다는 뜻. 상단 왼쪽 모서리를 움직이는 형태.
style="cursor: se-resize"	남동쪽으로 사이즈를 다시 조절할 수 있다는 뜻. 하단 오른쪽 모서리를 움직이는 형태.
style="cursor: sw-resize"	남서쪽으로 사이즈를 다시 조절할 수 있다는 뜻. 하단 왼쪽 모서리를 움직이는 형태.
style="cursor: nesw-resize"	msdn에 설명이 없음(IE 11에서는 됨).
style="cursor: nwse-resize"	msdn에 설명이 없음(IE 11에서는 됨).

---

Zoom

style="cursor: zoom-in" (파이어폭스) style="cursor: -webkit-zoom-in" (사파리)	msdn에 설명이 없음. 웹호환을 위해서 아래와 같이 작성한다. style="cursor: -webkit-zoom-in; cursor: zoom-in"
style="cursor: zoom-out" (파이어폭스) style="cursor: -webkit-zoom-out" (사파리)	msdn에 설명이 없음. 웹호환을 위해서 아래와 같이 작성한다. style="cursor: -webkit-zoom-out; cursor: zoom-out"

---

Grab

style="cursor: grab" (파이어폭스) style="cursor: -webkit-grab" (사파리)	msdn에 설명이 없음. 웹호환을 위해서 아래와 같이 작성한다. style="cursor: -webkit-grab; cursor: grab"
style="cursor: grabbing" (파이어폭스) style="cursor: -webkit-grabbing" (사파리)	msdn에 설명이 없음. 웹호환을 위해서 아래와 같이 작성한다. style="cursor: -webkit-grabbing; cursor: grabbing"

---

Custom Cursors ( 최종 수정일 : 2016년 2월 17일 )

커서 모양으로 이미지를 사용할 수도 있다.
이렇게 이미지를 사용한 커서를 "custom cursor"라고 부른다.

모바일용 브라우저에서는 적용이 안되는 걸로 알고 있다.

오페라에서도 적용되지 않는다.

사파리의 경우,
Windows 시스템에서는 사용할 수 없으나, 최신 버전의 OS에서는 가능하다는 얘기가 있다.
(윈도우만 사용해본 한국사람이라서... 직접 확인 불가함... ─.─;;)

익스플로러에서는 6 버전 이후부터 적용된다.

사용법은 아래와 같다.

style="cursor: url(smiley.gif), url(myBall.cur), auto"

첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고,
이것도 실패하면 마지막에 설정된 값(auto)이 적용된다.
이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다.
브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.

이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적당하다.

반투명(?)한 이미지는 윈도우xp 이전 버전에서는 적용되지 않는다.

익스플로러에서는 gif나 jpg, png 등은 적용되지 않으며, cur 와 ani 파일만 적용된다.

반면, 파이어폭스에서는 ani 파일이 적용되지 않는다.

이미지의 위치(좌표)를 지정할 수도 있으나, 파이어폭스에서만 가능한 듯 하다.
왼쪽 위치를 가리키는 x좌표가 먼저 오고, 그 다음에 위쪽 위치인 y좌표가 온다.
cursor: url(foo.png) 4 12, pointer;

아래는, 모질라의 MDN에 나와있는 내용으로, url 속성값을 사용할 때의 주의 사항이다.
미안하지만, 번역까지는... 못했다. (게을러서는 아니다. 절~~~대 아니다. ㅡ.ㅡ;;)

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supports URL values for the CSS cursor property on Windows and Linux.
Mac support was added in Gecko 2 (Firefox 4).
This allows specifying arbitrary images as mouse cursors — any image format supported by Gecko can be used.

All image formats supported by Gecko can be used.
This means that you can use PNG, GIF, JPG, BMP, CUR, etc. images.
ANI is not supported.
An animated PNG or GIF will not create an animated cursor.

Note:
Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1),
Gecko also supports the SVG image format for cursors.
However, the SVG image must contain a length-valued (not percentage-valued) height and width
on its root SVG node.
JavaScript, CSS animation, and declarative SMIL inside an SVG image are ignored;
you can't use SVG to create an animated cursor, for example.

In Gecko (Firefox) the limit of the cursor size is 128×128px.
Larger cursor images are ignored.
However, you should limit yourself to the size 32×32 for maximum compatibility
with operating systems and platforms.

(Due to a bug in Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 on Windows limits to 32x32px. This is fixed in later versions.)

Translucent cursors are not supported on Windows releases earlier than XP.
This is a limitation of the operating system.
Transparency works on all platforms.

---

아래는, 'Custom Cursor'를 사용할 수 없을 때에 커서를 바꿀 수 있는, 나만의 방법이다.
☞ [ 자바스크립트 ] 나만의 커서 사용하기

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*