CSS cursor 속성 – 마우스 커서의 종류와 커스텀 커서 지정

`cursor` 속성 사용법

cursor 속성은
마우스 포인터가 요소 위에 있을 때 표시될 커서 모양을 지정합니다.

이 속성으로 사용할 수 있는 CSS 표준 커서의 종류와 커서 모양을 지정하는 방법, 이미지로 커스텀 커서를 지정하는 방법, 그리고 그 과정에서 주의할 점에 대해 알아보겠습니다.

예제

CSS 표준 커서의 종류

다음의 예제는 명세서에 있는 CSS 표준 커서의 종류를 실제로 적용한 것입니다.
'실제 적용된 모습'에서 단어 위에 직접 마우스 커서를 올려 놓으면 적용되는 모습을 확인할 수 있습니다.

HTML

<style>
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    li {
        width: 200px;
        padding: 0.5em 0.7em;
        border: 1px solid;
        border-radius: 5px;
        margin-bottom: 0.7em;
        transition: all 0.2s;
    }
    li:hover {
        color: red;
        box-shadow: 0 1px 1px red;
    }
</style>
<h3>CSS 표준 커서의 종류</h3>
<p>마우스 커서를 바꾸려면 단어 위에 마우스를 올려 놓으세요.</p>
<ul>
    <li style="cursor: auto;">auto</li>
    <li style="cursor: default;">default</li>
    <li style="cursor: none;">none</li>
    <li style="cursor: context-menu;">context-menu</li>
    <li style="cursor: help;">help</li>
    <li style="cursor: pointer;">pointer</li>
    <li style="cursor: progress;">progress</li>
    <li style="cursor: wait;">wait</li>
    <li style="cursor: cell;">cell</li>
    <li style="cursor: crosshair;">crosshair</li>
    <li style="cursor: text;">text</li>
    <li style="cursor: url(heart.png),auto;">url: 이미지 커스텀 커서</li>
    <li style="cursor: vertical-text;">vertical-text</li>
    <li style="cursor: alias;">alias</li>
    <li style="cursor: copy;">copy</li>
    <li style="cursor: move;">move</li>
    <li style="cursor: no-drop;">no-drop</li>
    <li style="cursor: not-allowed;">not-allowed</li>
    <li style="cursor: grab;">grab</li>
    <li style="cursor: grabbing;">grabbing</li>
    <li style="cursor: e-resize;">e-resize</li>
    <li style="cursor: n-resize;">n-resize</li>
    <li style="cursor: ne-resize;">ne-resize</li>
    <li style="cursor: nw-resize;">nw-resize</li>
    <li style="cursor: s-resize;">s-resize</li>
    <li style="cursor: se-resize;">se-resize</li>
    <li style="cursor: sw-resize;">sw-resize</li>
    <li style="cursor: w-resize;">w-resize</li>
    <li style="cursor: ew-resize;">ew-resize</li>
    <li style="cursor: ns-resize;">ns-resize</li>
    <li style="cursor: nesw-resize;">nesw-resize</li>
    <li style="cursor: nwse-resize;">nwse-resize</li>
    <li style="cursor: col-resize;">col-resize</li>
    <li style="cursor: row-resize;">row-resize</li>
    <li style="cursor: all-scroll;">all-scroll</li>
    <li style="cursor: zoom-in;">zoom-in</li>
    <li style="cursor: zoom-out;">zoom-out</li>
</ul>

CSS cursor 속성은 브라우저와 운영체제(OS)에 따라 약간씩 다르게 표시될 수 있습니다.

커서 모양을 지정하는 방법

cursor 속성으로 커서 모양을 지정하는 방법에 대해 알아보겠습니다.

형식 구문

CSS

/* 키워드 종류로
   지정하는 형식 구문 */
selector {
    cursor: 키워드 값 
}

/* 이미지로
   커스텀 커서를 지정하는 형식 구문 */
selector {
    cursor: <url>, 대체용 키워드 값
}

/* 이미지와 좌상단 모서리를 기준 좌표로 위치하는
   커스텀 커서를 지정하는 형식 구문 */
selector {
    cursor: <url> 좌표 <x> <y>, 대체용 키워드 값
}

구문

CSS

/* 키워드 값 */
cursor: auto;
cursor: pointer;
/* ... */
cursor: zoom-out;

/* <url>,
   대체용 키워드(이미지 로드를 실패했을 때 사용할 키워드 값) */
cursor: url(hand.png), grab;
cursor: url(heart.png), auto;

/* <url>
   좌상단 모서리를 기준 좌표(<x> <y>, 32 미만의 정수 또는 실수),
   대체용 키워드(이미지 로드를 실패했을 때 사용할 키워드 값) */
