• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

스타일 시트 활용(4) - 커서 모양을 마음대로

오작교 16470

0

여러분들이 웹서핑하다가 링크가 걸려있는 글이나 이미지에 마우스를 올려 놓으면 커서 모양이 손가락으로 변하지요?
근데 링크 말고도 글에서 특정부분이나 링크가 안 걸려져 있는 이미지에 마우스를 올려놓으면 커서 모양을 손가락 모양은 물론 모래시계 모양등 가지가지로 바꾸는 것이 가능하답니다.
스타일을 이용하면요.

마우스를 각 문장에 갔다 대어 보시면 무슨 말인지 쉽게 짐작이 가실겁니다.

      (1) style="cursor:nw-resize"   커서의 화살표 방향이 북서쪽을 향한다.
      (2) style="cursor:ne-resize"   커서의 화살표 방향이 북동쪽을 향한다.
      (3) style="cursor:sw-resize"   커서의 화살표 방향이 남서쪽을 향한다.
      (4) style="cursor:se-resize"   커서의 화살표 방향이 남동쪽을 향한다.
      (5) style="cursor:help"   커서의 모양을 ? 표로 바꾼다.
      (6) style="cursor:move"   커서의 모양을 이동 모양으로 바꾼다.
      (7) style="cursor:e-resize"   커서의 모양을 동쪽방향으로 향하게 한다.
      (8) style="cursor:n-resize"   커서의 모양을 북쪽방향으로 향하게 한다.
      (9) style="cursor:s-resize"   커서의 모양을 남쪽방향으로 향하게 한다.
      (10) style="cursor:w-resize"   커서의 모양을 서쪽방향으로 향하게 한다.
      (11) style="cursor:text"   커서의 모양을 텍스트 입력상태로 바꾼다.
      (12) style="cursor:crosshair"   커서의 모양을 십자가로 바꾼다.(그래픽툴의 마퀴툴 커서처럼)
      (13) style="cursor:wait"   커서의 모양을 대기(모래시계) 모양으로 바꾼다.


효과 보시구 맘에 드시는거 골라서 쓰세요 ^^
쓰는 방법은 모두 다 아시겠지요? 이런것은 head에 지정해주는것보다 body에 스타일 형식으로 지정해 주면 편합니다.
그래두 혹시나 해서 설명드리겠습니다. -_-

<font style="cursor:help"> 커서 모양을 ? 표로 바꾸자 </font>
공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290736 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349696 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294330 +14
300
normal
오작교 23.12.10.09:32 14529 0
299 Script
normal
오작교 23.12.10.09:29 19851 0
298 CSS
normal
오작교 21.01.09.14:18 40782 0
297 HTML
normal
오작교 15.09.17.08:58 116371 0
296 HTML
normal
오작교 15.09.13.21:38 21658 0
295 HTML
normal
오작교 15.09.13.21:30 25238 0
294 HTML
normal
오작교 15.08.30.12:19 52839 0
293 Script
normal
오작교 15.05.12.14:06 21218 0
292 HTML
file
오작교 12.03.08.13:51 35992 0
291 HTML
normal
오작교 11.06.03.10:44 40812 0
290 CSS
normal
오작교 11.06.03.10:29 70709 0
289 Script
normal
오작교 11.03.22.11:19 43519 0
288 Script
normal
오작교 11.03.22.11:15 38291 0
287 Script
normal
오작교 11.03.22.11:07 37175 0
286 HTML
normal
오작교 11.01.25.10:27 36270 0
285 CSS
normal
오작교 11.01.24.10:40 35442 0
284 HTML
normal
오작교 11.01.24.10:39 37161 0
283 Script
normal
오작교 11.01.24.10:34 38171 0
282 CSS
normal
오작교 11.01.24.10:31 37809 0
281 CSS
normal
오작교 11.01.24.10:27 36269 0