[css] CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)

1. cursor 예제 - 커서 모양
2. cursor 정의
3. cursor 구문

cursor 예제 - 커서 모양 

   

<style>
#url {url(http://i.imgur.com/ezQ8y3g.jpg)}
#auto {cursor: auto;}  
#crosshair {cursor: crosshair;}  
#default {cursor: default;} 

#help {cursor: help;}  

#move {cursor: move;}  
#pointer {cursor: pointer;}   
#progress {cursor: progress;}
#wait {cursor: wait;}   
#text {cursor: text;}  

 

#e-resize {cursor: e-resize;}  
#w-resize {cursor: w-resize;}   
#s-resize {cursor: s-resize;}  
#n-resize {cursor: n-resize;} 

 

#ne-resize {cursor: ne-resize;}   
#nw-resize {cursor: nw-resize;}  
#se-resize {cursor: se-resize;}  
#sw-resize {cursor: sw-resize;} 

</style>

 

<div ID="url">url 홈짱닷컴 (homzzang.com)</div>
<div ID="pointer">pointer 홈짱닷컴 (homzzang.com)</div>
<div ID="auto">auto 홈짱닷컴 (homzzang.com)</div>
<div ID="crosshair">crosshair 홈짱닷컴 (homzzang.com)</div>
<div ID="default">default 홈짱닷컴 (homzzang.com)</div>

<div ID="help">help 홈짱닷컴 (homzzang.com)</div>

<div ID="move">move 홈짱닷컴 (homzzang.com)</div>
<div ID="pointer">pointer 홈짱닷컴 (homzzang.com)</div>
<div ID="progress">progress 홈짱닷컴 (homzzang.com)</div>
<div ID="wait">wait 홈짱닷컴 (homzzang.com)</div>

 

<div ID="text">text 홈짱닷컴 (homzzang.com)</div>

<div ID="e-resize">e-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="w-resize">w-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="s-resize">s-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="n-resize">n-resize 홈짱닷컴 (homzzang.com)</div>

 

<div ID="ne-resize">ne-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="nw-resize">nw-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="se-resize">se-resize 홈짱닷컴 (homzzang.com)</div>
<div ID="sw-resize">sw-resize 홈짱닷컴 (homzzang.com)</div>

 

결과보기 

cursor 정의

 

해당 요소에 마우스 커서가 위치할 경우 커서 모양 정의.

 

---

 

1.

기본값: auto

상속여부: O

애니효과: X

CSS버전: CSS2

JS구문: object.style.cursor="crosshair"

 

2.

주요 최신 브라우저 모두 지원.

단, 일부 속성값 경우 IE9 이상.

 

cursor 구문

 

selector {cursor :속성값;}

 

---

[속성값]

 

alias

 

무언가의 별칭이 생성될 것임을 표시.

(화살표 커서 우측 상단에 휘어진 새끼 화살표 있는 모양.)

all-scroll

어떤 방향으로든 스크롤할 수 있음 표시,

(십자 화살표 모양) 

auto

브라우저가 자동 결정. (기본값)

cell

셀(또는 셀 집합)을 선택할 수 있음 표시.

(적십자 모양.)

context-menu

컨텍스트 메뉴를 사용할 수 있음 표시.

(꼬리 짧은 화살표 모양.)

col-resize

열의 크기를 가로로 조정할 수 있음 표시.

(굵은 기둥 양쪽에 화살표 있는 모양)

copy

복사할 항목을 표시.

(화살표커서 우측 상단에 덧셈 있는 모양. )

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

커서 사용 X

(커서가 전혀 안 보임.)

not-allowed

요청한 작업이 실행되지 않음 표시.

(빨간색 동그라미 안에 우하향 막대 있는 모양)

pointer

링크 표시. ★

(검지 편 손모양)

progress

커서는 프로그램이 사용 중임을 나타냅니다(진행 중).

(짧은 꼬리 화살표 우측 상단에 파란색 원이 회전하는 모양)

row-resize

행 크기 세로 조절 가능 표시.

(굵은 수평 막대 위아래로 화살표 있는 모양)

s-resize

남쪽으로 크기 조절 가능 표시.

(남쪽 향하는 양방향 화살표 모양)

se-resize

남동 방향으로 크기 조절 가능 표시.

(양방향 화살표 모양)

sw-resize

남서 방향으로 크기 조절 가능 표시.

(양방향 화살표 모양) 

text

선택할 수 있는 텍스트 표시.

(위아래 눈끔 있는 수직 막대 모양)

url ('확장자가 cur 또는 ani인 이미지 주소')

이미지 커서, (주의: jpg/png/gif 등 확장자는 지원 X)

PS1. 콤마로 분리해 여러 개 나열 가능.

PS2. 이미지 사용 불가 대비해 마지막에 일반 커서도 지정 권장.

vertical-text

선택할 수 있는 수직 텍스트 표시.

(양쪽 끝에 눈끔 있는 수평 막대 모양)

w-resize

상자의 가장자리가 왼쪽(서쪽)으로 이동할 것임을 표시.

(수평의 양쪽 화살표)

wait

프로그램이 사용 중임을 표시.

(파란색 원이 회전하는 모양)

zoom-in

확대 가능 표시.

(덧셈 표시의 돋보기 모양)

zoom-out

축소 가능 표시.

(뺄셈 표시의 돋보기 모양)

initial

이 속성의 기본값으로 설정.

inherit

부모요소의 속성값 상속.