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-drop`은 `not-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-scroll`은 `move`와 같습니다.
  |
| `col-resize` | col-resize.gif | 
 항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를
 세로로 분리한 모양을 사용합니다.
  |
| `row-resize` | row-resize.gif | 
 항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를
 가로로 분리한 모양을 사용합니다.
  |
| `n-resize` | Example of a resize towards the top cursor | 
 움직일 수 있는 모서리. 예를 들어, `se-resize` 커서는 움직임이
 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의
 양방향 화살표를 대신 보여줍니다. 즉 `n-resize`와
 `s-resize`는 `ns-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> (en-US) <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <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 type | discrete |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

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