[css] cursor

Cursor 모양 지정

개발을 하면서 드래그인 드롭 리스트에 대한 커서를 어떤식을 표현하면 좋을지 고민하다가, cursor의 종류에 대해서 다시한 번 찾아보게 되었습니다. 이후에도 알맞는 커서를 선택해 사용하기 위해서 포스팅을 해보았습니다. 요즘은 커스텀한 커서도 많이 사용하고 있어서, 시간이 된다면 커서를 커스텀하는 방법에 대해서 다뤄보겠습니다.

 

 

[참고] Microsoft (https://msdn.microsoft.com/en-us/library/aa358795(v=vs.85).aspx)

 

Property Values

Value	Description	사용방법
alias	커서가 생성될 항목의 별칭을 나타냄	cursor: alias;
all-scroll	어떤 방향으로든 스크롤 할 수 있음을 나타냄	cursor: all-scorll
auto	디폴트값, 브라우저가 커서를 설정	cursor: auto;
cell	셀(또는 셀 집합)을 선택할 수 있음을 나타냄	cursor: cell;
col-resize	커서가 열 크기를 수평으로 조정할 수 있음을 나타냄	cursor: col-resize;
context-menu	커서가 컨텍스트 메뉴(내용 메뉴??)를 사용할 수 있음을 나타냄	cursor: context-menu;
copy	복사할 항목을 나타냄	cursor: copy;
crosshair	십자모양으로 렌더링	cursor: crosshair;
default	디폴트 커서	cursor: default;
e-resize	상자의 가장자리를 오른쪽(동쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: e-resize;
ew-resize	양방향으로 크기 조정할 수 있음을 나타냄	cursor: ew-resize;
grab	커서가 무언가를 잡을 수 있음을 나타냄	cursor: grap;
grabbing	커서가 무언가를 잡고 있는 것을 나타냄	cursor: grabbing;
help	도움말을 사용할 수 있음을 나타냄	cursor: help;
move	이동중임을 나타냄	cursor: moev;
n-resize	상자의 가장자리를 위로(북쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: n-resize;
ne-resize	상자의 가장자리를 위와 오른쪽(북쪽/등쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: ne-resize;
nesw-resize	양방향 크기 조정 커서를 나타냄	cursor: nesw-resize;
ns-resize	양방향 크기 조정커서를 나타냄	cursor: ns-resize;
nw-resize	상자의 가장자리를 위와 왼쪽(북쪽/서쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: nw-resize;
nwse-resize	양방향 크기 조정 커서를 나타냄	cursor: nwse-resize;
no-drop	커서가 끌어온 항목을 여기에 놓을 수 없을 나타냄	cursor: no-drop;
none	요소에 대한 커서가 렌더링되지 않음	cursor: none;
not-allowed	요청한 작업이 실행되지 않음을 나타냄	cursor: not-allowed;
pointer	포인터이고 링크를 나타냄	cursor: pointer;
progress	프로그램이 사용 중임을 (진행 중, 로딩중...etc)을 나타냄	cursor: progress;
row-resize	행 크기를 수직으로 조정할 수 있음을 나타냄	curosr: row-resize;
s-resize	상자의 가장자리를 아래로(남쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: s-resize;
se-resize	상자의 가장자리로 아래쪽과 오른쪽(남쪽/동쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: se-resize;
sw-resize	상자의 가장자리로 아래와 왼쪽(남쪽/서쪽)으로 이동해야 함을 나타냄	cursor: sw-resize;
text	선택할 수 있을 텍스트를 나타냄	cursor: text;
URL	사용자 지정 커서에 대한 쉼표로 구분된 URL 목록 Note. URL 정의 커서를 사용할 수 없는 경우 항상 모록 끝에 일반 커서를 지정함	cursor: ulr(myBall.cur), auto;
vertical-text	선택할 수 있는 수직 텍스트를 나타냄	cursor: vertical-text;
w-resize	상자의 가장자리 왼쪽(서쪽)으로 이동할 수 있음을(사이즈 조정 가능을) 나타냄	cursor: w-resize;
wait	프로그램이 사용 중임(로딩 중)임을 나타냄	cursor: wait;
zoom-in	확대할 수 있음을 나타냄	cursor: zoom-in;
zoom-out	축소할 수 있음을 나타냄	cursor: zoom-out;
initial	속성을 기본값으로 설정
inherit	상위 요소에서 이 속성을 상속

- [참고] https://www.w3schools.com/cssref/pr_class_cursor.php

 

 

Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help