커서 변경은 세계에서 가장 인기 있는 속성은 아니지만 여전히 개발자에게 유용한 도구입니다. 브라우저는 링크 및 일부 드래그 가능한 항목과 같은 특정 개체의 커서를 자동으로 변경하지만 개발자는 원하는 커서를 구체적으로 지정하면 더 나은 결과를 얻을 수 있습니다.
CSS에서 마우스 포인트 변경
커서의 모양은 cursor 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;} CSS-Tricks.com의 마법사인 Chris Coyier는 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) 좌표 쌍을 지정하십시오. 아래 예는 핫스팟을 (3,3)으로 설정하고 왼쪽 상단을 (0,0)으로 사용합니다.
.cursor {cursor: url(cursor.svg) 3 3, pointer;} 결론:이러한 속성 사용
웹 사이트를 개발 중인 경우 이러한 CSS 속성을 사이트의 모든 개체에 추가하여 개체 위에 마우스를 놓을 때 사용자가 보는 커서를 변경할 수 있습니다. 모험심이 강하다면 Stylus, TamperMonkey 또는 GreaseMonkey와 같은 브라우저 확장을 사용하여 웹사이트 상단에서 임의의 CSS를 실행할 수도 있습니다. 이렇게 하면 언제 어디서든 나만의 맞춤 커서를 표시할 수 있습니다.