cursor

cursor (커서)

요소 위에 마우스를 올렸을 때 표시되는 커서를 제어하는 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`cursor-auto`	`cursor: auto;`
`cursor-default`	`cursor: default;`
`cursor-pointer`	`cursor: pointer;`
`cursor-wait`	`cursor: wait;`
`cursor-text`	`cursor: text;`
`cursor-move`	`cursor: move;`
`cursor-help`	`cursor: help;`
`cursor-not-allowed`	`cursor: not-allowed;`
`cursor-none`	`cursor: none;`
`cursor-context-menu`	`cursor: context-menu;`
`cursor-progress`	`cursor: progress;`
`cursor-cell`	`cursor: cell;`
`cursor-crosshair`	`cursor: crosshair;`
`cursor-vertical-text`	`cursor: vertical-text;`
`cursor-alias`	`cursor: alias;`
`cursor-copy`	`cursor: copy;`
`cursor-no-drop`	`cursor: no-drop;`
`cursor-grab`	`cursor: grab;`
`cursor-grabbing`	`cursor: grabbing;`
`cursor-all-scroll`	`cursor: all-scroll;`
`cursor-col-resize`	`cursor: col-resize;`
`cursor-row-resize`	`cursor: row-resize;`
`cursor-n-resize`	`cursor: n-resize;`
`cursor-e-resize`	`cursor: e-resize;`
`cursor-s-resize`	`cursor: s-resize;`
`cursor-w-resize`	`cursor: w-resize;`
`cursor-ne-resize`	`cursor: ne-resize;`
`cursor-nw-resize`	`cursor: nw-resize;`
`cursor-se-resize`	`cursor: se-resize;`
`cursor-sw-resize`	`cursor: sw-resize;`
`cursor-ew-resize`	`cursor: ew-resize;`
`cursor-ns-resize`	`cursor: ns-resize;`
`cursor-nesw-resize`	`cursor: nesw-resize;`
`cursor-nwse-resize`	`cursor: nwse-resize;`
`cursor-zoom-in`	`cursor: zoom-in;`
`cursor-zoom-out`	`cursor: zoom-out;`
`cursor-(<custom-property>)`	`cursor: var(<custom-property>);`
`cursor-[<value>]`	`cursor: <value>;`

Examples

Basic example

cursor-pointer 이나 cursor-grab 같은 유틸리티를 사용해서 요소 위에 마우스를 올렸을 때 표시되는 커서를 제어할 수 있어요.

각 버튼에 마우스를 올려 커서가 변하는 걸 확인해 보세요.

<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>

Using a custom value

cursor-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 커서를 설정할 수 있어요.

<button class="cursor-[url(hand.cur),_pointer] ...">
  <!-- ... -->
</button>

CSS 변수라면 cursor-(<custom-property>) 문법을 사용할 수도 있어요.

<button class="cursor-(--my-cursor) ...">
  <!-- ... -->
</button>

이는 cursor-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

cursor 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<button class="cursor-not-allowed md:cursor-auto ...">
  <!-- ... -->
</button>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.