스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기

스타일시트 CSS

스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기

 

환경: Eclipse Mars, CSS3

 

cursor 속성은 해당 태그 위치에 마우스를 가져갔을 때 적용한 값의 아이콘 모양을 나타내는데 사용합니다. 다양한 형태의 아이콘이 있는데 주로 로딩을 나타내는 회전하는 아이콘, 클릭이 가능한 표시를 위한 손 모양의 아이콘, 도움말을 표시할 때 쓰는 “?” 아이콘 등이 있습니다. 각 속성별로 어떤 모양들이 있는지 알아 보겠습니다. 

 

 첫 번째 방식은 간단합니다. CSS 에 정의한 상수 값을 넣으면 컴퓨터에 내장되어 있는 시스템 커서를 로딩합니다. 표에서처럼 default, help, pointer 등이 있습니다. 두 번째 커서를 로딩하는 방식은 같은 폴더의 사용자 정의 커서 아이콘을 로딩하거나 URL 주소 링크로 다운받아 사용할 수 있습니다. 예를 들어 .baz { cursor: url(hyper.cur), auto } 이런 형태가 되는 것이죠. 하지만 인터넷 익스플로러에서는 URL 주소 링크는 되지 않습니다.

 

<style type="text/css">

cursor: “상수값”;

</style>

 

cursor 의 속성값은 아주 다양합니다. 샘플 소스에 있는 상수 값들이 아래 표에 다 포함되어 있습니다. 표를 참고해서 어떤 커서를 사용할지 결정해야 합니다. 위에서도 이야기 했듯이 주로 사용하는 커서는 pointer wait, progress 입니다

스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</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>

스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기

 

Posted by 녹두장군