생활 웹디자인

cursor

토픽 생활 웹디자인 > 외양의 CSS > CSS Dictionary

Summary

마우스 커서의 모양을 지정한다.

[ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help ] ] | inherit
기본값 auto
적용대상 모든요소
상속 상속됨
퍼센테이지 지정불가
미디어 Visual

Value

  • auto : 현재의 문맥에 맞게 커서를 자동으로 지정
  • crosshair : 십자 형태로 지정
  • default : 기본 형태로 지정. 대부분 화살표 형태로 표현
  • pointer : 링크를 지시하는 형태. 일반적으로 손가락 형태로 표현
  • move : 이동을 지시하는 형태로 지정
  • e-resize : 오른쪽 모서리를 조절하는 모양
  • ne-resize : 상단, 오른쪽 모서리를 조절하는 모양
  • nw-resize : 상단, 왼쪽모서리를 조절하는 모양
  • n-resize : 상단 모서리모서리를 조절하는 모양
  • se-resize : 하단 오른쪽 모서리를 조절하는 모양
  • sw-resize : 하단 왼쪽 모서리를 조절하는 모양
  • s-resize : 하단 모서리를 조절하는 모양
  • w-resize : 왼쪽 모서리를 조절하는 모양
  • text : 글자를 선택하는 형태롤 지정. 보통 I-bar형태로 표현
  • wait : 프로그램이 작동중이여서 사용자가 기다려야 하는 형태. 보통 모래시계로 표현
  • help : 보통 물음표 모양으로 표현된다.
  • inherit

Tip

  1. 다음과 같이 사용될 수 있다.
    p{
        cursor: pointer;
    }

Sample

댓글

댓글 본문
  1. 아하
    리체 님이 아무나 님이 셨구나 ㅎㅎ
    안녕하세요 이고잉님 강의에서 나오는 '리체'라는 분이 누구인지 알게되었습니다 ㅎㅎ
    그나저나 어떻게 하면 오픈튜토리얼스에서 '공동생산자'가 되는지 알려주실 수 있나요?
    대화보기
    • 푸른하늘
      12일차 공부 감사합니다
    • 리체:leezche
      감사합니다. 수정되었습니다. ^^
      대화보기
      • 이주형
        Cursor 페이지의 Sample 의 iframe src 링크가 src="//jsfiddle.net/yYCu2/embedded/result%2Chtml%2Ccss//" 라고 되어 있어서 '이 페이지를 표시할 수 없습니다' 라고 나오는 것 같습니다~! 그 링크 부분만 src="https://jsfiddle.net/yYCu2/embedded/result%2Chtml%2Ccss/" 라고 바꾸어주면 잘 작동할 것 같습니다~!