HTML DOM Style cursor 속성 완벽 가이드 – 마우스 커서 유형 설정과 조회

HTML DOM Style cursor 속성이란?

HTML DOM의 style.cursor 속성은 웹 페이지에서 마우스 포인터가 표시될 때 어떤 커서 모양이 나타날지 설정하거나, 현재 적용된 커서 값을 가져오는 데 사용됩니다. 버튼 위에서는 손가락 모양으로, 텍스트 입력 영역에서는 I자 모양으로 바뀌는 것처럼 요소의 성격에 맞는 커서를 지정하면 사용자 경험을 크게 향상시킬 수 있습니다.

문법(Syntax)

cursor 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.cursor = value

반대로 현재 설정된 커서 값을 읽어오려면 다음과 같이 작성합니다.

var cursorType = object.style.cursor;

cursor 속성에 사용할 수 있는 값

아래 표는 cursor 속성에 지정할 수 있는 값과 각각의 의미를 정리한 것입니다.

값	설명
alias	별칭(alias)이 생성될 것임을 나타냅니다.
all-scroll	모든 방향으로 스크롤할 수 있음을 나타냅니다.
auto	기본값. 브라우저가 상황에 맞는 커서를 자동으로 설정합니다.
cell	셀(또는 셀 집합)을 선택할 수 있음을 나타냅니다.
context-menu	컨텍스트 메뉴를 사용할 수 있음을 나타냅니다.
col-resize	열(column)을 가로 방향으로 크기 조절할 수 있음을 나타냅니다.
copy	무언가를 복사할 수 있음을 나타냅니다.
crosshair	커서가 십자선(crosshair) 모양으로 렌더링됩니다.
default	기본 커서입니다.
e-resize	상자의 가장자리를 오른쪽(동쪽)으로 이동할 수 있음을 나타냅니다.
ew-resize	좌우(동/서) 양방향 크기 조절 커서입니다.
grab	무언가를 잡을 수 있음을 나타냅니다.
grabbing	무언가를 잡고 있는 상태임을 나타냅니다.
help	도움말을 사용할 수 있음을 나타냅니다.
move	무언가를 이동할 수 있음을 나타냅니다.
n-resize	상자의 가장자리를 위쪽(북쪽)으로 이동할 수 있음을 나타냅니다.
ne-resize	상자의 가장자리를 오른쪽 위(북동쪽)로 이동할 수 있음을 나타냅니다.
nesw-resize	북동/남서 양방향 크기 조절 커서입니다.
ns-resize	상하(북/남) 양방향 크기 조절 커서입니다.
nw-resize	상자의 가장자리를 왼쪽 위(북서쪽)로 이동할 수 있음을 나타냅니다.
nwse-resize	북서/남동 양방향 크기 조절 커서입니다.
no-drop	드래그한 항목을 현재 위치에 놓을 수 없음을 나타냅니다.
none	해당 요소에 대해 커서가 렌더링되지 않습니다.
not-allowed	요청된 작업이 실행되지 않음을 나타냅니다.
pointer	링크임을 나타내는 포인터(손가락) 모양입니다.
progress	프로그램이 작업 진행 중임을 나타냅니다.
row-resize	행(row)을 세로 방향으로 크기 조절할 수 있음을 나타냅니다.
s-resize	상자의 가장자리를 아래쪽(남쪽)으로 이동할 수 있음을 나타냅니다.
se-resize	상자의 가장자리를 오른쪽 아래(남동쪽)로 이동할 수 있음을 나타냅니다.
sw-resize	상자의 가장자리를 왼쪽 아래(남서쪽)로 이동할 수 있음을 나타냅니다.
text	선택 가능한 텍스트임을 나타냅니다.
URL	사용자 지정 커서 이미지의 URL 목록(쉼표로 구분)입니다. 참고: URL로 지정한 커서를 사용할 수 없는 경우에 대비해 목록 끝에는 반드시 일반 커서를 함께 지정해야 합니다.
vertical-text	선택 가능한 세로쓰기 텍스트임을 나타냅니다.
w-resize	상자의 가장자리를 왼쪽(서쪽)으로 이동할 수 있음을 나타냅니다.
wait	프로그램이 사용 중(busy)임을 나타냅니다.
zoom-in	확대할 수 있음을 나타냅니다.
zoom-out	축소할 수 있음을 나타냅니다.
initial	이 속성을 기본값으로 설정합니다.
inherit	부모 요소로부터 이 속성 값을 상속받습니다.

예제 코드

다음 예제는 버튼을 클릭하면 두 개의 단락(paragraph)에 서로 다른 커서(cell, grab)를 동적으로 적용하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
    #one {
        background-color: beige;
    }
    #two {
        background-color: lavender;
    }
</style>
<script>
    function changeCursor() {
        document.getElementById("one").style.cursor = "cell";
        document.getElementById("two").style.cursor = "grab";
        document.getElementById("Sample").innerHTML = "첫 번째 단락에 마우스를 올리면 cell 커서로, 두 번째 단락에 올리면 grab 커서로 변경됩니다.";
    }
</script>
</head>
<body>
    <p id="one">첫 번째 단락에 들어 있는 샘플 텍스트입니다.</p>
    <p id="two">두 번째 단락에 들어 있는 샘플 텍스트입니다.</p>
    <p>아래 버튼을 클릭하면 cursor 속성이 변경됩니다</p>
    <button onclick="changeCursor()">Change Cursor</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

HTML DOM Style cursor 속성 완벽 가이드 – 마우스 커서 유형 설정과 조회

Change Cursor 버튼을 클릭하면 첫 번째 단락에는 cell 커서가, 두 번째 단락에는 grab 커서가 적용됩니다. 아래 스크린샷에서 변경된 커서를 확인할 수 있습니다.

HTML DOM Style cursor 속성 완벽 가이드 – 마우스 커서 유형 설정과 조회

마무리

style.cursor 속성은 CSS의 cursor 속성과 동일한 값을 사용하지만, JavaScript를 통해 사용자의 인터랙션에 따라 실시간으로 커서를 전환할 수 있다는 점이 강점입니다. 드래그 앤 드롭, 로딩 상태 표시, 확대·축소 기능 등에 적절한 커서를 활용하면 인터페이스의 직관성과 완성도를 한층 높일 수 있습니다.