Cursor 편집

Table of Contents (보이기↓)

edit

개요

이 속성은 마우스 커서의 모양을 지정한다.

edit

정의

Cursor설명
값[ [<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, interactive?

edit

값

값설명
<uri>사용할 커서 이미지의 경로를 지정한다.
auto문맥에 맞춰 자동으로 지정한다.
crosshair십자가(+) 형태로 지정한다.
default기본 형태로 지정한다. 보통 화살표 형태로 표현된다.
pointer연결(link)을 지시하는 형태로 지정한다. 보통 손가락 형태로 표현된다.
move이동을 지시하는 형태로 지정한다.
text글자를 선택할 수 있는 형태로 지정한다. 보통 I-bar로 표현된다.
wait프로그램의 동작을 사용자가 기다림려야 함을 지시하는 형태로 지정한다. 보통 모래시계로 표현된다.
help커서에 개체object가 있을 때 도움말은 나타낸다. 보통 물음표(?)로 표현된다.
uri사용도구는 URI를 자원이 지정한 커서으로 부터 읽어온다. 바(|) 형태로 표현된다.
n-resize상단 모서리를 조절하는 형태로 지정한다.
ne-resize상단 오른쪽 모서리를 조절하는 형태로 지정한다.
e-resize오른쪽 모서리를 조절하는 형태로 지정한다.
se-resize하단 오른쪽 모서리를 움직이는 형태로 지정한다.
s-resize하단 모서리를 조절하는 형태로 지정한다.
sw-resize하단 왼쪽 모서리를 조절하는 형태로 지정한다.
w-resize왼쪽 모서리를 조절하는 형태로 지정한다.
nw-resize상단 왼쪽 모서리를 조절하는 형태로 지정한다.
inherit부모 요소의 값을 상속하도록 지정한다.

마우스 커서 이미지로 사용할 URL을 지정할 땐, 지정한 파일을 사용할 수 없을 때를 대비하여 대체 사용할 커서 타입을 끝에 명시해 주어야 한다.

edit

예제

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	p {cursor: pointer;}
</style>
</head>
<body>
	<p>마치 연결(link)된 것처럼, 마우스를 손가락 모양으로 지정한다. </p>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	p {cursor: help;}
</style>
</head>
<body>
	<p>마우스를 도움말(물음표) 모양으로 지정한다. </p>
</body>
</html>

edit

브라우저 호환성

값IE6?IE7?FF2?Op9?
(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지원지원지원지원
progress지원지원지원지원
inherit미지원미지원지원지원

Wiki Trail: < quotes | 문서 목록 | outline-style >

 
Be Friend~! Be Friend~!