CSS cursor 속성으로 마우스 커서 모양 자유롭게 변경하기

CSS의 cursor 속성을 활용하면 HTML 문서 내 각 요소마다 마우스 커서의 모양을 자유롭게 지정할 수 있습니다. 링크 위에서 화살표가 손 모양으로 바뀌거나, 텍스트 위에서 I자 형태로 변하는 것도 모두 이 속성 덕분입니다. 이 글에서는 cursor 속성의 기본 문법과 함께 사용 가능한 39가지 값을 하나씩 살펴보겠습니다.

기본 문법

CSS cursor 속성의 문법은 다음과 같습니다.

선택자 {
    cursor: /*값*/
}

cursor 속성의 주요 값

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

번호	값 및 설명
1	alias 무언가의 별칭(alias)이 생성될 것임을 나타냅니다.
2	all-scroll 어떤 방향으로든 스크롤할 수 있음을 나타냅니다.
3	auto 기본값으로, 브라우저가 상황에 맞는 커서를 자동으로 설정합니다.
4	cell 셀(또는 셀 집합)을 선택할 수 있음을 나타냅니다.
5	context-menu 컨텍스트 메뉴(우클릭 메뉴)가 사용 가능함을 나타냅니다.
6	col-resize 열(column)을 가로 방향으로 크기 조절할 수 있음을 나타냅니다.
7	copy 무언가를 복사할 것임을 나타냅니다.
8	crosshair 십자선(crosshair) 형태로 커서가 렌더링됩니다.
9	default 운영체제의 기본 커서를 렌더링합니다.
10	e-resize 상자의 가장자리를 오른쪽(동쪽)으로 이동할 것임을 나타냅니다.
11	ew-resize 좌우 양방향 크기 조절 커서를 나타냅니다.
12	grab 대상을 잡을 수 있음을 나타냅니다.
13	grabbing 대상을 잡은(grabbing) 상태임을 나타냅니다.
14	help 도움말이 제공됨을 나타냅니다.
15	move 무언가를 이동할 것임을 나타냅니다.
16	n-resize 상자의 가장자리를 위쪽(북쪽)으로 이동할 것임을 나타냅니다.
17	ne-resize 상자의 가장자리를 위오른쪽(북동쪽)으로 이동할 것임을 나타냅니다.
18	nesw-resize 북동~남서 대각선 방향의 양방향 크기 조절 커서를 나타냅니다.
19	ns-resize 상하 양방향 크기 조절 커서를 나타냅니다.
20	nw-resize 상자의 가장자리를 위왼쪽(북서쪽)으로 이동할 것임을 나타냅니다.
21	nwse-resize 북서~남동 대각선 방향의 양방향 크기 조절 커서를 나타냅니다.
22	no-drop 드래그 중인 항목을 해당 위치에 놓을 수 없음을 나타냅니다.
23	none 해당 요소에 커서가 전혀 렌더링되지 않습니다.
24	not-allowed 요청한 동작이 허용되지 않음을 나타냅니다.
25	pointer 링크를 가리키는 손 모양 포인터를 나타냅니다.
26	progress 프로그램이 작업 처리 중(진행 중)임을 나타냅니다.
27	row-resize 행(row)을 세로 방향으로 크기 조절할 수 있음을 나타냅니다.
28	s-resize 상자의 가장자리를 아래쪽(남쪽)으로 이동할 것임을 나타냅니다.
29	se-resize 상자의 가장자리를 아래오른쪽(남동쪽)으로 이동할 것임을 나타냅니다.
30	sw-resize 상자의 가장자리를 아래왼쪽(남서쪽)으로 이동할 것임을 나타냅니다.
31	text 선택 가능한 텍스트임을 나타내며, 보통 I자 형태로 표시됩니다.
32	URL 사용자 정의 커서 이미지의 URL 목록(쉼표로 구분)을 지정하며, 마지막에는 대체(fail-safe)용 일반 커서를 함께 명시합니다.
33	vertical-text 세로 방향으로 쓰인 선택 가능한 텍스트임을 나타냅니다.
34	w-resize 상자의 가장자리를 왼쪽(서쪽)으로 이동할 것임을 나타냅니다.
35	wait 프로그램이 사용 중(busy)임을 나타냅니다.
36	zoom-in 대상을 확대할 수 있음을 나타냅니다.
37	zoom-out 대상을 축소할 수 있음을 나타냅니다.
38	initial cursor 속성을 기본값으로 되돌립니다.
39	inherit 부모 요소로부터 cursor 속성값을 상속받습니다.

참고로 URL 값을 사용하면 직접 제작한 이미지(.cur, .png 등)를 커서로 적용할 수 있습니다. 이때 반드시 마지막에 pointer, default 같은 일반 커서 값을 함께 지정해야 이미지 로딩에 실패했을 때도 정상적으로 동작합니다.

실습 예제

다음은 CSS cursor 속성을 실제로 적용한 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 5px;
    float: left;
}
#one {
    background-color: beige;
}
#two {
    background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style>
</head>
<body>
<div id="one">
<div class="nw-resize">왼쪽 모서리</div>
<div class="n-resize">위쪽</div>
<div class="ne-resize">오른쪽 모서리</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div>
<div class="pointer">Pointer</div>
</div>
</body>
</html>

실행 결과

예제를 브라우저에서 실행하면 첫 번째 영역의 요소들에는 크기 조절 관련 커서(nw-resize, n-resize, ne-resize)가 표시되고, 두 번째 영역에서는 금지 표시(not-allowed) 커서와 손 모양(pointer) 커서가 각각 나타나는 것을 확인할 수 있습니다.

CSS cursor 속성으로 마우스 커서 모양 자유롭게 변경하기