[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 이해하기