[css] cursor 속성 (마우스 모양 선택)

 

 

[css] cursor 속성 (마우스 모양 선택)

 

무척이나 길었던 명절 연휴... 잘 지내고 오셨는지 모르겠네요

 

너무나 오랫동안 글을 쓰지 못했네요.^^

 

오늘부터 또 조금씩 야금 야금 밀린 숙제를 해치워 나가야겠어요

 

오늘 배울 부분은 마우스 커서 모양을 지정하는 cursor 속성입니다.

 

cursor 속성 : 마우스 포인터가 요소 위에 있을 때 표시되는 마우스 커서 모양을 지정

 

 


 

css 2.1  cursor 속성

 

브라우저 지원:  https://developer.mozilla.org/ko/docs/Web/CSS/cursor 참조해 주세요

 

속성값 부분에 마우스를 대면 어떤 모양인지 나옵니다~

 

속성값 설명
default 기본 커서. 보통 화살표
auto

기본값, 브라우저가 문맥에 기초하여 커서를 표시함

crosshair 십자 표시, 주로 비트맵에서 선택을 가르키기 위해
pointer 링크를 가리키는 표시
move 옮길 수 있음을 표시
progress 프로그램이 수행중임, 사용자가 프로그램과 상호작용할 수 있다는 점에서 wait과 다름
help 도움말. 보통 물음표나, 풍선
text 텍스트가 선택될 수 있음을 표시. 보통 I 자형
url 이미지 파일을 가리키는 주소(사용법은 본문 하단 참조)
wait 프로그램이 바쁘므로 사용자는 기다려야 함. 보통 시계 모양
e-resize 사이즈 조절과 스크롤 커서
n-resize "
ne-resize "
nw-resize "
s-resize "
se-resize "
sw-resize "
w-resize "
inherit 상속
initial 초기화

 


 

 

css 3  cursor 속성

 

브라우저 지원 : http://www.gtalbot.org/DHTMLSection/Cursors.html#CSS3  참조

 

속성값 설명
none 커서가 없음
cell 셀이 선택될 수 있음을 표시
context-menu 문맥 메뉴, 작은 메뉴가 딸린 화살표로 표시
vertical-text 수직 텍스트가 선택될 수 있음을 표시. 수평 I자형으로 나타남
alias 단축키 모양
copy 복사 모양
no-drop 드래그된 아이템이 현재 커서 위치에서는 drop될 수 없음을 표시
not-allowed 요청된 행동이 수행될 수 없음을 표시
ew-resize 양방향의 크기 조절 커서
ns-resize "
nesw-resize "
nwse-resize "
all-scroll 어느 방향으로든 스크롤 될 수 있음을 표시
col-resize 열을 수평으로 크기조절 할 수 있음을 표시
row-resize 줄을 수직으로 크기조절 할 수 있음을 표시
grab 손으로 움켜질 수 있음을 표시
grabbing 손으로 움켜진 모양을 표시
zoom-in 확대가 가능함
zoom-out 축소가 가능함

 

 

[속성값 url 사용법]


브라우저 지원
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url 참조.


 

기본 구문(css 2.1)

 

여러 개의 url을 넣을 경우 쉼표로 분리하며, 맨 마지막에는 지원하지 않는 브라우저를 위해 url이 아닌 속성값을 넣어 줍니다.

 

▶사용 예

 

#foo {cursor: url(test1.cur), url(test2.gif), auto;}

 

먼저 test1.cur 파일을 시도해 보고, 지원하지 않을 경우 test2.gif을 사용하며, 이도 적용되지 않을 때는 auto값을 사용하겠다는

의미


 

css3 구문

 

css3구문에는, x y 좌표가 추가되었습니다.

 

▶사용 예

 

#foo {
cursor: auto
cursor: url(test.png) 4 12, auto;}

 

4는 x(가로) 12는 y(세로)이며, 상단 왼쪽(0, 0)으로부터 4, 12픽셀 지점에 설정됨.


폴백 auto는 ie를 위해서 별도로 지정함. 

 

 

 

gradient (linear-gradient) 사용법

 

gradient (radial-gradient)

 

repeating gradient (반복형 그레디언트)

 

미디어 쿼리, @media query 이해하기

 

지구별에
css 2015.02.23 16:48
Powerd by Tistory, designed by criuce