JavaScript로 커서 유형 설정하기
마우스 포인터에 표시되는 커서의 종류를 변경하려면 JavaScript의 cursor 속성을 사용하면 됩니다. 이 속성을 활용하면 버튼 클릭과 같은 특정 이벤트가 발생했을 때 커서 모양을 동적으로 바꿀 수 있습니다.
예를 들어, 일반적인 화살표 대신 클릭 가능한 요소임을 나타내는 손가락 모양(pointer)으로 커서를 변경할 수 있습니다.
주요 커서 값
cursor 속성에는 다양한 값을 지정할 수 있습니다.
- default: 기본 화살표 커서
- pointer: 링크 클릭 시 나타나는 손가락 모양
- wait: 처리 중임을 나타내는 로딩 커서
- crosshair: 십자선 모양
- text: 텍스트 입력 영역에서 사용되는 I자형 커서
예제 코드
아래 코드는 버튼을 클릭하면 제목(h1) 요소 위에 마우스를 올렸을 때 커서가 pointer(손가락 모양)로 변경되는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1 id="myID">Heading 1</h1>
<p>마우스를 올리기 전과 후의 커서 변화를 확인해 보세요.</p>
<button type="button" onclick="display()">커서 변경하기</button>
<script>
function display() {
document.getElementById("myID").style.cursor = "pointer";
}
</script>
</body>
</html>동작 원리
버튼을 클릭하면 display() 함수가 실행되고, document.getElementById()로 id가 "myID"인 요소를 가져온 뒤 해당 요소의 style.cursor 값을 "pointer"로 설정합니다. 그 결과 제목 위에 마우스를 올리면 기존 화살표 대신 손가락 모양 커서가 표시됩니다.