css cursor 프로퍼티로 마우스 커서 제어하기

네 안녕하세요, 이번 포스팅에서는 css로 마우스의 커서를 제어하는 방법에 대하여 알아보도록 하겠습니다.

우리가 마우스 커서를 올리면 마우스의 커서가 변합니다.

이 역시도 우리는 css로 제어가 가능합니다.

이러한 마우스 커서 제어를 할 수 있는 속성값은 정말 다양한데,

이번 포스팅에서는 그러한 마우스 커서를 제어할 수 있는 속성들이 어떤 것이 있는지

한 번 알아보도록 하겠습니다.

1. 마우스 커서 제어하기 : cursor 사용

css에서는 cursor라는 프로퍼티를 제공하며, 이를 통하여 마우스 커서를 제어를 할 수 있습니다.

마우스 커서 제어를 할 수 있는 속성값은 정말 많습니다.

제가 한 번 적어보겠습니다.

alias : 통칭(별명) 커서
all-scroll : 어떤 방향이든 스크롤이 가능한 커서
auto : 기본 커서(상황에 따라 자동 설정이 됨)
cell : 엑셀과 같은 시트를 작성할 때 쓰이는 커서(엑셀에서 보이는 칸의 단위를 '셀'이라 하며, 그걸 다룰 때 씀)
context-menu : 기본 커서(문맥 메뉴 고르는 커서)
col-resize : 열 재정렬 커서
copy : 복사 커서
crosshair : fps 게임에서 볼 수 있는 조준 커서
default : 기본 커서
e-resize : 동쪽 재정렬 커서
ew-resize : 좌우 재정렬 커서
grab : 잡기 커서(잡기 전)
grabbing : 잡기 커서(잡는 중)
help : 도움말 커서
move : 이동 커서
n-resize : 북쪽 재정렬 커서
ne-resize : 북동쪽 재정렬 커서
nesw-resize : 북동남서 재정렬 커서
ns-resize : 상하 재정렬 커서
nw-resize : 북서 재정렬 커서
nwse-resize : 북서남동 재정렬 커서
no-drop : 드래그 앤 드롭 금지 커서
none : 커서 안보임
not-allowed : 허용 안됨 커서
pointer : 포인터 커서
progress : 진행 중 커서
row-resize : 행 재정렬 커서
s-resize : 남쪽 재정렬 커서
se-resize : 남동쪽 재정렬 커서
sw-resize : 남서쪽 재정렬 커서
text : 텍스트 입력 커서
url(myBall.cur),auto : url 커서(붉은색 공이 나타남)
vertical-text : 수직 텍스트 입력 커서
w-resize : 서쪽 재정렬 커서
wait : 대기 커서
zoom-in : 확대 커서
zoom-out : 축소 커서
initial : 기본값 커서
inherit : 부모 속성 상속 커서

이렇게나 많은 커서가 존재를 합니다.

물론, 이 중에서 다 보시면 모양이 겹치는 것들도 있을 겁니다.

그런데, 엄연히 기능이 다 다르다는 것을 기억하셔야 합니다.

그럼 이를 확인하기 위해서 간단하게 예제를 한 번 작성을 해보겠습니다.

그리고 커서의 사진은 제가 캡쳐를 해서 올리려고 했는데,

커서가 찍히지 않아서 예제 코드를 실행시켜서 보시면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .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: -webkit-grab; cursor: grab;}
        .grabbing {cursor: -webkit-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;}
        </style>
</head>
<body>
    <h1>마우스 커서 프로퍼티</h1>
    <p>마우스를 글씨에 올려서 커서를 확인해보세요.</p>
    
    <p class="alias">alias</p>
    <p class="all-scroll">all-scroll</p>
    <p class="auto">auto</p>
    <p class="cell">cell</p>
    <p class="context-menu">context-menu</p>
    <p class="col-resize">col-resize</p>
    <p class="copy">copy</p>
    <p class="crosshair">crosshair</p>
    <p class="default">default</p>
    <p class="e-resize">e-resize</p>
    <p class="ew-resize">ew-resize</p>
    <p class="grab">grab</p>
    <p class="grabbing">grabbing</p>
    <p class="help">help</p>
    <p class="move">move</p>
    <p class="n-resize">n-resize</p>
    <p class="ne-resize">ne-resize</p>
    <p class="nesw-resize">nesw-resize</p>
    <p class="ns-resize">ns-resize</p>
    <p class="nw-resize">nw-resize</p>
    <p class="nwse-resize">nwse-resize</p>
    <p class="no-drop">no-drop</p>
    <p class="none">none</p>
    <p class="not-allowed">not-allowed</p>
    <p class="pointer">pointer</p>
    <p class="progress">progress</p>
    <p class="row-resize">row-resize</p>
    <p class="s-resize">s-resize</p>
    <p class="se-resize">se-resize</p>
    <p class="sw-resize">sw-resize</p>
    <p class="text">text</p>
    <p class="url">url</p>
    <p class="w-resize">w-resize</p>
    <p class="wait">wait</p>
    <p class="zoom-in">zoom-in</p>
    <p class="zoom-out">zoom-out</p>
</body>
</html>

이렇게 작성을 했습니다.

제일 마지막에 두 가지, initial과 inherit은 각각 기본값 설정과 부모 값 상속이기 때문에 특별한 것이 아니라서 없애었습니다.

그럼 결과 화면도 같이 봅시다.

화면 속에 글자가 너무 많아서 잘렸습니다.

한 번 직접 예제 코드를 보시고 실행해 보시면 좋을 것 같습니다.

여기까지 css로 마우스 커서를 제어하는 방법에 대하여 알아보았습니다.

다음 포스팅부터는 css가 제공하는 고급 기능들에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css display 속성으로 박스의 유형 제어하기 2 - display : inline 속성으로 인라인 박스 제어하기 (0)	2023.04.03
css display 속성으로 박스의 유형 제어하기1 - display : block 속성으로 블록 박스 제어하기 (0)	2023.04.03
css box-shadow 속성 이용하여 박스에 그림자 넣기 (0)	2023.04.03
css text-shadow 속성 이용하여 텍스트에 그림자 넣기 (0)	2023.04.03
css background 단축 프로퍼티 이용하여 배경 제어하기 (0)	2023.04.02

개발러 L의 뻔fun한 코딩

css cursor 프로퍼티로 마우스 커서 제어하기