cursor 속성

cursor 속성은 요소 위에 마우스를 올렸을 때 커서의 모양을 설정합니다.

구문

참고

이 속성은 매우 많은 값을 가집니다. 아래에서는 참고하기 쉽도록 이 값들을 그룹으로 나누었습니다. 커서의 모양은 브라우저마다 다르므로, 커서 사진을 만들지 않고 값 테이블에 특별한 열을 만들어 마우스를 해당 셀 위에 올리면 설명된 커서의 모양을 볼 수 있도록 했습니다.

값

값	설명	모양
default	화살표 포인터 형태의 표준 모양입니다.
pointer	요소가 활성화되어 있고 클릭할 수 있음을 나타내는 데 사용됩니다 (링크의 기본값입니다).
help	요소에 도움말이나 질문이 연결되어 있음을 나타내는 데 사용됩니다.
not-allowed	작업이 허용되지 않음을 나타내는 데 사용됩니다.

텍스트

값	설명	모양
text	세로 막대 모양의 표준 텍스트 커서입니다.
vertical-text	세로 텍스트용 텍스트 커서입니다.

대기

값	설명	모양
progress	작업이 진행 중이며 사용자가 기다려야 함을 나타내는 데 사용됩니다.
wait	사용자가 기다려야 함을 나타내는 데 사용됩니다.

크기 조정 시 커서

요소 크기를 조정할 때 속성 값은 다음과 같이 구성됩니다: 단어 resize 앞에 하이픈으로 구분된 하나 또는 여러 글자가 옵니다, 예: n-resize 또는 ne-resize.

이 글자들은 방위의 첫 글자입니다: north - 북, south - 남, east - 동, west - 서. 여기서는 지도에 사용되는 규칙이 적용됩니다: 위쪽이 북, 아래쪽이 남, 왼쪽이 서, 오른쪽이 동. 물론 이는 혼란스럽지만, 만들어진 대로 사용해야 합니다:)

자, 값들은 다음과 같습니다:

값	방향	방위	모양
n-resize	위로	north
ne-resize	오른쪽 위로	nord east
e-resize	오른쪽으로	east
se-resize	오른쪽 아래로	south east
s-resize	아래로	south
sw-resize	왼쪽 아래로	south west
w-resize	왼쪽으로	west
nw-resize	왼쪽 위로	nord west
nesw-resize	오른쪽 위와 왼쪽 아래로	nord east - south west
nwse-resize	왼쪽 위와 오른쪽 아래로	nord west - south east

두 요소의 크기 조정

값	설명	모양
col-resize	가로 방향으로 조정합니다.
row-resize	세로 방향으로 조정합니다.

확대/축소

값	설명	모양
zoom-in	확대합니다.
zoom-out	축소합니다.

이동

값	설명	모양
move	요소를 이동할 수 있거나 이동 중임을 나타내는 데 사용됩니다.
all-scroll	요소가 마우스로 모든 방향으로 스크롤됨을 나타내는 데 사용됩니다.

기타

값	설명	모양
crosshair	십자선 모양입니다.
cell	십자선 모양입니다.