• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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)

분류 제목
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
table CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보…
table CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
intro CSS - CSS3 입문
6/25
목록
찾아주셔서 감사합니다. Since 2012