cursor

정의 및 사용

cursor 속성은 해당 요소에 마우스 포인터가 위치할 경우 커서의 타입(모양)을 지정한다.

정의 및 사용
기본값 auto
상속 yes
버전 CSS2
자바스크립트 구문 object.style.cursor=”crosshair”

브라우저 지원

IE6 지원IE7 지원IE8 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

모든 주요 브라우저에서 지원

구문

속성 값 설명
설명
url 커서로 사용할 이미지의 url 경로를 콤마로 구분하여 지정
auto 기본값(default), 브라우저에서 기본적으로 지원하는 모양으로 지정
crosshair 십자모양의 커서
default 기본 흰색 화살표 모양의 커서
e-resize 좌우 검정 화살표 모양의 커서(동쪽(오른쪽)으로 사이즈 조절이 가능하다는 의미)
help 기본 화살표 모양 옆에 물음표 아이콘이 나타난다
move 브라우저 상에서 창 이동을 나타내는 십자모양 화살표 커서
n-resize 상하 검정 화살표 모양의 커서(북쪽(윗쪽)으로 사이즈 조절이 가능하다는 의미)
ne-resize 북동쪽 검정 화살표 모양의 커서(북동쪽으로 사이즈 조절이 가능하다는 의미)
nw-resize 북서쪽 검정 화살표 모양의 커서(북서쪽으로 사이즈 조절이 가능하다는 의미)
pointer 손모양의 커서
progress 기본 화살표 모양 옆에 로딩 중일 때 나타나는 모래시계 아이콘 모양의 커서가 나타난다
s-resize 상하 검정 화살표 모양의 커서(남쪽(아래쪽)으로 사이즈 조절이 가능하다는 의미)
se-resize 남동쪽 검정 화살표 모양의 커서(남동쪽으로 사이즈 조절이 가능하다는 의미)
sw-resize 남서쪽 검정 화살표 모양의 커서(남서쪽으로 사이즈 조절이 가능하다는 의미)
text 브라우저에서 텍스트에 마우스 가져다 대면 나타나는 일자 모양의 커서
w-resize 좌우 검정 화살표 모양의 커서(좌쪽(왼쪽)으로 사이즈 조절이 가능하다는 의미)
wait 로딩 중일 때 나타나는 모래시계 모양의 커서
inherit 지정 요소의 커서 모양을 부모(상위) 요소로부터 상속받음

예제

버그 및 이슈

소제목

목록 으로

댓글