CSS 커서 속성을 사용하면 십자형 또는 더하기 기호, 포인터 등을 표시할 수 있습니다. 다음 코드를 실행하여 CSS에서 커서 속성을 구현해 볼 수 있습니다 −
예시
<html> <head> </head> <body> <div style = "cursor:auto">Auto</div> <div style = "cursor:crosshair">Crosshair</div> <div style = "cursor:default">Default</div> <div style = "cursor:pointer">Pointer</div> <div style = "cursor:move">Move</div> <div style = "cursor:e-resize">e-resize</div> <div style = "cursor:ne-resize">ne-resize</div> <div style = "cursor:nw-resize">nw-resize</div> <div style = "cursor:n-resize">n-resize</div> <div style = "cursor:se-resize">se-resize</div> <div style = "cursor:sw-resize">sw-resize</div> <div style = "cursor:s-resize">s-resize</div> <div style = "cursor:w-resize">w-resize</div> <div style = "cursor:text">text</div> <div style = "cursor:wait">wait</div> <div style = "cursor:help">help</div> </body> </html>
위에 아래 값을 추가했습니다 -
| 값 | 설명 |
|---|---|
| 자동 | 커서의 모양은 커서가 있는 컨텍스트 영역에 따라 다릅니다. 예를 들어, 텍스트 위의 'I', 링크 위의 'hand' 등입니다. |
| 십자선 | 십자선 또는 더하기 기호 |
| 기본값 | 화살표 |
| 포인터 | 가리키는 손(IE 4에서 이 값은 손임). |
| 이동 | '나' 막대 |
| 전자 크기 조정 | 커서는 상자의 가장자리가 오른쪽(동쪽)으로 이동할 것임을 나타냅니다. |
| 크기 조정 | 커서는 상자의 가장자리가 위쪽 및 오른쪽(북쪽/동쪽)으로 이동할 것임을 나타냅니다. |
| nw-크기 조정 | 커서는 상자의 가장자리가 위쪽 및 왼쪽(북쪽/서쪽)으로 이동할 것임을 나타냅니다. |
| n-크기 조정 | 커서는 상자의 가장자리가 위쪽(북쪽)으로 이동할 것임을 나타냅니다. |
| 크기 조정 | 커서는 상자의 가장자리가 아래 및 오른쪽(남쪽/동쪽)으로 이동됨을 나타냅니다. |
| sw-크기 조정 | 커서는 상자의 가장자리가 아래 및 왼쪽(남쪽/서쪽)으로 이동될 것임을 나타냅니다. |
| s-크기 조정 | 커서는 상자의 가장자리가 아래로(남쪽) 이동됨을 나타냅니다. |
| w-크기 조정 | 커서는 상자의 가장자리가 왼쪽(서쪽)으로 이동할 것임을 나타냅니다. |
| 텍스트 | I 막대. |
| 대기 | 모래시계. |
| 도움말 | 도움말 버튼 위에 사용하기에 이상적인 물음표 또는 풍선. |
| 커서 이미지 파일의 소스. |