cursor: url(hand.png) 4 12, grab;
cursor: url(heart.png) 2 2, auto;

/* 전역 값 */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

형식 정의

cursor 속성의 형식 정의
초깃값	`auto`
적용 요소	모든 요소
상속	예
애니메이션	아니오

값

cursor 속성의 값은 CSS 표준 커서의 종류를 키워드의 값으로 지정할 때의 값과 이미지로 커스텀 커서를 지정할 때의 값이 있습니다.

키워드 종류로 지정할 때

cursor 속성의 키워드 값
키워드 값	예제(마우스 커서를 올리면 실제 구현된 모습을 볼 수 있습니다.)	설명
`auto`	마우스 커서를 올려 보세요!	초깃값. 브라우저는 현재 컨텍스트에 따라 표시할 커서를 결정합니다. 구체적으로 `auto`는 선택 가능한 텍스트나 편집 가능한 요소 위의 `text`로 동작하고, 그렇지 않으면 `default`로 동작합니다.
`default`	마우스 커서를 올려 보세요!	기본 포인터(보통 화살표 모양)입니다.
`none`	마우스 커서를 올려 보세요!	커서가 없습니다.
`context-menu`	마우스 커서를 올려 보세요!	상황에 맞는 콘텍스트 메뉴를 사용할 수 있습니다. 이 값을 지원하지 않는 브라우저나 운영체제(OS)에서는 `default`를 대체해서 표현하는 경우도 있습니다.
`help`	마우스 커서를 올려 보세요!	종종 물음표나 풍선으로 표시됩니다.
`pointer`	마우스 커서를 올려 보세요!	종종 검지손가락을 뻗은 손의 뒷면으로 표시됩니다.
`progress`	마우스 커서를 올려 보세요!	종종 회전하는 해변 공이나 시계 또는 모래시계 또는 로딩이 있는 화살표 등 작업이 진행 중임을 나타내는 커서로 표시됩니다. 프로그램이 일부 처리를 수행 중이지만, 사용자가 여전히 프로그램과 상호 작용할 수 있다는 점에서 `wait`와는 다릅니다.
`wait`	마우스 커서를 올려 보세요!	종종 회전하는 해변 공이나 시계 또는 로딩 등 대기 상태를 나타내는 커서로 표시됩니다. 사용자가 프로그램과 상호 작용할 수 없다는 점에서 `progress`와는 다릅니다.
`cell`	마우스 커서를 올려 보세요!	셀 또는 셀 집합을 선택할 수 있음을 나타냅니다. 종종 가운데에 점이 있는 두꺼운 더하기 기호로 표시됩니다.
`crosshair`	마우스 커서를 올려 보세요!	간단한 `+` 기호와 비슷한 가는 십자가 모양으로 표시합니다. 종종 2차원 비트맵 선택 모드를 나타내는 데 사용됩니다.
`text`	마우스 커서를 올려 보세요!	종종 `I`-빔 모양으로 표시됩니다. 주로 가로쓰기 텍스트를 선택할 때 사용합니다.
`vertical-text`	마우스 커서를 올려 보세요!	종종 누운 `I`-빔 모양(`I`)으로 표시됩니다. 주로 세로쓰기 텍스트를 선택할 때 사용합니다.
`alias`	마우스 커서를 올려 보세요!	무언가의 별칭/바로가기를 생성해야 함을 나타냅니다. 종종 옆에 작은 곡선 화살표가 있는 화살표로 표시됩니다.
`copy`	마우스 커서를 올려 보세요!	복사할 내용을 나타냅니다. 종종 작은 더하기 기호가 옆에 있는 화살표로 표시됩니다.
`move`	마우스 커서를 올려 보세요!	무엇인가를 옮겨야 함을 나타냅니다. 보통 네 방향 화살표로 표시됩니다.
`no-drop`	마우스 커서를 올려 보세요!	드래그한 항목을 현재 커서 위치에 놓을 수 없음을 나타냅니다. 종종 선이 그어진 작은 원이 있는 손이나 포인터로 표시됩니다. `not-allowed`와 같은 모양으로 표시되는 경우가 많습니다.
`not-allowed`	마우스 커서를 올려 보세요!	동작이 허용되지 않음을 나타냅니다. 종종 선이 그어진 원으로 표시됩니다.
`grab`	마우스 커서를 올려 보세요!	무언가를 잡을 수 있음을 나타냅니다(끌어서 옮길 수 있음). 종종 펼쳐진 손의 뒷면으로 표시됩니다.
`grabbing`	마우스 커서를 올려 보세요!	무언가를 잡고 있다는 것을 나타냅니다(이동하기 위해 끌려감). 종종 손가락이 닫혀 보이지 않는 손의 뒷면으로 표시됩니다.
`e-resize`	마우스 커서를 올려 보세요!	모서리가 오른쪽(동쪽, east)으로 이동함을 표시합니다.
`n-resize`	마우스 커서를 올려 보세요!	모서리가 위로(북쪽, north)으로 이동함을 표시합니다.
`ne-resize`	마우스 커서를 올려 보세요!	모서리가 위 오른쪽(북쪽/동쪽, north/east)으로 이동함을 표시합니다.
`nw-resize`	마우스 커서를 올려 보세요!	모서리가 위 왼쪽(북쪽/서쪽, north/west)으로 이동함을 표시합니다.
`s-resize`	마우스 커서를 올려 보세요!	모서리가 아래(남쪽, south)으로 이동함을 표시합니다.
`se-resize`	마우스 커서를 올려 보세요!	모서리가 아래와 오른쪽(남쪽/동쪽, south/east)으로 이동함을 표시합니다.
`sw-resize`	마우스 커서를 올려 보세요!	모서리가 아래와 왼쪽(남쪽/서쪽, south/west)으로 이동함을 표시합니다.
`w-resize`	마우스 커서를 올려 보세요!	모서리가 왼쪽(서쪽, west)으로 이동함을 표시합니다.
`ew-resize`	마우스 커서를 올려 보세요!	모서리가 왼쪽과 오른쪽 양방향(서쪽/동쪽, east/west)으로 이동함을 표시합니다.
`ns-resize`	마우스 커서를 올려 보세요!	모서리가 위와 아래 양방향(북쪽/남쪽, north/south)으로 이동함을 표시합니다.
`nesw-resize`	마우스 커서를 올려 보세요!	모서리가 위 오른쪽(북쪽/동쪽, north/east)과 아래와 왼쪽(남쪽/서쪽, south/west) 양방향으로 이동함을 표시합니다.
`nwse-resize`	마우스 커서를 올려 보세요!	모서리가 위 왼쪽(북쪽/서쪽, north/west)과 아래와 오른쪽(남쪽/동쪽, south/east) 양방향으로 이동함을 표시합니다.
`col-resize`	마우스 커서를 올려 보세요!	항목/열은 수평으로 크기를 조정할 수 있음을 나타냅니다. 종종 좌우를 가리키는 대칭의 화살표를 표시하며, 수직 막대기로 구분됩니다.
`row-resize`	마우스 커서를 올려 보세요!	항목/행은 수직으로 크기를 조정할 수 있음을 나타냅니다. 종종 위아래를 가리키는 대칭의 화살표를 표시하며, 수평 막대기로 구분됩니다.
`all-scroll`	마우스 커서를 올려 보세요!	어떤 것이 어떤 방향(panned, 패닝)으로든 스크롤될 수 있음을 나타냅니다. 종종 가운데에 점이 있는 위, 아래, 왼쪽, 오른쪽을 가리키는 화살표로 표시됩니다.
`zoom-in`	마우스 커서를 올려 보세요!	무언가를 확대할 수 있음을 나타냅니다. 종종 확대를 나타내는 유리 중앙에 `+`가 있는 돋보기 모양으로 표현됩니다.
`zoom-out`	마우스 커서를 올려 보세요!	무언가를 축소할 수 있음을 나타냅니다. 종종 축소를 나타내는 유리 중앙에 `-`가 있는 돋보기 모양으로 표현됩니다.

