CSS - 마우스 커서 제어

cursor 을 이용하면 마우스 커서 모양을 바꿀 수 있습니다.

// 일반적인 커서
cursor:pointer;

// 사용자 정의 커서
cursor: url(이미지 경로), auto;

일반적인 모양

속 성	설 명
auto	브라우저가 결정하는 커서 모양. Default 와 동일
default	일반적인 커서, 기본값
none	커서를 보이지 않음

링크 및 상태

속 성	설 명
context-menu	오른쪽 마우스 버튼에서 나오는 메뉴
help	도움말 정보
pointer	링크를 나타내는 포인터
progress	프로그램은 백그라운드에서 사용 중이지만 사용자는 다른 작업을 진행할 수 있음
wait	프로그램이 사용 중이며 사용자가 다른 작업을 진행할 수 없음

선택

속 성	설 명
cell	표의 셀 또는 셀 집합을 선택할 때
crosshair	교차 커서. 열십자 모양
text	텍스트를 선택할 때
vertical-text	수직 텍스트를 선택할 때

드래그 앤 드롭

속 성	설 명
alias	별칭 또는 바로 가기
copy	복사할 때
move	이동할 때
no-drop	현재 위치에서 삭제할 수 없을 때. not-allowed 와 동일
not-allowed	요청한 작업을 수행할 수 없을 때
grab	움켜 잡고자 하는 손 모양. (무언가를 끌기 위해 끌기)
grabbing	움켜 잡고 있는 손 모양. (무언가를 끌기 위해 끌기)

크기 조정 및 스크롤링

속 성	설 명
all-scroll	어떤 방향으로 스크롤 할 수 있을 때. (이동)
col-resize	항목 / 열의 크기를 가로로 조정할 때.
row-resize	항목 / 행의 크기를 세로로 조정할 때.
n-resize	각 동서남북 방향을 나타냄.
e-resize
s-resize
w-resize
ne-resize	각 동서남북 모서리 방향을 나타냄.
nw-resize
se-resize
sw-resize
ew-resize
ns-resize
nesw-resize	각 양방향 화살표를 나타냄.
nwse-resize

확대/축소

속 성	설 명
zoom-in	확대/축소
zoom-out

일반적인 커서 모양

마우스를 올려 보세요. 마우스 커서 모양을 확인할 수 있습니다.

기본 커서

context-menu

help

pointer

progress

wait

선택 커서

cell

crosshair

text

vertical-text

드래그 앤 드롭 커서

alias

copy

move

no-drop

not-allowed

grab

grabbing

n-resize

e-resize

s-resize

w-resize

크기 조정 및 스크롤링

all-scroll

col-resize

row-resize

확대/축소 커서

zoom-in

zoom-out

사용자 정의 커서

사용자가 원하는 이미지로 커서 모양을 변경할 수 있습니다. 이미지 포맷 형식은 GIF, PNG, JPEG 등 모든 형식이 될 수 있습니다. 물론 움직이는 GIF 파일 형식을 사용할 수 있고, 또는 SVG 형식일 수 있습니다.

다만 이미지가 너무 크면 읽어 들이지 못하니 작게 만들어야 합니다.

<style>
  #custom-box .box01,
  #custom-box .box02,
  #custom-box .box03,
  #custom-box .box04,
  #custom-box .box05{
    width: 150px;
      height: 150px;
      background-color: #efefef;
      display:inline-block;
  }
  #custom-box .box01:hover{
    cursor: url(area01.gif), auto;
  }
  #custom-box .box02:hover{
    cursor: url(area02.gif), auto;
  }
  #custom-box .box03:hover{
    cursor: url(area03.gif), auto;
  }
  #custom-box .box04:hover{
    cursor: url(area04.gif), auto;
  }
  #custom-box .box05:hover{
    cursor: url(area05.gif), auto;
  }
</style>

<div id="custom-box">
  <div class="box01">1</div>
  <div class="box02">2</div>
  <div class="box03">3</div>
  <div class="box04">4</div>
  <div class="box05">5</div>
</div>

1

2

3

4

5