자바스크립트 커서(cursor) 속성이란?
커서(cursor) 속성은 마우스 포인터가 특정 요소 위에 위치할 때 화면에 표시될 커서의 종류를 설정하거나 반환하는 CSS 속성입니다. 자바스크립트를 활용하면 버튼 클릭과 같은 사용자 이벤트에 반응하여 커서 모양을 실시간으로 동적으로 변경할 수 있습니다.
예를 들어 crosshair, pointer, move, wait 등 다양한 커서 타입을 지정할 수 있으며, 이를 통해 사용자에게 시각적인 피드백을 제공하고 웹 페이지의 사용성을 높일 수 있습니다.
다음은 자바스크립트로 커서 속성을 구현한 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>JavaScript Cursor property</h1>
<p class="sample"></p>
<h3>
Hover the mouse over the above paragraph after clicking the below button
</h3>
<button class="Btn">Change Cursor</button>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.style.cursor = "crosshair";
});
</script>
</body>
</html>
코드 설명
document.querySelector()로 문단 요소와 버튼 요소를 각각 선택한 뒤, 버튼에 클릭 이벤트 리스너를 등록합니다. 버튼이 클릭되면 콜백 함수 내에서 sampleEle.style.cursor = "crosshair" 코드가 실행되어 해당 문단 위에 마우스를 올렸을 때 커서가 십자 모양(crosshair)으로 변경됩니다.
실행 결과
위 그림은 페이지가 처음 로드된 상태입니다. 아래의 “Change Cursor(커서 변경)” 버튼을 클릭하면 다음과 같이 화면이 바뀝니다.
버튼을 클릭한 후 해당 문단 위로 마우스를 올리면 기본 화살표 대신 십자형(crosshair) 커서가 표시되는 것을 확인할 수 있습니다. 이처럼 자바스크립트의 style.cursor 속성을 사용하면 상황에 맞게 커서 스타일을 유연하게 제어할 수 있습니다.