1. 서론
오늘은 웹사이트에서 마우스 커서를 JavaScript와 CSS를 이용해 바꾸는 방법에 대해 자세히 알아보겠습니다.
웹사이트를 더 감각적으로 만들고 싶거나, 게임/이벤트 페이지 등에서 사용자 경험을 향상시키고 싶으신가요?
그렇다면 커서를 커스터마이징하는 방법이 큰 도움이 될 수 있습니다.
기본적인 커서 변경부터, 이미지 커서를 직접 따라다니는 고급 방식까지 예제를 중심으로 소개해드릴게요.
2. CSS로 커서 바꾸기 (가장 간단한 방법)
2.1. 기본 커서 스타일 적용
CSS만으로도 커서를 쉽게 변경할 수 있습니다.
* {
cursor: pointer; /* 또는 crosshair, move 등 기본 커서 종류 */
}2.2. 이미지 커서 적용하기
커스텀 이미지를 사용할 수도 있어요.
* {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA2IDc5LjE2NDc1MywgMjAyMS8wMi8xNS0xMTo1MjoxMyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjMgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDE1MzlFMUEwRTZFMTFGMDk1QjBCNjAzQTc0REU0QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDE1MzlFMUIwRTZFMTFGMDk1QjBCNjAzQTc0REU0QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MTUzOUUxODBFNkUxMUYwOTVCMEI2MDNBNzRERTRCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MTUzOUUxOTBFNkUxMUYwOTVCMEI2MDNBNzRERTRCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpZdxf4AAAmtSURBVHjaxFd5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'), auto;
}주의사항: 이미지는.png 등의 파일 확장자 형태로 넣으면 안 되고 data: 로 시작하는 svg 코드를 삽입해야 적용됩니다.
커서 이미지를 SVG로 커스터마이징하고 싶으시다면,
아래 포스팅을 참고해주세요!
👉 SVG 아이콘 삽입 3가지 방법 (웹사이트에 유연하게 적용하는 법)
2.3. 이미지 커서 적용하기
.cur 확장자 파일을 적용할 수도 있습니다.
* {
cursor: url('cursor-image.png'), auto;
}2.4. 자주 사용되는 기본 커서 스타일
| 커서 값 | 설명 |
|---|---|
| default | 기본 화살표 커서 |
| pointer | 클릭 가능한 요소 (ex. 버튼) |
| text | 텍스트 입력 영역 |
| move | 드래그 또는 이동 가능한 요소 |
| not-allowed | 금지 또는 비활성화 상태 표시 |
| wait | 로딩 중 상태 표시 (모래시계 등) |
| grab / grabbing | 드래그 인터랙션에서 자주 사용됨 |
3. JavaScript로 커서 바꾸기
JS를 이용하면 특정 상황에 따라 커서를 바꾸는 동적 처리도 가능합니다.
document.body.style.cursor = "grab"; // 전체 페이지 커서 변경특정 요소에 마우스를 올렸을 때만 커서를 변경할 수도 있어요.
const el = document.getElementById("target");
el.addEventListener("mouseenter", () => {
el.style.cursor = "zoom-in";
});
el.addEventListener("mouseleave", () => {
el.style.cursor = "default";
});4. 완전 커스텀 커서 만들기 (JS + CSS 조합)
기본 커서가 아닌, 이미지나 요소가 마우스를 따라다니는 형태로 커서를 완전히 커스터마이징할 수도 있어요.
<style>
body {
cursor: none; /* 기존 커서 숨기기 */
}
.custom-cursor {
position: fixed;
width: 24px;
height: 24px;
background: url('cursor.png') no-repeat center center;
background-size: cover;
pointer-events: none;
z-index: 9999;
}
</style>
<div class="custom-cursor" id="cursor"></div>
<script>
const cursor = document.getElementById("cursor");
document.addEventListener("mousemove", (e) => {
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
</script>이 방식은 특히 디자인 포트폴리오, 게임, 캠페인 페이지에서 많이 사용됩니다.pointer-events: none은 커서 이미지가 클릭 이벤트를 막지 않도록 하기 위해 필수예요.
5. 커서 이미지 사용 시 브라우저 호환성 주의사항
.png외에.cur,.ani포맷도 일부 브라우저에서 지원됩니다.- 크롬은
32x32px이하의 커서 이미지를 권장하며, 너무 큰 이미지는 자동 축소되거나 동작하지 않을 수 있습니다. - 모바일 브라우저는
cursor속성의 지원이 제한적이므로, 모바일 환경은 기본 커서를 유지하거나 대응을 고려해야 합니다.
6. 고급 팁: 반응형 웹에서의 커서 처리
웹사이트가 반응형이라면, 마우스 커서가 적용되지 않는 모바일/터치 환경도 고려해야 합니다.
@media (hover: hover) and (pointer: fine) {
body {
cursor: url('cursor.png'), auto;
}
}이렇게 설정하면, 터치 디바이스에서는 커서 변경이 적용되지 않고, 데스크탑 환경에서만 작동하도록 할 수 있어요.
7. 자주 묻는 질문 (FAQ)
Q1. 마우스 커서를 특정 버튼에만 적용할 수 있나요?
네. CSS나 JS로 해당 요소에만 cursor 속성을 지정하면 됩니다.
Q2. 이미지 커서가 적용되지 않아요!
이미지 경로를 확인하고, PNG 형식과 크기를 다시 체크해주세요.
또한, HTTPS 환경에서 http:// 이미지 경로는 차단될 수 있으니 주의하세요.
Q3. 모바일에서도 적용되나요?
대부분 모바일 브라우저는 커서 스타일을 지원하지 않기 때문에, 데스크탑 전용 기능으로 간주하는 것이 좋습니다.
8. 참고 자료
- MDN Docs: CSS cursor 속성
- 커스텀 커서 예제: CodePen 예제 보기
