[CSS] cursor

J.yeon·2024년 3월 21일

CSS의 cursor란?

마우스 커서의 모양을 지정하는 데 사용하는 CSS 속성


cursor속성에는 어떤 값들이 있을까?🤔

항상 cursor: pointer; 만 쓰다가 간혹 grab, grabbing, move, resize 등등 여러 값들을 본 적이 있다.

그 외에도 다양한 값들이 있는 것 같길래 알아봄


주요 cursor 속성 값들👇

auto: 브라우저가 해당 요소에 따라 기본 커서 스타일을 지정

default: 기본 화살표 커서

pointer: 링크를 가리키는 손가락 모양의 커서

crosshair: 십자선 형태의 커서

move: 이동할 수 있는 객체를 가리키는 커서

text: 텍스트를 입력할 수 있는 위치를 가리키는 커서

wait: 대기 중을 나타내는 시계 모양의 커서

help: 도움말을 표시하는 커서

not-allowed: 허용되지 않는 작업을 나타내는 커서

progress: 진행 중을 나타내는 커서

e-resize: 좌우로 조절할 수 있는 커서

n-resize, s-resize, w-resize, e-resize: 위, 아래, 왼쪽, 오른쪽으로 조절할 수 있는 커서

ne-resize, nw-resize, se-resize, sw-resize: 대각선 방향으로 조절할 수 있는 커서

grab, grabbing: 드래그할 수 있는 손 모양의 커서

zoom-in, zoom-out: 확대 및 축소 커서



등등... 그 외에도 여러가지 커서가 있음


🙏이미지출처 (codepen확인 가능)

profile
나혼자만 윈도우UP💻

0개의 댓글