-
[CSS] 마우스 커서 모양 포인터로 바꾸기(cursor)프론트엔드/CSS 2020. 7. 30. 21:23
해당 지점위에 마우스 커서를 손모양으로 바꾸고 싶을때가 있습니다. 이 때 사용하는 CSS 속성이 cursor 입니다.
개요
cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다.
auto: 자동
default: 기본값 (화살표)
pointer: 손가락 모양 (클릭 가능한 버튼)
wait: 로딩사용법
.btn-wait { cursor: pointer }
<style type="text/css"> .cursors span{ display: inline-block; margin: 5px; padding: 5px 10px; background-color: #d2f4ff; border: 2px solid #09c; } </style> <div class="cursors"> <span style="cursor: auto">Auto</span> <span style="cursor: crosshair">Crosshair</span> <span style="cursor: default">Default</span> <span style="cursor: pointer">Pointer</span> <span style="cursor: move">Move</span> <span style="cursor: e-resize">e-resize</span> <span style="cursor: ne-resize">ne-resize</span> <span style="cursor: nw-resize">nw-resize</span> <span style="cursor: n-resize">n-resize</span> <span style="cursor: se-resize">se-resize</span> <span style="cursor: sw-resize">sw-resize</span> <span style="cursor: s-resize">s-resize</span> <span style="cursor: w-resize">w-resize</span> <span style="cursor: text">Text</span> <span style="cursor: wait">Wait</span> <span style="cursor: help">Help</span> </div>
결과물
Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help참고문헌
https://ofcourse.kr/css-course/cursor-%EC%86%8D%EC%84%B1 [cursor 속성]
반응형'프론트엔드 > CSS' 카테고리의 다른 글
[CSS] 클릭 이벤트 허용 여부 (pointer-events) (0) 2020.07.30