알아두면 좋은 CSS 커서표현

소프트웨어/스크립트천국

알아두면 좋은 CSS 커서표현

Dramatique 2010. 2. 9. 09:28

태그나라 CSS 커서표현하기

웹페이지에서 글자나 객체 위에 마우스 커서를 올렸을 경우 원하는 대로 마우스 표시를 바꿔주는 스크립트는 때때로 사용되고 있는데 이것은 간단히 CSS로 구성할수가 있습니다.
운영자는 사용자가 가장 편리한 방향으로 커서가 가르키게 배려하면 좋을것입니다.

아래에 CSS로 표현하는 커서의 속성들 cursor:XX-resize 실례를 보여 드립니다.

cursor:nw-resize : 커서의 방향이 북서쪽을 가르키게 합니다.
cursor:ne-resize : 커서의 방향이 북동쪽을 가르키게 합니다.
cursor:sw-resize : 커서의 방향이 남서쪽을 가르키게 합니다.
cursor:se-resize : 커서의 방향이 남동쪽을 가르키게 합니다.
cursor:e-resize : 커서의 방향이 동서쪽을 가르키게 합니다.
cursor:n-resize : 커서의 방향이 북남쪽을 가르키게 합니다.
cursor:s-resize : 커서의 방향이 남북쪽을 가르키게 합니다.
cursor:w-resize : 커서의 방향이 서동쪽을 가르키게 합니다.
cursor:help: 커서의 모양을 ? 표로 바꿉니다.
cursor:move : 커서의 모양을 이동 모양으로 바꿉니다.
cursor:text : 커서의 모양을 텍스트 입력상태로 바꿉니다.
cursor:crosshair : 커서의 모양을 십자가로 바꿉니다.
cursor:wait : 커서의 모양을 모래시계 모양으로 바꿉니다.
cursor:hand : 커서의 모양을 손 모양으로 바꿉니다.

CSS가 보여주는 이벤트를 느껴볼 수 있습니다.
마우스를 아래 문서줄 적색라인에 올려보세요 !

<html><head><title>태그나라CSS표현하기</title></head><body>
cursor:nw-resize : 커서의 방향이 북서쪽을 가르키게 합니다. 
cursor:ne-resize : 커서의 방향이 북동쪽을 가르키게 합니다. 
cursor:sw-resize : 커서의 방향이 남서쪽을 가르키게 합니다. 
cursor:se-resize : 커서의 방향이 남동쪽을 가르키게 합니다. 
cursor:e-resize : 커서의 방향이 동서쪽을 가르키게 합니다. 
cursor:n-resize : 커서의 방향이 북남쪽을 가르키게 합니다. 
cursor:s-resize : 커서의 방향이 남북쪽을 가르키게 합니다. 
cursor:w-resize : 커서의 방향이 서동쪽을 가르키게 합니다. 
cursor:help: 커서의 모양을 ? 표로 바꿉니다. 
cursor:move : 커서의 모양을 이동 모양으로 바꿉니다. 
cursor:text : 커서의 모양을 텍스트 입력상태로 바꿉니다. 
cursor:crosshair : 커서의 모양을 십자가로 바꿉니다. 
cursor:wait : 커서의 모양을 모래시계 모양으로 바꿉니다. 
cursor:hand : 커서의 모양을 손 모양으로 바꿉니다.
</html>