[CSS3] CSS cursor 속성의 종류 살펴보기

[CSS3] CSS cursor 속성의 종류 살펴보기

 

 

cursor 속성은 지정한 요소 위에 마우스 커서가 올라갔을 때 표출할 모양을 지정한다.

 

속성 값에 마우스 커서를 올리면 각 값에 따라 커서 모양이 표출될 것이다.

 

구분	속성 값	설명
기본	cursor: auto	요소 타입에 맞게 표시할 커서를 자동으로 결정
	cursor: default	기본 커서 값
	cursor: none	커서 숨김
링크/상태	cursor: help	도움말 사용 가능
	cursor: pointer	링크를 나타내는 포인터
	cursor: progress	프로그램이 백그라운드에서 작업 중이며, 사용자가 인터페이스와 상호작용 가능(wait과 반대)
	cursor: wait	프로그램이 작업 중이며, 사용자가 인터페이스와 상호작용 불가능(progress와 반대)
선택	cursor: cell	표의 칸 혹은 여러 칸 선택 가능
	cursor: crosshair	십자 커서
	cursor: text	글씨 선택 가능
	cursor: vertical-text	세로쓰기 글씨 선택 가능
드래그/드롭	cursor: alias	별칭이나 바로가기 만드는 중
	cursor: copy	복사하는 중
	cursor: move	움직이는 중
	cursor: no-drop	현재 위치에 놓을 수 없음 (Windows와 Mac OS X에서는 not-allowed와 같음)
	cursor: not-allowed	요청한 행동을 수행할 수 없음
	cursor: grab	잡을 수 있음 (잡아서 이동)
	cursor: grabbing	잡고 있음 (잡아서 이동)
크기조절/스크롤	cursor: all-scroll	모든 방향으로 이동 가능 (Windows에서 move와 같음)
	cursor: col-resize	항목/행의 크기를 좌우로 조절할 가능. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용
	cursor: row-resize;	항목/열의 크기를 상하로 조절 가능. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용
	cursor: n-resize	움직일 수 있는 모서리
	cursor: e-resize
	cursor: s-resize
	cursor: w-resize
	cursor: ne-resize
	cursor: nw-resize
	cursor: se-resize
	cursor: sw-resize
	cursor: ew-resize	양방향 크기 조절 커서
	cursor: ns-resize
	cursor: nesw-resize
	cursor: nwse-resize
확대/축소	cursor: zoom-in	확대/축소 가능
	cursor: zoom-out