2018.07.19 12:32

커서(cursor) 모양 정리

조회 수 95 추천 수 0 댓글 0

​마우스 커서 모양에 대해 알아보겠습니다.

보통 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
crosshair
default
e-resize
grab
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
not-allowed
no-drop

    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
57 HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때 팔공산 2019.03.01 168
56 CSS 말줄임 처리하기 file 팔공산 2018.11.13 318
55 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 423
54 DIV 영역 자체에 링크 거는 방법 file 팔공산 2018.09.23 548
53 DIV 화면 정중앙에 박스 배치하기 file 팔공산 2018.09.19 171
52 DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; ) file 팔공산 2018.09.19 287
» 커서(cursor) 모양 정리 file 팔공산 2018.07.19 95
50 webkit-animation 적용 방법 file 팔공산 2018.01.31 208
49 각종 css3를 자동으로 만들어주는 사이트 팔공산 2017.11.07 385
48 html에 사용되는 Character Entities(특수기호) file 팔공산 2017.11.04 301
47 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 222
46 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1292
45 반응형 CSS 테이블 file 팔공산 2017.06.13 643
44 실시간 환율조회 html file 팔공산 2017.04.18 761
43 HTML 만으로 마우스오버 구현하는 방법 1 file 팔공산 2017.01.07 5248
42 <div> 와 같은 블록 요소를 가운데 정렬하는 방법 팔공산 2016.12.26 1172
41 float 속성을 가진 div 100% 설정하는 방법 file 팔공산 2016.04.21 375
40 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1372
39 CSS3 border-radius 이해하기 file 팔공산 2016.04.07 282
38 IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 11976
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...