인터랙티비티
cursor
엘리먼트 위에 마우스를 올렸을 때 커서 스타일을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
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>; |
예제
기본 예제
cursor-pointer와 cursor-grab 같은 유틸리티를 사용해 요소 위에 마우스를 올렸을 때 표시되는 커서를 제어할 수 있습니다:
각 버튼 위에 마우스를 올려 커서가 어떻게 바뀌는지 확인하세요
<button class="cursor-pointer ...">제출</button><button class="cursor-progress ...">저장 중...</button><button class="cursor-not-allowed ..." disabled>확인</button>커스텀 값 사용하기
cursor-[<value>] 구문을 사용하세요 cursor를 완전히 커스텀한 값으로 설정하려면:
<button class="cursor-[url(hand.cur),_pointer] ..."> <!-- ... --></button>CSS 변수를 사용하려면 cursor-(<custom-property>) 구문을 사용할 수도 있습니다:
<button class="cursor-(--my-cursor) ..."> <!-- ... --></button>이는 cursor-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a cursor 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<button class="cursor-not-allowed md:cursor-auto ..."> <!-- ... --></button>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
