CSS 커서 속성

정의와 사용법

cursor 속성은 표시할 커서 유형(모양)을 정의합니다.

이 속성은 마우스 포인터가 요소의 경계 범위 내에 있을 때 사용하는 커서 모양을 정의합니다(하지만 CSS2.1은 이 범위를 결정하는 경계를 정의하지 않습니다).

추가로 참조하세요:

CSS 강의:CSS 정위치

HTML DOM 참조 매뉴얼:cursor 속성

예제

다양한 커서:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

직접 시험해 보세요

CSS 문법

cursor: value;

속성 값

값 설명
url

사용할 수 있는 사용자 정의 커서의 URL.

주석:URL로 정의된 사용할 수 있는 커서가 없을 경우, 항상 이 목록의 끝에 일반 커서를 정의해야 합니다.
default 기본 커서(보통은 화살표입니다)
auto 기본. 브라우저가 설정한 커서.
crosshair 커서가 십자로 표시됩니다
pointer 커서가 링크를 가리키는 포인터(손)로 표시됩니다
move 이 커서는 어떤 객체를 이동할 수 있다고 나타냅니다.
e-resize 이 커서는 사각형 프레임의 가장자리를 오른쪽으로(동쪽) 이동할 수 있다고 나타냅니다.
ne-resize 이 커서는 사각형 프레임의 가장자리를 위쪽으로 및 오른쪽으로 이동할 수 있다고 나타냅니다(북/동쪽).
nw-resize 이 커서는 사각형 프레임의 가장자리를 위쪽으로 및 왼쪽으로 이동할 수 있다고 나타냅니다(북/서쪽).
n-resize 이 커서는 사각형 프레임의 가장자리를 위쪽으로(북쪽) 이동할 수 있다고 나타냅니다.
se-resize 이 커서는 사각형 프레임의 가장자리를 아래로 및 오른쪽으로 이동할 수 있다고 나타냅니다(남/동쪽).
sw-resize 이 커서는 사각형 프레임의 가장자리를 아래로 및 왼쪽으로 이동할 수 있다고 나타냅니다(남/서쪽).
s-resize 이 커서는 사각형 프레임의 가장자리를 아래로 이동할 수 있다고 나타냅니다(남쪽).
w-resize 이 커서는 사각형 프레임의 가장자리를 왼쪽으로 이동할 수 있다고 나타냅니다(서쪽).
text 이 커서는 텍스트를 나타냅니다.
wait 이 커서는 프로그램이 바쁘다는 것을 나타냅니다(보통은 시계glass나 시간Sandglass입니다).
help 이 커서는 사용할 수 있는 도움을 나타냅니다(보통은 물음표나气球입니다).

기술 세부 사항

기본값: auto
상속성: yes
버전: CSS2
JavaScript 문법: object.style.cursor="crosshair"

TIY 예제

커서 변경
이 예제에서는 커서를 변경하는 방법을 보여줍니다.

브라우저 지원

표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
5.0 5.5 4.0 5.0 9.6

주석:Opera 9.3과 Safari 3는 지원하지 않습니다 url 값.