CSS에서 마우스 포인터를 변경하는 방법

커서 변경은 세계에서 가장 인기 있는 속성이 아닐 수 있지만 개발자에게는 여전히 유용한 도구입니다. 브라우저는 링크 및 드래그할 수 있는 일부 항목과 같은 특정 개체의 커서를 자동으로 변경하지만 개발자는 원하는 커서를 구체적으로 지정하여 더 나은 결과를 얻을 수 있습니다.

CSS에서 마우스 포인트 변경

커서 모양은 커서 CSS 속성. 이 속성은 사용자가 개체 위로 마우스를 가져갈 때 렌더링되는 커서 유형을 제어합니다. 예를 들어 아래 클래스와 연결된 개체 위로 마우스를 가져가면 4방향 끌기 화살표가 생성됩니다.

.cursor { cursor: move;}

개체 위로 마우스를 가져가면 아래와 같은 커서가 표시됩니다.

CSS의 표준 커서 옵션

커서 사용에 대해 설정할 수 있는 다양한 커서 옵션이 있습니다. 목록에 표시되는 “N”, “S”, “W” 및 “E”는 동서남북의 기본 방향을 나타냅니다. 예를 들어, 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;}

배후의 마법사 Chris Coyier CSS-Tricks.com만들어진 이 낙서 CSS의 다양한 커서 옵션을 표시하는 데 도움이 됩니다.

이미지를 커서로 사용

많은 CSS 속성과 마찬가지로 cursor 속성도 URL 사양을 통해 속성을 가질 수 있습니다. 예를 들어 아래 클래스는 커서에 대해 연결된 이미지를 사용합니다.

.cursor {cursor: url('path/to/image.png'), auto;}

이후 자동은 대체 커서를 지정합니다. auto 속성은 브라우저가 일반적으로 커서 아래의 현재 개체에 대해 사용하는 모든 커서를 표시합니다. 쉼표로 구분된 목록으로 추가 이미지를 지정하거나 대체 커서로 사용할 커서를 지정할 수도 있습니다.

.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}

GIF, SVG, PNG 등 모든 종류의 애니메이션은 브라우저에서 지원되지 않습니다. 그러나 투명한 PNG는 오늘날 시장에서 널리 사용되는 모든 웹 브라우저에서 작동합니다. SVG는 Firefox에서는 안정적이지 않지만 다른 브라우저에서는 잘 작동합니다.

기본적으로 커서의 “핫스팟”은 이미지의 왼쪽 상단 모서리로 설정됩니다. 다른 “핫스팟”을 나타내려면 커서 호출에서 (X,Y) 좌표 쌍을 지정하십시오. 아래 예제는 왼쪽 상단을 (0,0)으로 사용하여 핫스팟을 (3,3)으로 설정합니다.

.cursor {cursor: url(cursor.svg) 3 3, pointer;}

결론: 이러한 특성 사용

웹 사이트를 개발 중인 경우 이러한 CSS 속성을 사이트의 모든 개체에 추가하여 개체 위로 마우스를 가져갈 때 사용자에게 표시되는 커서를 변경할 수 있습니다. 더 모험적인 경우 다음과 같은 브라우저 확장을 사용할 수도 있습니다. 첨필, 탬퍼몽키또는 그리스몽키 웹 사이트 상단에서 임의의 CSS를 실행합니다. 이렇게 하면 언제 어디서나 원하는 사용자 지정 커서를 표시할 수 있습니다.

알렉산더 폭스

Alexander Fox는 펜실베니아주 필라델피아에 거주하는 기술 및 과학 작가로 고양이 한 마리, Mac 세 대, 그가 사용할 수 있는 것보다 더 많은 USB 케이블을 가지고 있습니다.