cursor
CSS 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> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
사용 일람
예제
.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 type | discrete |
브라우저 호환성
BCD tables only load in the browser