CSS에서 커서를 손 포인터로 변경

사용자가 활성화할 수 있는 요소에 cursor: pointer;를 지정하면 마우스를 올렸을 때 익숙한 손 모양 커서가 표시됩니다. 링크에는 보통 이 커서가 이미 적용되어 있으며, 버튼이나 사용자 지정 대화형 컨트롤에도 같은 규칙을 사용할 수 있습니다. 장식용 요소를 클릭할 수 있는 것처럼 보이게 하지 말고, 동작을 알리는 보조 신호로 사용하세요.

CSS cursor 속성을 pointer로 설정하기

링크, 버튼 또는 다른 대화형 요소를 선택하는 규칙에 선언을 추가하세요. 다음 JavaScript 예제는 버튼에 적용할 CSS 규칙을 출력하며, 이 규칙을 스타일시트에 복사할 수 있습니다. 출력 블록에는 CSS 규칙 텍스트가 표시됩니다.

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

전체 페이지 예제에서는 링크와 버튼에 규칙을 적용한 모습도 확인할 수 있습니다. 이 예제의 링크, 버튼, 섹션에 표시되는 텍스트는 영어로 유지됩니다. 선택자는 자신의 마크업에 맞게 조정하세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

pointer는 손 모양 커서를 나타내는 CSS 키워드입니다. 유효한 href가 있는 링크에는 보통 기본적으로 이 커서가 표시되므로 일반적인 링크에는 규칙을 따로 지정하지 않아도 되는 경우가 많습니다. 버튼도 대화형 컨트롤이며, 이 규칙을 적용하면 링크와 일관된 신호를 줄 수 있습니다. 사용자 지정 요소가 클릭에 반응한다면 적절한 의미 구조와 키보드 동작도 함께 제공하세요. 커서만으로 요소에 접근성이 생기거나 대화형 요소가 되는 것은 아닙니다.

동작을 수행하는 컨트롤만 대상으로 삼는 선택자를 사용하세요. 예를 들어 사이트 전체에 적용되는 button 규칙은 기본 버튼을 모두 대상으로 하고, .open-panel 같은 클래스는 특정 사용자 지정 컨트롤을 대상으로 할 수 있습니다. 모든 요소나 컨트롤처럼 보이는 텍스트에 pointer를 지정하지 마세요. 이 시각적 신호는 요소를 활성화할 수 있다는 기대를 줍니다. 실제 동작은 링크나 버튼으로 제공하고, 커서 스타일은 보조 신호로 사용하세요. 다른 CSS 규칙이 이 선언을 덮어쓴다면 스타일시트에서 일치하는 선택자와 캐스케이드를 확인하세요.

대체값을 지정해 사용자 지정 커서 이미지 사용하기

브라우저의 기본 손 모양 대신 이미지를 사용하려면 cursor 값에 url()을 지정하고 뒤에 대체 키워드를 추가하세요. 예를 들어 cursor: url("/images/hand-cursor.png"), pointer;는 브라우저가 /images/hand-cursor.png를 사용하고, 이미지를 불러오거나 사용할 수 없으면 pointer로 대체하도록 합니다. 사이트에서 이미지를 해당 경로에 두거나 URL을 실제 이미지 위치에 맞게 바꾸세요. 외부 스타일시트의 상대 URL은 해당 스타일시트를 기준으로 해석되고, 인라인 CSS의 URL은 문서의 기준 URL을 기준으로 해석되므로, 경로가 없거나 잘못되면 사용자 지정 이미지가 표시되지 않지만, 대체값으로 기본 손 모양 커서를 사용할 수 있습니다. 요소에 브라우저의 일반 커서를 사용하려면 대체값으로 auto를 지정할 수도 있습니다. 이미지를 사용할 수 없는 경우에도 사용자에게 명확한 커서가 표시되도록 선언에 대체값을 포함하세요.