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

 
Previous Post CSS 적용 방법, CSS 태그는?2차원 배열 출력 소스; C언어 이차원 배열 출력, Java에서C언어 2차원 배열 0으로 초기화 예제 소스인물 사진 촬영에 좋은 디카는? Portrait CameraC언어에서 문자열에 null 문자 입력 방법; 널문자 출력C언어에서 종료 함수는? 프로그램 중단시키는 방법; exit returnbzip2 디렉토리 압축하기 방법은? bz2 폴더 압축 풀기 명령어캐논 필카용 렌즈, 캐논 디카와 호환 여부; Canon EOS DSLR Lens숫자 무작위 생성; 윈도우 도스창에서; DOS 랜덤 Random디카로 찍은 사진을 아래한글, 아래아 한글에 붙이는 법; HWP JPG

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

Tuesday, August 21, 2007

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) 위에서, 마우스 커서를 십자가(플러스 기호)로 변경

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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