커서 변경은 가장 인기 있는 CSS 속성은 아니지만, 개발자에게 여전히 유용한 도구입니다. 브라우저는 링크나 드래그 가능한 요소처럼 특정 객체에 대해 자동으로 커서를 변경해 주지만, 원하는 커서를 직접 지정하면 훨씬 더 좋은 결과를 얻을 수 있습니다.
CSS에서 마우스 포인터 변경하기
커서의 모양은 CSS의 cursor 속성으로 제어합니다. 이 속성은 사용자가 객체 위에 마우스를 올렸을 때 렌더링되는 커서의 종류를 결정합니다. 예를 들어, 아래 클래스가 적용된 객체 위에 마우스를 올리면 네 방향 이동 화살표가 나타납니다.
.cursor { cursor: move; }
객체 위에 마우스를 올리면 사용자는 아래와 같은 커서를 보게 됩니다.
CSS 표준 커서 옵션
커서에 설정할 수 있는 옵션은 매우 다양합니다. 목록에서 볼 수 있는 "N", "S", "W", "E"는 각각 북(North), 남(South), 동(East), 서(West) 방향을 나타냅니다. 예를 들어 cursor: e-resize;는 "동쪽", 즉 오른쪽에 화살표가 달린 크기 조절 핸들을 표시합니다.
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
CSS-Tricks.com의 마스터 Chris Coyier는 CSS의 다양한 커서 옵션을 한눈에 보여 주기 위해 아래와 같은 그림을 만들기도 했습니다.
이미지를 커서로 사용하기
많은 CSS 속성과 마찬가지로 cursor 속성도 URL 지정을 통해 값을 받을 수 있습니다. 예를 들어 아래 클래스는 지정한 이미지를 커서로 사용합니다.
.cursor {cursor: url('path/to/image.png'), auto;}
뒤에 붙은 auto는 대체(fallback) 커서를 지정하는 부분입니다. auto를 지정하면 브라우저가 해당 객체에 원래 사용하던 커서가 그대로 표시됩니다. 쉼표로 구분한 목록에 이미지를 여러 개 지정하거나, 표준 커서 중 하나를 대체 커서로 지정할 수도 있습니다.
.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}
GIF, SVG, PNG 등 어떤 형식이든 애니메이션이 들어간 커서는 브라우저에서 지원되지 않습니다. 다만 투명 PNG는 현재 시중의 모든 주요 웹 브라우저에서 잘 작동하며, SVG는 Firefox에서는 다소 불안정하지만 다른 브라우저에서는 문제없이 작동합니다.
기본적으로 커서의 "핫스팟(hot spot)"은 이미지의 왼쪽 위 모서리로 설정됩니다. 다른 위치를 "핫스팟"으로 지정하려면 cursor 호출에 (X, Y) 좌표 쌍을 함께 명시하면 됩니다. 아래 예제는 왼쪽 위를 (0, 0)으로 기준할 때 핫스팟을 (3, 3)으로 설정합니다.
.cursor {cursor: url(cursor.svg) 3 3, pointer;}
마무리: 이 속성들을 활용하는 방법
웹사이트를 개발할 때 이러한 CSS 속성을 사이트의 어떤 요소에든 추가하면, 사용자가 해당 요소 위에 마우스를 올렸을 때 표시되는 커서를 자유롭게 변경할 수 있습니다. 조금 더 나아가고 싶다면 Stylus, TamperMonkey, GreaseMonkey 같은 브라우저 확장 프로그램을 사용해 웹사이트 위에 원하는 CSS를 실행할 수도 있습니다. 이렇게 하면 원하는 때, 원하는 곳 어디에서나 자신만의 커스텀 커서를 표시할 수 있습니다.