CSS를 사용하여 커서 모양 변경

<시간/>

CSS cursor 속성을 사용하여 HTML 문서의 다른 요소에 대한 커서 이미지를 조작할 수 있습니다.

구문

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

다음은 CSS 커서 속성의 값입니다 -

Sr.No	가치 및 설명
1	별칭 무언가의 별칭이 생성됨을 나타냅니다.
2	전체 스크롤 어떤 방향으로든 스크롤할 수 있음을 나타냅니다.
3	자동 기본값이며 브라우저는 커서를 설정합니다.
4	셀 셀(또는 셀 집합)을 선택할 수 있음을 나타냅니다.
5	컨텍스트 메뉴 컨텍스트 메뉴를 사용할 수 있음을 나타냅니다.
6	열 크기 조정 열의 크기를 가로로 조정할 수 있음을 나타냅니다.
7	복사 복사해야 할 항목이 있음을 나타냅니다.
8	십자선 십자형으로 렌더링됩니다.
9	기본값 기본 커서를 렌더링합니다.
10	전자 크기 조정 상자의 가장자리가 오른쪽(동쪽)으로 이동됨을 나타냅니다.
11	새 크기 조정 양방향 크기 조정 커서를 나타냅니다.
12	잡다 무언가를 잡을 수 있음을 나타냅니다.
13	잡기 무언가를 잡을 수 있음을 나타냅니다.
14	도움 도움을 받을 수 있음을 나타냅니다.
15	이동 무엇인가를 옮겨야 함을 나타냅니다.
16	n-크기 조정 상자의 가장자리가 위로(북쪽) 이동됨을 나타냅니다.
17	크기 조정 상자의 가장자리가 위쪽 및 오른쪽(북쪽/동쪽)으로 이동됨을 나타냅니다.
18	새 크기 조정 양방향 크기 조정 커서를 나타냅니다.
19	ns-크기 조정 양방향 크기 조정 커서를 나타냅니다.
20	nw-크기 조정 상자의 가장자리가 위쪽 및 왼쪽(북쪽/서쪽)으로 이동됨을 나타냅니다.
21	nwse-크기 조정 양방향 크기 조정 커서를 나타냅니다.
22	노드롭 드래그한 항목을 여기에 놓을 수 없음을 나타냅니다.
23	없음 요소에 대해 커서가 렌더링되지 않습니다.
24	허용되지 않음 요청한 작업이 실행되지 않음을 나타냅니다.
25	포인터 포인터이며 링크를 나타냅니다.
26	진행 상황 프로그램이 사용 중임을 나타냅니다(진행 중).
27	행 크기 조정 행의 크기를 세로로 조정할 수 있음을 나타냅니다.
28	크기 조정 상자의 가장자리가 아래로(남쪽) 이동됨을 나타냅니다.
29	크기 조정 상자의 가장자리가 아래 및 오른쪽(남쪽/동쪽)으로 이동됨을 나타냅니다.
30	sw 크기 조정 상자의 가장자리가 아래로 이동해야 함을 나타냅니다. 왼쪽(남쪽/서쪽)
31	텍스트 선택할 수 있는 텍스트를 나타냅니다.
32	URL 쉼표로 구분된 사용자 지정 커서에 대한 URL 목록(마지막에 안전 장치로 언급된 일반 커서 포함)
33	세로 텍스트 선택할 수 있는 세로 텍스트를 나타냅니다.
34	w-크기 조정 상자의 가장자리가 왼쪽(서쪽)으로 이동됨을 나타냅니다.
35	잠깐 프로그램이 사용 중임을 나타냅니다.
36	확대 확대할 수 있음을 나타냅니다.
37	축소 축소할 수 있음을 나타냅니다.
38	초기 커서 속성을 기본값으로 설정합니다.
39	상속 그것은 부모 요소에서 커서 속성을 상속합니다.

다음은 CSS 커서 속성을 구현한 예입니다.

예시

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>

출력

CSS를 사용하여 커서 모양 변경