CSS의 cursor 속성을 사용하면 요소 위에 마우스를 올렸을 때 표시되는 커서 모양을 자유롭게 변경할 수 있습니다. 십자 모양(crosshair), 포인터(pointer), 화살표 등 다양한 커서 스타일을 지정할 수 있어, 사용자 인터페이스의 사용성을 높이는 데 유용하게 활용됩니다.
cursor 속성 예제
아래 코드를 실행하면 각 div 요소에 지정된 cursor 값에 따라 서로 다른 커서 모양이 나타나는 것을 직접 확인할 수 있습니다.
<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>
주요 cursor 값 설명
위 예제에서 사용된 cursor 속성값과 그 의미는 다음과 같습니다.
| 속성값 | 설명 |
|---|---|
| auto | 커서 모양이 해당 영역의 맥락에 따라 자동으로 결정됩니다. 예를 들어 텍스트 위에서는 'I' 모양, 링크 위에서는 '손' 모양으로 표시됩니다. |
| crosshair | 십자선 또는 더하기(+) 모양의 커서가 표시됩니다. |
| default | 기본 화살표 모양의 커서가 표시됩니다. |
| pointer | 링크를 클릭할 수 있음을 나타내는 손가락 모양의 커서입니다. (구버전 IE 4에서는 'hand' 값을 사용했습니다.) |
| move | 요소를 이동할 수 있음을 나타내는 이동 커서가 표시됩니다. |
| e-resize | 상자의 오른쪽(동쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| ne-resize | 상자의 오른쪽 위(북동쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| nw-resize | 상자의 왼쪽 위(북서쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| n-resize | 상자의 위쪽(북쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| se-resize | 상자의 오른쪽 아래(남동쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| sw-resize | 상자의 왼쪽 아래(남서쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| s-resize | 상자의 아래쪽(남쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| w-resize | 상자의 왼쪽(서쪽) 가장자리를 이동할 수 있음을 나타냅니다. |
| text | 텍스트 입력 가능 영역임을 나타내는 'I' 빔 모양의 커서입니다. |
| wait | 작업 처리 중임을 나타내는 모래시계 또는 로딩 커서입니다. |
| help | 물음표 또는 말풍선 모양의 커서로, 도움말 버튼 위에 사용하기에 적합합니다. |
| <url> | 직접 만든 커서 이미지 파일의 경로를 지정하여 사용자 정의 커서를 사용할 수 있습니다. |
참고 사항
resize 계열 값(e-resize, n-resize 등)은 주로 창 크기 조절 핸들이나 드래그 앤 드롭 기능에 활용됩니다. 또한 <url> 값을 사용하면 PNG, CUR 등의 이미지 파일로 커스텀 커서를 만들 수 있으며, 여러 개의 URL을 쉼표로 나열해 대체 커서를 함께 지정하는 것이 좋습니다.