CSS의 cursor 속성을 사용하면 요소 위에 마우스를 올렸을 때 사용자에게 표시되는 마우스 포인터(커서)의 모양을 직접 지정할 수 있습니다. 버튼에는 손 모양을, 로딩 중에는 대기 커서를 보여주는 것처럼 상황에 맞는 커서를 설정하면 사용자 경험(UX)을 크게 향상시킬 수 있습니다.
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> | 직접 만든 커서 이미지 파일의 경로(URL)를 지정하여 커스텀 커서를 사용할 수 있습니다. |
사용 예시
다음과 같이 버튼이나 링크에 pointer 값을 적용하면 클릭 가능한 요소임을 직관적으로 알려줄 수 있습니다.
button {
cursor: pointer;
}
.loading-area {
cursor: wait;
}커스텀 이미지 커서 사용하기
<url> 값을 사용하면 원하는 이미지를 커서로 지정할 수 있습니다. 이때 이미지 로드에 실패할 경우를 대비해 쉼표(,) 뒤에 대체 커서 값을 함께 지정하는 것이 좋습니다.
.custom-cursor {
cursor: url('my-cursor.png'), auto;
}마무리
cursor 속성은 간단하지만 인터랙션의 의도를 시각적으로 전달하는 중요한 역할을 합니다. 요소의 기능에 맞는 커서 값을 적절히 활용하면 별도의 안내 문구 없이도 사용자에게 명확한 힌트를 줄 수 있습니다.