HTML HTML CSS, 마우스 커서 변경 방법, 모래시계, 십자가; Mouse Cursor Change
페이지 정보
본문
cursor 라는 CSS 속성에 다음의 값을 지정해 주면, HTML 웹페이지의 마우스 커서 모양이, 십자가나 모래 시계 등으로 변경됩니다.
all-scroll: 좌, 우측 스크롤이 가능할때 나타나는 커서 (24x24) (FF : move와 커서 동일)
auto : 기본값, 브라우저가 마우스 커서 자동 지정 (12x21)
col-resize : 테이블의 세로폭을 리사이즈 할때 나타나는 커서 (21x17)
crosshair : 십자가 (17x17)
default : OS에서 설정한 마우스의 기본 커서 (대부분 화살표) (12x21)
hand : 링크나 개체를 이동할때 나타나는 손 모양의 커서 (17x22) (IE 전용)
move : 이동용 커서 (19x19)
no-drop : 접근 불가나 Drop 불가를 나타내는 커서 (31x24) (FF : not-allowed와 커서 동일)
not-allowed : 접근 불가, 허용불가를 나타내는 커서 (18x18)
pointer : Head 와 모양과 기능이 같음 (17x22)
progress: 화살표 + 모래시계 커서 (22x21)
row-resize : 테이블의 가로폭을 리사이즈 할때 나타나는 커서 (17x21)
text : 텍스트 입력창 편집용 I 빔 커서 (7x16)
wait : 동작중임을 나타내는 모래시계 커서 (13x22)
help : 물음표 (도움말 커서) (21x19)
-resize : 다양한 리사이즈 지원의 커서
n-resize (7x19)
ne-resize (13x13)
nw-resize (13x13)
s-resize (19x7)
se-resize (13x13)
sw-resize (13x13)
e-resize (19x7)
w-resize (19x7)
<html>
<head>
<style type="text/css">
<!--
body {
cursor: crosshair;
}
-->
</style>
</head>
<body>
특정영역에만 커서 변경하기<br><br>
<div style="cursor:help; background-color:lavender">
마우스 커서를 이 회색 구역으로 옮기면<br />
마우스 커스가 물음표(도움말) 모양으로 변경됩니다.<br />
</div>
</body>
</html>
참고자료
http://wizard.ncafe.net/wt/44
http://mwultong.blogspot.com/2007/08/html-css-mouse-cursor-change.html
all-scroll: 좌, 우측 스크롤이 가능할때 나타나는 커서 (24x24) (FF : move와 커서 동일) auto : 기본값, 브라우저가 마우스 커서 자동 지정 (12x21) col-resize : 테이블의 세로폭을 리사이즈 할때 나타나는 커서 (21x17) crosshair : 십자가 (17x17) default : OS에서 설정한 마우스의 기본 커서 (대부분 화살표) (12x21) hand : 링크나 개체를 이동할때 나타나는 손 모양의 커서 (17x22) (IE 전용) move : 이동용 커서 (19x19) no-drop : 접근 불가나 Drop 불가를 나타내는 커서 (31x24) (FF : not-allowed와 커서 동일) not-allowed : 접근 불가, 허용불가를 나타내는 커서 (18x18) pointer : Head 와 모양과 기능이 같음 (17x22) progress: 화살표 + 모래시계 커서 (22x21) row-resize : 테이블의 가로폭을 리사이즈 할때 나타나는 커서 (17x21) text : 텍스트 입력창 편집용 I 빔 커서 (7x16) wait : 동작중임을 나타내는 모래시계 커서 (13x22) help : 물음표 (도움말 커서) (21x19)-resize : 다양한 리사이즈 지원의 커서
n-resize (7x19) ne-resize (13x13) nw-resize (13x13) s-resize (19x7) se-resize (13x13) sw-resize (13x13) e-resize (19x7) w-resize (19x7)<html>
<head>
<style type="text/css">
<!--
body {
cursor: crosshair;
}
-->
</style>
</head>
<body>
특정영역에만 커서 변경하기<br><br>
<div style="cursor:help; background-color:lavender">
마우스 커서를 이 회색 구역으로 옮기면<br />
마우스 커스가 물음표(도움말) 모양으로 변경됩니다.<br />
</div>
</body>
</html>
참고자료
http://wizard.ncafe.net/wt/44
http://mwultong.blogspot.com/2007/08/html-css-mouse-cursor-change.html
댓글목록
등록된 댓글이 없습니다.