cursor

/* 키워드 값 */
cursor: pointer;
cursor: auto;

/* URL, 대체용 키워드 */
cursor: url(hand.cur), pointer;

/* URL과 좌표 및 대체 키워드
crsor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* 전역 값 */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor 속성은 쉼표로 구분한 0개 이상의 <url>과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 <url>은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.

<url>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 x, y 좌표를 나타냅니다.

아래 예제는 <url> 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 <x><y> 좌표도 설정했으며 모두 불러올 수 없으면 progress 키워드를 사용합니다.

cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;

<url>

이미지 파일을 가리키는 url(…), 또는 쉼표로 구분한 url(…), url(…), … 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. cursor 속성값으로 URL 사용하기를 참고하세요.

<x> <y> Experimental

xy 좌표. 32 미만의 <number>여야 합니다.

키워드 값

행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.

카테고리	CSS 값	예제	설명
일반	auto		사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다.
	default		플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.
	none		커서 없음.
링크와 상태	context-menu		콘텍스트 메뉴 사용 가능.
	help		도움말 사용 가능.
	pointer		링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.
	progress		프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대)
	wait		프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.
선택	cell		표의 칸이나 여러 칸을 선택할 수 있음.
	crosshair		십자 커서. 종종 비트맵 선택에 사용합니다.
	text		글씨 선택 가능. 보통 I빔 모양입니다.
	vertical-text		세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.
드래그 앤 드롭	alias		별칭이나 바로가기를 만드는 중.
	copy		복사하는 중.
	move		움직이는 중.
	no-drop		현재 위치에 놓을 수 없음. [Firefox bug 275173](https://bugzil.la/275173): Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다.
	not-allowed		요청한 행동을 수행할 수 없음.
	grab		잡을 수 있음. (잡아서 이동)
	grabbing		잡고 있음. (잡아서 이동)
크기 조절과 스크롤	all-scroll		모든 방향으로 이동 가능. (패닝) [Firefox bug 275174](https://bugzil.la/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

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]  

<url> = 
  <url()>  |
  <src()>  

<x> = 
  x  

<y> = 
  y  

<url()> = 
  url( <string> (en-US) <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> (en-US) <url-modifier>* )  

비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 사용자 에이전트가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.

브라우저 호환성 항목에서 커서 크기 제한을 찾아보세요.

• cursor 속성값으로 URL 사용하기
• pointer-events (en-US)