mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Tuesday, August 21, 2007

HTML CSS, 마우스 커서 변경 방법, 모래시계, 십자가; Mouse Cursor Change


cursor 라는 CSS 속성에 다음의 값을 지정해 주면, HTML 웹페이지의 마우스 커서 모양이, 십자가나 모래 시계 등으로 변경됩니다.

auto : 기본값, 브라우저가 마우스 커서 자동 지정
crosshair : 십자가
default : 기본 마우스 커서 (대부분 화살표)
hand : 손 모양 커서
move : 이동용 커서
text : 텍스트 입력창 편집용 I 빔 커서
wait : 모래 시계 (대기용 커서)
help : 물음표 (도움말 커서)

다음은 리사이즈 커서:

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

아래 예제와 같습니다:

웹페이지 마우스 커서의, 형태 종류 바꾸기


예제 소스 파일명: example.html
<html>
<head>
<title>페이지 제목</title>
</head>


<body>

이런저런 본문 텍스트...<br />
이런저런 본문 텍스트...<br />

<div style="cursor:crosshair; background-color:greenyellow">
마우스 커서를 이 녹색 구역으로 옮기면<br />
마우스 커스가 십자가 모양으로 변경됩니다.<br />
</div>

이런저런 본문 텍스트...<br />
이런저런 본문 텍스트...<br />

<div style="cursor:wait; background-color:yellow">
마우스 커서를 이 노란 구역으로 옮기면<br />
마우스 커스가 모래시계 모양으로 변경됩니다.<br />
</div>

이런저런 본문 텍스트...<br />
이런저런 본문 텍스트...<br />

<div style="cursor:help; background-color:lavender">
마우스 커서를 이 회색 구역으로 옮기면<br />
마우스 커스가 물음표(도움말) 모양으로 변경됩니다.<br />
</div>


</body>
</html>


브라우저 출력 결과 화면:
(색깔 있는 칸에 마우스를 가져가면 커서 모양이 변합니다.)

이런저런 본문 텍스트...
이런저런 본문 텍스트...


마우스 커서를 이 녹색 구역으로 옮기면
마우스 커스가 십자가 모양으로 변경됩니다.



이런저런 본문 텍스트...
이런저런 본문 텍스트...


마우스 커서를 이 노란 구역으로 옮기면
마우스 커스가 모래시계 모양으로 변경됩니다.



이런저런 본문 텍스트...
이런저런 본문 텍스트...


마우스 커서를 이 회색 구역으로 옮기면
마우스 커스가 물음표(도움말) 모양으로 변경됩니다.






참고: ▶▶ [HTML-CSS] 이미지(img) 위에서, 마우스 커서를 십자가(플러스 기호)로 변경




tag: html
HTML | CSS | 자바스크립트 JavaScript

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top