때에 따라 마우스 커서 모양을 변경할 수 있다면 훨씬 더 좋은 UI를 제공할 수도 있다. 가령 예를 들어 도움말이란 메뉴에 사용자가 마우스를 갖다 댈 경우 마우스 커서가 물음표로 바뀐다면 훨씬 더 직관적일 것이다. 아래 있는 도움말 링크에 마우스를 갖다 대 보자.

 

도움말

이처럼 상황에 맞게 마우스 커서를 적절히 변경할 수 있다면 좀 더 친근한 UI를 제공할 수 있을 것이다. 변경할 수 있는 마우스 커서 종류는 다음과 같다. 효과를 보려면 아래 표의 각 셀에 마우스를 갖다 대 보자:


(hand)
모래시계
(wait)
물음표
(help)
이동표시
(move)
타겟모양
(crosshair)
위쪽 화살표
(n-resize)
오른쪽 화살표
(e-resize)
아래쪽 화살표
(s-resize)
왼쪽 화살표
(w-resize)

텍스트
 (text)

우측아래
(se-resize)
좌측아래
(sw-resize)
우측위
(ne-resize)
좌측위
(nw-resize)

 디폴트
(default)

 

사용 방법은 간단하다. 위에서 예로 든 도움말 링크의 예를 들어 보자. <a> 태그 안에 style:"cursor:help"를 삽입해주면 끝이다.

즉, 다음과 같이 해주면 된다 : <a href="http://korea.internet.com/" style="cursor:help">

 

위 표에 나와 있는 각각의 스타일은 다음과 같다:

style="cursor:hand"
style="cursor:wait"
style="cursor:help"
style="cursor:move"
style="cursor:crosshair"
style="cursor:n-resize"
style="cursor:e-resize"
style="cursor:s-resize"
style="cursor:w-resize"
style="cursor:se-resize"
style="cursor:sw-resize"
style="cursor:ne-resize"
style="cursor:nw-resize"

 

이 style이 적용될 수 있는 태그는 여러 가지가 있다. 그 중 다음과 같이 font나 td 태그에도 적용할 수 있다:

예) <FONT STYLE="CURSOR:HAND">폰트 내용</FONT>
예) <TD STYLE="CURSOR:WAIT">테이블 내용</FONT>

주의 : 이 style을 지원하는 브라우저에서만 사용할 수 있다.

 

# 익스 6.0버전이상 추가된 기능및 보충

 

마우스를 올려 놓으세요.

위의 예제를 구현하기 위한 소스를 보자 CSS의 Cuser Property를 hand로 선언을 함으로서 포인터가 예문위로 올라가게되면 마우스 포인터가 손모양으로 바뀌게 된다.

<p onmouseover="this.style.cursor='hand'">마우스를 올려 놓으세요</p>

이제 익스플로러에서 지원하는 커서의 다양한 종류에 대하여 보도록하자.
(표의 설명문구에 마우스를 올리면 예제를 볼 수 있다.)

all-scroll

[IE6+] 좌, 우측 스크롤이 가능할때 나타나는 커서

auto

브라우저의 기본 설정을 따름

col-resize

[IE6+] 테이블의 세로폭을 리사이즈 할때 나타나는 커서

row-resize

[IE6+] 테이블의 가로폭을 리사이즈 할때 나타나는 커서

crosshair

+ 모양의 커서

default

OS에서 설정한 마우스의 기본 커서

hand

링크나 개체를 이동할때 나타나는 손 모양의 커서

help

도움말 등을 나타 낼때 사용하는 커서

move

이동 가능함을 나타내는 + 자 모양의 화살표

no-drop

[IE6+] 접근 불가나 Drop 불가를 나타내는 커서

not-allowed

접근 불가, 허용불가를 나타내는 커서

pointer

[IE6+] Head 와 모양과 기능이 같음

progress

[IE6+] 화살표 + 모래시계 커서

wait

동작중임을 나타내는 모래시계 커서

text

가로 텍스트를 표시하는 I 자 모양의 커서

text

[IE6+] 세로 텍스트를 표시하는 ㅡ 자 모양의 커서

url(uri)

[IE6+] 다른서버의 커서를 사용할 수 있음

*-resize

다양한 리사이즈 지원의 커서 (아래쪽 표참고)

[표 - 리사이즈 별 커서]

n-resize s-resize ne-resize sw-resize
nw-resize se-resize e-resize w-resize

이제 서버에 미리 저장된 커서파일을 불러 커서를 표시 해보자.

<style> td.style.cursor = "url("커서의 URL")"; </style>

[Custom Cursor Sample]

위의 소스처럼 커서를 선언하게 되면 서버에 미리 저장해둔 다양한 커서를 불러 올수 있게 된다. 즉 Custom Cursor를 만들 수 있게 된다.

기사의 예제에서는 커서의 종류에 대해서 주로 다루었지만 이를 사이트 내에서 적절이 활용하다면 자신의 사이트만의 고유한 이미지를 가지는 마우스 포인터나, 로딩시 progress 속성을 이용하여 로딩시에만 나타나는 반짝 광고등으로 활용 할 수 있을 것이다.

출처 : Tong - pplstory님의 Html & Tag통

 

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

댓글을 달아 주세요


블로그 이미지
홍상길

공지사항

Yesterday17
Today0
Total294,940

달력

 « |  » 2019.12
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

최근에 달린 댓글

글 보관함