cursor

CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.

시도해보기

구문

css
/* 키워드 값 */
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 키워드를 사용합니다.

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

확대/축소할 수 있음.

zoom-out zoom-out.gif

형식 구문

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> <url-modifier>* ) |
<url-token>

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

사용 일람

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

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

예제

css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* URL을 쓸 땐 키워드 값 필수 */
.baz {
  cursor: url("hyper.cur"), auto;
}

명세

Specification
CSS Basic User Interface Module Level 4
# cursor
초기값auto
적용대상all elements
상속yes
계산 값as specified, but with url values made absolute
Animation typediscrete

브라우저 호환성

BCD tables only load in the browser

같이 보기