CSS 마우스 커서(Cursor) 속성 미리보기 & 테스터
HOT웹 표준 35가지 이상의 CSS cursor 속성(pointer, grab, zoom-in 등) 위에 마우스를 올려 즉시 체험하고 복사
Responsive 728x90 / 320x100 Ad Slot
(CLS Prevention Active · Zero Shift)CSS 마우스 커서 프리뷰 & 테스터
35가지 웹 표준 cursor 속성 위에 마우스를 올려 즉시 체감하고 코드를 복사합니다.
cursor: pointer;
이 넓은 영역 안에서 마우스를 자유롭게 움직여 선택된 커서의 호버 인터랙션을 직접 체험하세요!
기본 화살표 포인터
커서 숨김 (렌더링 안 함)
브라우저 자동 결정
클릭 가능한 하이퍼링크 손가락
백그라운드 작업 진행 중 (화살표+모래시계)
대기 상태 (모래시계 또는 회전 휠)
도움말 툴팁 풍선 (화살표+물음표)
동작 불가/금지 표식
텍스트 선택 I-빔(I-beam)
세로 쓰기 텍스트 선택
정밀 십자선 (그리기/캡처)
스프레드시트 셀 선택 십자가
잡기 가능한 손바닥
쥐고 있는 쥔 손
4방향 이동 십자 화살표
바로가기/별칭 생성 화살표
복사 (+) 드래그 포인터
가로 열 분할 조절선
세로 행 분할 조절선
북쪽(상단) 크기 조절
동쪽(우측) 크기 조절
남쪽(하단) 크기 조절
서쪽(좌측) 크기 조절
북동 대각선 크기 조절
북서 대각선 크기 조절
남동 대각선 크기 조절
남서 대각선 크기 조절
양방향 가로 크기 조절
양방향 세로 크기 조절
돋보기 확대 (+)
돋보기 축소 (-)
전방향 스크롤 팬
Native In-Feed / High Viewability Ad Slot
(CLS Prevention Active · Zero Shift)사용자 인터랙션 피드백과 웹 표준 CSS cursor 속성 어포던스(Affordance) 아키텍처
웹 브라우징 경험에서 마우스 포인터(Cursor)는 사용자의 신체적 제스처가 디지털 화면과 맞닿는 유일한 물리적 접점입니다. 적절한 커서 스타일은 특정 요소를 클릭할 수 있는지(pointer), 텍스트를 드래그하여 복사할 수 있는지(text), 작업이 완료되기를 기다려야 하는지(wait), 아니면 비활성화되어 조작할 수 없는지(not-allowed)를 0.1초 만에 무의식적으로 전달하는 '어포던스(Affordance, 행동 유도성)'를 완성합니다.
CSS의 `cursor` 속성은 웹 DOM 요소 위에 마우스가 진입했을 때 호스트 운영체제(Windows, macOS, Linux)의 네이티브 포인터 렌더러를 직접 제어합니다. 올바르지 않은 커서 지정(예: 클릭 가능한 버튼에 default 화살표 방치, 또는 일반 텍스트에 pointer 남발)은 사용자에게 조작 혼란을 야기하며 웹사이트의 신뢰도와 접근성을 심각하게 훼손합니다.
OrvoKit CSS 커서 프리뷰 테스터는 일반(General), 링크/상태(Links & Status), 선택(Selection), 크기조절/이동(Resize & Move), 줌(Zoom) 등 W3C 공식 표준 35가지 이상의 커서 값을 총망라한 대화형 카탈로그입니다. 실제 드래그 앤 드롭 샌드박스와 폼 인풋 위에서 실시간으로 마우스 느낌을 체감하고, 표준 CSS 속성과 Tailwind CSS 클래스를 즉시 복사할 수 있습니다.
운영체제 네이티브 포인터 렌더링 및 핫스팟(Hotspot) 좌표 공식
브라우저 엔진이 OS 윈도우 매니저와 통신하여 하드웨어 마우스 커서를 동적으로 교체하는 시스템 원리입니다.
이미지의 좌상단(0,0)을 기준으로 실제 클릭 판정이 발생하는 픽셀 지점(Hotspot)을 명시하며, 이미지 로드 실패에 대비해 표준 키워드(auto, pointer 등)를 폴백으로 체이닝합니다.
👉 핫스팟 좌표를 누락하면 기본 좌상단(0,0)으로 판정되어 사용자가 조준선 정중앙을 클릭해도 엉뚱한 위치가 눌리는 버그가 발생합니다.
- cursor 속성은 요소 위에 마우스 포인터가 위치했을 때 운영체제(Windows, macOS, Linux)의 내장 포인터 렌더러를 직접 제어합니다.
- not-allowed, wait, progress 등은 사용자의 기대 행동(대기 필요, 비활성화 등)을 즉각 인지시켜 UX 완성도를 크게 높입니다.
- 커스텀 이미지 커서의 경우 최대 128x128px(일반적으로 32x32px 권장) 규격을 지켜야 하며 브라우저 보안 정책상 반드시 키워드 폴백을 동반해야 합니다.
- touch 기기(스마트폰, 태블릿)에서는 hover 및 cursor 속성이 무시되므로 모바일 전용 터치 UI를 별도로 고려해야 합니다.
웹 표준 35대 CSS 커서 분류 및 실무 UI 적용 기준표
W3C CSS Basic User Interface 표준 커서별 명칭, Tailwind 클래스, 추천 UI 시나리오 매트릭스입니다.
| CSS 커서 속성값 | Tailwind 클래스 | 카테고리 | 사용자 인지 어포던스 | 최적 UI 컴포넌트 | 주의사항 |
|---|---|---|---|---|---|
| pointer | cursor-pointer | Links & Status | 클릭 시 상호작용 또는 이동 가능 | 버튼(<button>), 하이퍼링크(<a>), 드롭다운 | 단순 일반 텍스트나 div에 남발 금지 |
| default | cursor-default | General | 표준 OS 기본 화살표 포인터 | 일반 카드 배경, 정적 모달 바디 | 상호작용이 없는 정적 컨테이너 |
| text | cursor-text | Selection | 텍스트 선택 및 입력 가능 | 인풋(<input>), 텍스트에어리어, 코드 블록 | 글자를 긁어 복사할 수 있는 본문 |
| not-allowed | cursor-not-allowed | Links & Status | 현재 작업이 금지되었거나 비활성 상태 | disabled 폼 전송 버튼, 권한 없는 메뉴 | pointer-events: none과 병용 시 미노출 주의 |
| grab | cursor-grab | Resize & Move | 요소를 손으로 쥐어 이동 가능 | 칸반 보드 태스크 카드, 캐러셀 슬라이더 | 마우스 누르기 전 평상시 대기 상태 |
| grabbing | cursor-grabbing | Resize & Move | 요소를 손으로 꽉 쥐고 드래그 중 | 마우스 mousedown 상태의 칸반 드래그 | 활성 드래그 상태에서 동적 토글 |
| wait | cursor-wait | Links & Status | 시스템이 백그라운드 작업 중(모래시계/스피너) | 결제 승인 대기, 파일 업로드 진행 중 | 사용자의 다음 입력을 일시 차단 |
| col-resize | cursor-col-resize | Resize & Move | 좌우 열 너비 조절 가능 | 스플릿 뷰 구분선, 데이터 테이블 열 분할선 | 좌우 드래그 가능 핸들 |
* 비활성 버튼에 `pointer-events: none`을 주면 마우스 이벤트가 차단되어 `cursor: not-allowed`가 화면에 나타나지 않으므로 부모 래퍼에 커서를 주는 기법이 필요합니다.
High-Engagement In-Article Native Ad Slot
(CLS Prevention Active · Zero Shift)사용 방법
11. 대화형 커서 프리뷰 카드 탐색 및 호버
포인터(pointer), 잡기(grab), 대기(wait), 크기조절(col-resize) 등 35가지 이상의 웹 표준 커서 카드 위에 마우스를 올려 실제 OS 포인터 변화를 확인합니다.
22. 기능별 카테고리 필터링
일반(General), 링크 및 상태(Links & Status), 선택(Selection), 크기조절 및 이동(Resize & Move), 줌(Zoom) 등 목적에 맞게 필터링합니다.
33. 대화형 플레이그라운드 샌드박스 테스트
드래그 앤 드롭 캔버스, 리사이즈 바, 비활성 버튼 테스트 공간에서 실제 인터랙션 조작감을 직접 체감합니다.
44. CSS 코드 및 Tailwind 클래스 복사
cursor: pointer; 원클릭 CSS 속성 또는 cursor-grab, cursor-not-allowed 등 매칭되는 Tailwind 유틸리티 클래스를 복사합니다.
웹 인터페이스 커서 적용 실무 사례
올바른 커서 지정으로 사용자의 웹사이트 조작 혼선을 방지하고 완성도를 높인 모범 사례입니다.
태스크 카드를 잡기 전에는 cursor: grab;, 마우스로 쥐었을 때는 cursor: grabbing;을 적용해 물리적 촉각 피드백 선사
필수 입력 항목 미충족 시 버튼에 cursor: not-allowed;를 주어 무의식적인 헛클릭을 사전에 차단
클릭 시 크게 볼 수 있는 사진 썸네일에 cursor: zoom-in;을 지정하고 모달 창에는 cursor: zoom-out; 부여
코드 에디터와 결과창 사이 경계선에 cursor: col-resize;를 부여하여 사용자가 창 크기를 조절할 수 있음을 암시
💡 시니어 UX 엔지니어가 전하는 커서 스타일링 노하우
CSS `pointer-events: none;`을 적용하면 마우스 호버 자체가 차단되어 not-allowed 커서가 뜨지 않습니다. 버튼을 감싸는 부모 `<div>`에 `cursor: not-allowed;`를 걸거나, 버튼에 `opacity: 0.5;`와 `cursor: not-allowed;`만 부여하고 자바스크립트에서 클릭을 방어하세요.
커스텀 커서는 일반 32x32px 이미지 외에도 고해상도 화면을 위해 SVG 포맷을 사용하는 것이 가장 이상적입니다. SVG는 확대 배율에 상관없이 항상 선명합니다.
드래그가 시작되면 일시적으로 `document.body.style.cursor = 'grabbing';`을 선언하여 자식 요소 경계를 넘나들 때 마우스 포인터가 화살표로 바뀌는 현상을 방지하세요.
Tailwind의 `cursor-pointer`, `cursor-not-allowed`, `cursor-grab`, `cursor-wait` 클래스를 인라인으로 결합하여 CSS 작성 시간을 단축하세요.
⚠️ 흔히 하는 실수 & 예방법
자주 묻는 질문 (FAQ)
사용자 및 전문가들이 가장 자주 묻는 핵심 질문과 명확한 해답입니다.
기능적 의미와 어포던스는 100% 동일하지만, 실제 화살표나 손 모양 렌더링 그래픽은 사용자의 운영체제(Windows 11의 플랫 디자인, macOS의 아쿠아 디자인 등)의 고유 시스템 테마에 맞춰 렌더링됩니다.
Wide Responsive Banner
(CLS Prevention Active · Zero Shift)관련 도구 추천
CSS @keyframes 애니메이션 빌더 & 모션 프리뷰
바운스, 페이드인, 회전, 흔들림 등 자주 쓰는 CSS @keyframes 애니메이션을 프리뷰하며 코드를 복사
CSS 커스텀 스크롤바 스타일러 (Scrollbar Styler)
크롬/사파리/파이어폭스용 커스텀 스크롤바(두께, 트랙 색상, 썸 둥글기)를 디자인하고 CSS 코드를 생성
CSS Grid 템플릿 & 벤토(Bento) 레이아웃 빌더
행(Rows), 열(Columns), 간격(Gap)을 지정하고 셀을 병합해 반응형 CSS Grid 및 Tailwind 코드를 생성
색상 코드 실시간 변환기 및 조화 배색기
HEX, RGB, HSL, CMYK 상호 실시간 변환 및 보색, 유사색, 삼각배색 조화 팔레트 추천