CSS 커서를 적용하는 다양한 방법들. 비트맵 이미지와 이모지 아이콘으로 마우스 커서 만들기.
CSS 커서 속성
CSS에서 사용할 수 있는 기본 커서의 종류는 30가지가 넘습니다.
그중에서 실제로 CSS에서 사용하는 것은 몇 가지 되지 않으며, 대표적인 커서는 다음과 같습니다.
| CSS 속성 값 | 커서 모양 | 설명 |
| default | 
|
기본 커서를 표시합니다. 대부분 화살표 모양입니다. 운영체제, 또는 사용자 설정에 따라 다를 수 있습니다. |
| auto | 커서가 위치한 컨텐츠, 또는 요소에 따라 자동으로 커서 모양이 변경됩니다. 웹브라우저 기본 커서 속성값입니다. |
|
| pointer | 
|
하이퍼링크 커서 모양. |
| none | 커서 감춤. 예외적인 경우가 아니면 사용하면 안됩니다. |
|
| text | 
|
텍스트 입력 필드 커서 모양. |
| wait | 
|
작업중. 또는 결과 대기중 표시. 작업이 진행중이며, 사용자와 상호 작용이 안됨을 표시. |
공통되게 사용하는 커서 모양은 대부분 비슷 비슷하지만 운영체제에 따라서, 또 커서 사용자 설정에 따라서 다른 커서 아이콘이 표시될 수 있습니다.
CSS로 커서 모양을 지정하는 속성은 다음과 같이 표기합니다.
.new-corsur {
cursor: 커서 속성 값;
}
HTML 요소, 또는 CSS 클래스에 커서 속성을 적용하면, 해당 HTML 요소 위로 마우스 커서가 이동하면 마우스 커서 모양이 변경됩니다.
커서 속성 값에 따라 변경되는 커서 모양 확인은 다음 코드를 HTML 파일로 저장해서 웹브라우저에서 열어보면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>커서 테스트</title>
<style>
div {
font-size: 1.5em;
line-height: 2;
}
div.cursor-default {
cursor: default;
}
div.cursor-pointer {
cursor: pointer;
}
div.cursor-text {
cursor: text;
}
div.cursor-auto {
cursor: auto;
}
div.cursor-none {
cursor: none;
}
div.cursor-wait {
cursor: wait;
}
</style>
</head>
<body>
<div class="cursor-default">기본 커서</div>
<div class="cursor-pointer">하이퍼링크 커서</div>
<div class="cursor-text">입력 커서</div>
<div class="cursor-auto">자동 커서</div>
<div class="cursor-none">커서 감춤</div>
<div class="cursor-wait">대기중 커서</div>
</body>
</html>CSS 속성을 활용하면 이모지 아이콘, 또는 이미지를 커서로 사용할 수도 있습니다.
이미지를 마우스 커서로 사용하기
CSS 커서 속성을 이용해 이미지 파일을 마우스 커서로 설정해서 사용할 수 있습니다.
투명 배경을 가진 PNG 이미지 파일을 커서로 사용하면 기존 커서와 동일한 특징을 가진 컬러 커서를 사용할 수 있습니다.
꼭 이미지가 투명 배경이 아니어도 되지만, 커서가 자리를 차지하는 사각형 영역을 커서 이미지가 모두 차지하기 때문에 커서로서는 부적합한 모양이 됩니다.
투명 배경이 필요없으면 PNG 이미지 대신 JPG 이미지를 커서 이미지로 사용할 수도 있습니다.
CSS 커서 속성 값에 "url(이미지웹경로), auto"와 같이 속성 값을 지정하면 이미지 URL 사용할 수 있습니다.
다음과 같은 투명 배경 PNG 이미지를 마우스 커서로 설정해보겠습니다.
.cursor-png {
cursor: url("https://apost.dev/content/images/2023/12/img-81.png"), auto;
}커서 속성 값 중 맨 끝의 "auto" 속성 값은 비트맵 이미지 커서를 가져올 수 없을 경우 최종적으로 적용하는 커서 속성 값입니다.
커서 속성 값은 쉼표로 구분해서 여러 개를 나열할 수 있으며, 왼쪽에서부터 순서대로 적용 가능한 커서 속성 값을 우선 적용합니다.
이모지를 마우스 커서로 사용하기
비트맵 이미지를 직접 만들어서 이미지 커서를 사용하는 것보다는 이모지를 사용하면 조금 더 간편하게 컬러 이모지 모양의 마우스 커서를 설정할 수 있습니다.
사용하고 싶은 이모지 아이콘을 블록으로 선택해서 클립보드로 복사한 후 편집기에 붙여 넣으면 바로 사용 가능합니다.
이모지 아이콘은 다음 사이트에서 찾을 수 있습니다.
getemoji.com 사이트에서 원하는 아이콘 1개를 드래그해서 블록으로 선택한 후 복사를 하고, 웹에디터(텍스트 에디터)에 붙여 넣으면 됩니다.
이모지를 커서로 설정하는 속성 값도 앞서 비트맵 이미지와 같은 "url(웹이미지경로), auto" 속성 값을 사용합니다.
다만 이모지를 사용해야 하기 때문에 웹이미지 경로가 실제 비트맵 이미지가 있는 이미지 경로가 아닌 다른 것을 적용해야 합니다.
이미지 웹 URL 대신 이모지 아이콘 표현을 위해 인라인으로 SVG 이미지 코드를 직접 작성해 넣습니다.
잘 모르면 일단 그대로 베껴넣고 마우스 커서가 어떻게 적용되는지 확인을 해본 후 다음의 설명을 읽으면 됩니다.
.cursor-emoji {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>?</text></svg>") 16 0, auto;
}SVG 이미지 포맷은 벡터 이미지 포맷이며, 벡터 데이터를 XML 포맷의 텍스트로 기술해서 이미지를 표현합니다.
텍스트로 기술하기 때문에 SVG 이미지의 내용을 인라인으로 직접 CSS 커서 속성 값으로 붙여 넣을 수 있습니다.
커서 속성 값으로 이미지 웹 경로를 표시하는 url("") 속성 값의 쌍 따옴표 안에 다음과 같은 XML 이미지를 직접 기술하는 것입니다.
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>?</text></svg>
SVG 이미지(<svg></svg>)를 기술한 앞 부분의 "data:image/svg+xml;utf8, "는 기술한 이미지 데이터가 SVG 이미지임을 표시해주는 메타 데이터입니다.
이모지 아이콘은 벡터로 표현한 아이콘입니다. 따라서 SVG 이미지 데이터 안에 이모지를 직접 사용할 수 있습니다.
이모지 아이콘은 문자 데이터로 간주되기 때문에 SVG 이미지에서 텍스트 데이터를 표현하는 태그로 다음과 같이 표시하게 됩니다.
"<text y='50%'>?</text>"
URL("") 뒤의 "16 0"은 이모지 아이콘을 X축, Y축으로 이동시켜서 기준점을 맞춰주는 것입니다.
마우스 커서 포인터는 커서 포인터 영역의 왼쪽 위 모서리가 기준점이 되는데, 이모지 아이콘을 SVG 데이터로 그대로 표시하면 X축으로 왼쪽으로 더 치우쳐 표시됩니다. 따라서 X축 방향으로 마우스 커서 위치가 부정확하게 표시되는 것을 보정해주는 것입니다.
커서로 표시되는 이모지 아이콘 크기를 변경하려면 SVG 데이터의 width / height 속성 값과 "style" 속성의 "font-size" 속성을 같은 비율로 늘리거나 줄여주면 됩니다.
정의한 SVG 이모지 클래스를 HTML 태그에 적용한 후 태그 위로 마우스를 가져가면 이모지가 표시됩니다.
이모지 아이콘을 마우스 커서로 사용하는 방법은 인터넷 익스플로러에서는 지원되지 않습니다.