웹 페이지에 기본 마우스 커서 대신 원하는 이미지를 커서로 사용하고 싶다면 CSS의 cursor 속성을 활용하면 됩니다. 커스텀 커서 이미지는 확장자별로 지원 브라우저가 다른데, .cur 파일은 인터넷 익스플로러(IE)에서, .gif와 .png 파일은 Chrome, Firefox, Safari 등 주요 모던 브라우저에서 지원됩니다.
적용 방법은 간단합니다. cursor 속성에 url() 함수로 커서 이미지 파일의 경로를 지정하고, 쉼표(,) 뒤에 auto, default, pointer 같은 일반 커서 값을 함께 작성해 주면 됩니다. 이렇게 하면 커스텀 이미지를 불러오지 못하는 경우에도 기본 커서가 대신 표시되므 안정적으로 동작합니다.
해결 방법
Selector {
cursor: url("/*커스텀 커서 파일 경로*/"), 일반 커서 값;
}예제 코드
아래 예제를 통해 실제로 커스텀 커서를 만드는 과정을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS로 만드는 커스텀 커서</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#tech1 {
cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS로 만드는 커스텀 커서</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>실행 결과
위 코드를 실행한 결과는 다음과 같습니다.
'DBMS' 버튼 위에 마우스를 올렸을 때 −
'Python' 버튼 위에 마우스를 올렸을 때 −
이처럼 cursor 속성과 url() 함수를 조합하면 별도의 JavaScript 없이 순수 CSS만으로 요소마다 서로 다른 커스텀 커서를 손쉽게 적용할 수 있습니다. 버튼, 링크, 특정 영역 등 원하는 요소에 개성 있는 커서를 지정해 사용자 경험을 한층 더 풍부하게 만들어 보세요.