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