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

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

<url>
이미지 파일을 가리키는 url(…), 또는 쉼표로 구분한 url(…), url(…), … 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. cursor 속성값으로 URL 사용하기를 참고하세요.
<x> <y>
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 현재 위치에 놓을 수 없음.
bug 275173: Windows와 Mac OS X에서 no-dropnot-allowed와 같습니다.
not-allowed not-allowed.gif 요청한 행동을 수행할 수 없음.
grab grab.gif 잡을 수 있음. (잡아서 이동)
grabbing grabbing.gif 잡고 있음. (잡아서 이동)
크기 조절과 스크롤 all-scroll all-scroll.gif 모든 방향으로 이동 가능. (패닝)
bug 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

형식 구문

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing ] ]

예제

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
} 

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

명세

Specification Status Comment
CSS Basic User Interface Module Level 3
The definition of 'cursor' in that specification.
Recommendation Addition of several keywords and the positioning syntax for url().
CSS Level 2 (Revision 1)
The definition of 'cursor' in that specification.
Recommendation Initial definition.
초기값auto
적용대상all elements
상속yes
Mediaas each of the properties of the shorthand:
Computed valueas specified, but with <url> values made absolute
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
cursorChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.
IE Full support 4
Notes
Full support 4
Notes
Notes In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android Full support YesSafari iOS Full support 1Samsung Internet Android ?
aliasChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
all-scrollChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
autoChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
cellChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
col-resizeChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
context-menuChrome Full support 1
Notes
Full support 1
Notes
Notes This cursor is only supported on macOS and Linux.
Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes This cursor is only supported on macOS and Linux.
IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18
Notes
Full support 18
Notes
Notes This cursor is only supported on macOS and Linux.
Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
copyChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
crosshairChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
defaultChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome Full support 68
Notes
Full support 68
Notes
Notes Chrome also continues to support the prefixed versions.
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome 22 added Windows support.
Edge Full support 14Firefox Full support 27
Full support 27
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 55
Notes
Full support 55
Notes
Notes Opera also continues to support the prefixed versions.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera 22 added Windows support.
Safari Full support 11
Full support 11
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android No support NoChrome Android Full support 68
Notes
Full support 68
Notes
Notes Chrome also continues to support the prefixed versions.
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome 22 added Windows support.
Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
helpChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
inheritChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
moveChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
no-dropChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
noneChrome Full support 5Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 15Safari Full support 5WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 4.2Samsung Internet Android ?
not-allowedChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
pointerChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
progressChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
row-resizeChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
textChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
url()Chrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox 4 added macOS support.
IE Full support 6Opera Full support 15Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
url() positioning syntax
Experimental
Chrome Full support 1Edge No support NoFirefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox 4 added macOS support.
IE No support NoOpera Full support 15Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
vertical-textChrome Full support 1Edge Full support 12Firefox Full support 1.5IE No support NoOpera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
waitChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome Full support 37
Full support 37
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 24
Full support 24
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 24
Full support 24
No support 15 — 23
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android No support NoChrome Android Full support 37
Full support 37
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android No support NoOpera Android Full support 24
Full support 24
No support 14 — 24
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, mrstork, Sebastianz, teoli, claudepache
최종 변경자: alattalatta,