마우스 커서 모양에 대해 알아보겠습니다.
보통 cursor 작업을 하면 pointer 위주로 작업을 합니다.
하지만 pointer 외에 아주 많는 cursor 가 있습니다.
그종류에 대해 소스와 샘플을 올려봅니다.
적절한 cursor 지정을 통해 사용자 편의를 고려해보시기 바랄께요~
[소스]Cursor 모양
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<span style="cursor:auto">auto</span><br/>
<span style="cursor:crosshair">crosshair</span><br/>
<span style="cursor:default">default</span><br/>
<span style="cursor:e-resize">e-resize</span><br/>
<span style="cursor:grab">grab</span><br/>
<span style="cursor:help">help</span><br/>
<span style="cursor:move">move</span><br/>
<span style="cursor:n-resize">n-resize</span><br/>
<span style="cursor:ne-resize">ne-resize</span><br/>
<span style="cursor:nw-resize">nw-resize</span><br/>
<span style="cursor:pointer">pointer</span><br/>
<span style="cursor:progress">progress</span><br/>
<span style="cursor:s-resize">s-resize</span><br/>
<span style="cursor:se-resize">se-resize</span><br/>
<span style="cursor:sw-resize">sw-resize</span><br/>
<span style="cursor:text">text</span><br/>
<span style="cursor:w-resize">w-resize</span><br/>
<span style="cursor:wait">wait</span><br/>
<span style="cursor:not-allowed">not-allowed</span><br/>
<span style="cursor:no-drop">no-drop</span>
|
cs |
[결과]Cursor 모양(마우스를 올려보세요)
auto |
[출처] [CSS]커서(cursor) 모양 정리|작성자 와이키키