복사 완료!
웹 페이지에서 마우스 포인터의 모양을 변경하는 CSS cursor 속성 모음입니다.
각 카드에 마우스를 올려 효과를 체험하고, 클릭하면 CSS 코드가 복사됩니다.
기본 & 링크
cursor: auto;
브라우저 기본값
cursor: default;
운영체제 기본 포인터
cursor: none;
커서 숨김
cursor: context-menu;
컨텍스트 메뉴 가능
cursor: help;
도움말 사용 가능
cursor: pointer;
클릭 가능 (링크)
cursor: progress;
백그라운드 진행 중
cursor: wait;
작업 대기 중 (모래시계)
선택 & 드래그
cursor: cell;
셀 선택 (엑셀 등)
cursor: crosshair;
십자선 (좌표, 영역 지정)
cursor: text;
텍스트 선택 가능 (I-beam)
cursor: vertical-text;
세로 텍스트 선택 가능
cursor: alias;
별칭(바로가기) 생성
cursor: copy;
복사 가능
cursor: move;
이동 가능
cursor: no-drop;
드롭 불가
cursor: not-allowed;
작업 허용 안 됨
cursor: grab;
잡을 수 있음
cursor: grabbing;
잡고 있음
크기 조절
cursor: all-scroll;
사방으로 스크롤/이동
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;
축소 가능
기본 & 링크
선택 & 드래그
크기 조절
줌