반응형
|
스타일 시트 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 입니다.
<!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' 카테고리의 다른 글
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
|---|---|
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
| 스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
| 스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