이미지로 커스텀 커서를 지정할 때

CSS

/* <url>,
   대체용 키워드(이미지 로드를 실패했을 때 사용할 키워드 값) */
cursor: url(hand.png), grab;
cursor: url(heart.png), auto;

/* <url>
   좌상단 모서리를 기준 좌표(<x> <y>, 32 미만의 정수 또는 실수),
   대체용 키워드(이미지 로드를 실패했을 때 사용할 키워드 값) */
cursor: url(hand.png) 4 12, grab;
cursor: url(heart.png) 2 2, auto;

/* URL 및 대체 URL(일부는 좌표 포함), 대체용 키워드 포함 */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

cursor 속성: 이미지로 커스텀 커서를 지정할 때의 값
`<url>`	이미지 파일을 가리키는 `url(...)` 또는 또는 쉼표로 구분된 목록 `url(...)`, `url(...)`, …, 일부 커서 이미지 유형이 지원되지 않는 경우, 두 개 이상의 `url(...)`을 대체 수단으로 제공할 수 있습니다. URL이 아닌 대체 수단(키워드 값 중 하나 이상)은 대체 수단 목록의 끝에 있어야 합니다.
`<x>`, `<y>`	옵션. 좌상단 모서리 위치 기준 좌표입니다. 숫자는 픽셀 단위입니다. 이미지의 왼쪽 위 모서리를 기준으로 하며, "`<x>` `<y>`"에 해당하고 커서 이미지의 경계 내에 고정됩니다. 이러한 값을 지정하지 않으면 파일 자체에서 읽을 수 있으며, 그렇지 않으면 이미지의 왼쪽 위 모서리로 기본 설정됩니다.
`키워드 값`	필수 값. 이미지 로드를 실패했을 때 사용할 '키워드 종류로 지정할 때'의 키워드 값입니다. 이미지를 사용할 경우 목록의 맨 뒤에 붙여야 합니다.

