CSS의 cursor 속성은 요소 위에 마우스를 올렸을 때 화면에 표시되는 마우스 포인터(커서)의 종류를 지정할 수 있게 해주는 속성입니다. 버튼 위에서는 손가락 모양으로, 작업 처리 중에는 대기 표시로 바꾸는 등 사용자에게 시각적인 피드백을 제공하여 웹 페이지의 사용자 경험(UX)을 크게 향상시킬 수 있습니다.
기본 예제
아래 예제는 각 단어 위로 마우스를 올려보면 커서 모양이 어떻게 달라지는지 보여줍니다.
<html>
<head>
</head>
<body>
<p>단어 위로 마우스를 올려보고 커서의 변화를 확인해 보세요:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
</body>
</html>
자주 사용되는 cursor 속성값
- auto – 브라우저가 문맥에 따라 기본 커서를 자동으로 결정합니다.
- crosshair – 십자 모양의 커서로, 그리기 도구나 정밀한 위치 선택이 필요한 요소에 적합합니다.
- default – 운영체제의 기본 커서(일반적인 화살표)를 표시합니다.
- pointer – 클릭 가능한 링크나 버튼임을 나타내는 손가락 모양의 커서입니다.
- text – 텍스트를 선택하거나 편집할 수 있음을 나타내는 I자형 커서입니다.
- wait – 작업이 진행 중임을 알리는 대기 커서입니다.
- help – 도움말이 제공됨을 나타내는 물음표 모양의 커서입니다.
- not-allowed – 해당 영역에서 특정 동작이 허용되지 않음을 나타냅니다.
이처럼 cursor 속성을 상황에 맞게 활용하면 웹 페이지의 인터랙티브 요소를 훨씬 더 직관적으로 만들 수 있습니다. 각 값을 직접 적용해 보면서 어떤 커서가 어떤 상황에 어울리는지 익혀보세요.