6XC

CSS 커서 선택기

모든 CSS cursor 값에 마우스를 올려 실시간으로 확인하고, 클릭해서 cursor 선언을 복사하세요.

조회수 993회

마우스를 올려 테스트 · 클릭해서 복사

cursor 속성이란

커서는 클릭하기 전에 요소가 무엇을 하는지 알려줍니다 — 클릭 가능한 요소에는 pointer, 드래그 가능한 요소에는 grab, 비활성화된 영역에는 not-allowed, 분할 가능한 패널에는 col-resize/row-resize를 씁니다. 아래 타일에 마우스를 올려 직접 화면에서 커서를 확인해 보세요. 클릭하면 바로 쓸 수 있는 선언이 복사됩니다. cursor: url(...), 대체값으로 커스텀 이미지도 사용할 수 있습니다.

자주 묻는 질문

커스텀 커서 이미지가 왜 나타나지 않나요?

커스텀 커서 이미지는 작아야 하며(대부분의 플랫폼에서 32×32px 이하), 선언에는 대체 키워드가 필요합니다: cursor: url("c.png"), auto;.

버튼에도 cursor: pointer를 써야 하나요?

브라우저는 기본적으로 <button>에 이를 적용하지 않지만 사용자는 기대합니다 — 대부분의 디자인 시스템은 모든 상호작용 요소에 cursor: pointer를 추가합니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기