• Q&A
  • 회원가입
  • 로그인

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

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

 

cursor 예제 - 커서 모양 

아래 예처럼, 일반 jpg gif png 등은 적용 X.
커서이미지는 cur 또는 ani 확장자만 가능함.
   
<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

부모요소의 속성값 상속. 

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012