2018.07.19 12:32

커서(cursor) 모양 정리

조회 수 187 추천 수 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
번호 제목 글쓴이 날짜 조회 수
58 폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법 팔공산 2018.09.26 1389
57 테이블(셀) 깨지지 않는 CSS 1 팔공산 2008.07.12 8501
56 태그의 상세분류 팔공산 2008.04.04 4875
» 커서(cursor) 모양 정리 file 팔공산 2018.07.19 187
54 즐겨찾기 스크립트 1 팔공산 2008.02.21 5218
53 제발...alt텍스트와 title텍스트를 구분해조바바 1 팔공산 2008.04.04 6729
52 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1 팔공산 2008.07.12 7378
51 자신의 홈에 프린트버튼을 넣자 2 팔공산 2008.07.12 6973
50 익스6에서만 작동되게하는 css구문 팔공산 2009.02.19 9855
49 이미지 없이 라운드 박스 만들기 팔공산 2008.04.04 4156
48 이미지 없이 그라데이션효과 주기 팔공산 2008.07.12 8210
47 이미지 바꾸기 소스 1 감로수 2009.06.06 10253
46 이미지 마우스 hover시 좌우 기울이기 file 팔공산 2017.10.27 332
45 웹퍼블리셔가 알고있어야 할 display:table 속성 newfile 팔공산 2020.02.20 0
44 실시간 환율조회 html file 팔공산 2017.04.18 1004
43 사각박스 코너를 이미지없이 둥글게 만드는법 file 팔공산 2008.04.08 8200
42 붙어야 할 이미지가 붙지 않을때. file 팔공산 2008.04.19 7357
41 배경이미지 슬라이드 스크립트 팔공산 2016.04.19 1513
40 반응형 CSS 테이블 file 팔공산 2017.06.13 827
39 모바일웹에서 스마트폰으로 전화바로연결 코드 file 팔공산 2017.06.16 1734
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...