사용상의 주의할 점

cursor 속성을 사용할 때에는 두 가지 사항을 반드시 고려해야 합니다.

`pointer-events: none`이 지정되어 있을 경우 작동 안 됨

pointer-events 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다.

해당 요소에 pointer-events: none이 지정되어 있을 경우 해당 요소는 포인터 이벤트의 대상이 되지 않습니다. cursor 속성을 지정한다고 하더라도 cursor 속성은 작동하지 않습니다.

즉, 마우스 커서는 해당 요소가 무시되고, 시각적 레이어에서 더 아래에 있는 요소의 cursor 속성에 의해 커서 모양이 결정됩니다.

"아래에 위치한 요소"는 DOM 구조 상의 부모 요소가 아니라, 시각적 레이어에서 해당 요소 아래에 겹쳐진 요소를 의미합니다.

다음의 예시 상황으로 살펴보겠습니다.

HTML

<div class="parent" style="cursor: not-allowed;">
  <div class="child" style="pointer-events: none; cursor: pointer;">
    클릭할 수 없는 영역
  </div>
</div>

child 요소: pointer-events: none이 적용되어 있어, 이 요소 위에 마우스를 올려도 커서 모양이 pointer로 바뀌지 않습니다. 이 요소는 마우스 이벤트를 받지 않기 때문에, 그 위에 커서를 올려도 반응하지 않습니다.
parent 요소: child 요소의 시각적 레이어 기준으로 아래에 있는 parent 요소가 마우스 이벤트를 대신 받게 되고, parent 요소의 cursor: not-allowed가 적용되어, not-allowed 커서 모양이 나타납니다.

커스텀 커서에 사용되는 이미지 제한

커스텀 커서에 사용되는 이미지는 그 크기와 파일 형식에서 제한이 있습니다.

이미지 크기 제한

명세서에서는 커스텀 커서에 사용되는 이미지의 크기에 대해 대한 제한이 언급되어 있지 않습니다. 하지만, 대부분의 브라우저에서는 브라우저마다 이미지의 크기를 제한하고 있습니다.

MDN - cursor#Icon size limits에서는 커서 이미지 크기를 32x32픽셀로 제한하는 것이 좋다고 언급하고 있습니다. 브라우저가 지원하는 최대 크기보다 큰 이미지를 사용하여 커서를 변경하면 일반적으로 무시됩니다.

커서 이미지 크기를 32x32픽셀로 제한합니다.

이미지 파일 형식의 제한

명세서에서는 커스텀 커서에 사용되는 이미지 파일의 형식은 제한적이며 다음의 파일 형식을 지원해야 한다고 명시하고 있습니다.

PNG 파일(필수 지원)
SVG v1.1(보안 정적 모드에서 자연 크기를 포함하는 SVG 파일, 필수 지원)
.cur 파일 형식(데스크탑 브라우저에서 널리 지원)
기타 비애니메이션 이미지 파일 형식 (브라우저가 다른 속성에서 지원하는 비애니메이션 이미지 형식)

하지만 각 브라우저별로 지원하는 형식이 다를 수 있습니다. caniuse.com에서 더 자세한 정보를 확인해 보세요.

브라우저 호환성

cursor 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`cursor`	1	12	1	1.2

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

cursor 속성의 명세서 사양
명세서 사양
`Property`	CSS Basic User Interface Module Level 4 #cursor

참고문헌

MDN - cursor

cursor 속성 사용법

예제

CSS 표준 커서의 종류

CSS 표준 커서의 종류

커서 모양을 지정하는 방법

형식 구문

구문

형식 정의

값

키워드 종류로 지정할 때

이미지로 커스텀 커서를 지정할 때

사용상의 주의할 점

pointer-events: none이 지정되어 있을 경우 작동 안 됨

커스텀 커서에 사용되는 이미지 제한

이미지 크기 제한

이미지 파일 형식의 제한

브라우저 호환성

명세서

참고문헌

같이 보기

`cursor` 속성 사용법

`pointer-events: none`이 지정되어 있을 경우 작동 안 됨