관리 메뉴

드럼치는 프로그래머

[CSS] cursor 속성 본문

★─Programing/☆─WebProgram

[CSS] cursor 속성

드럼치는한동이 2016. 5. 27. 13:36
cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다.

auto : 자동

default : 기본값 (화살표)

pointer : 클릭시의 마우스 (손가락 모양)

wait : 로딩

등 다양한 종류의 cursor 속성이 있다.

 사용법

<p style="cursor:wait">Wait</p>

 

예제

<html>
<head>
</head>

<body>
	<p style="cursor:auto">Auto</p>
	<p style="cursor:crosshair">Crosshair</p>
	<p style="cursor:default">Default</p>
	<p style="cursor:pointer">Pointer</p>
	<p style="cursor:move">Move</p>
	<p style="cursor:e-resize">e-resize</p>
	<p style="cursor:ne-resize">ne-resize</p>
	<p style="cursor:nw-resize">nw-resize</p>
	<p style="cursor:n-resize">n-resize</p>
	<p style="cursor:se-resize">se-resize</p>
	<p style="cursor:sw-resize">sw-resize</p>
	<p style="cursor:s-resize">s-resize</p>
	<p style="cursor:w-resize">w-resize</p>
	<p style="cursor:text">Text</p>
	<p style="cursor:wait">Wait</p>
	<p style="cursor:help">Help</p>
</body>
</html>

 

 

출력 결과:

 

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resizenw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

Text

Wait

Help

 

[출처] http://div.or.kr/css-studying/cursor%20%EC%86%8D%EC%84%B1

Comments