path: root/files/ko/web/css/cursor/index.html

---
title: cursor
slug: Web/CSS/cursor
tags:
  - CSS
  - CSS Property
  - Reference
  - Web
translation_of: Web/CSS/cursor
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>cursor</code></strong> 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.</p>

<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<h2 id="구문">구문</h2>

<pre class="brush: css no-line-numbers">/* 키워드 값 */
cursor: pointer;
cursor: auto;

/* URL, 대체용 키워드 */
cursor: url(hand.cur), pointer;

/* URL과 좌표 및 대체 키워드
crsor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* 전역 값 */
cursor: inherit;
cursor: initial;
cursor: unset;
</pre>

<p><code>cursor</code> 속성은 쉼표로 구분한 0개 이상의 <code>{{anch("&lt;url&gt;")}}</code>과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 <code>&lt;url&gt;</code>은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.</p>

<p><code>&lt;url&gt;</code>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 <a href="#&lt;x>&lt;y>">x, y 좌표</a>를 나타냅니다.</p>

<p>아래 예제는 <code>&lt;url&gt;</code> 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 <code>&lt;x&gt;&lt;y&gt;</code> 좌표도 설정했으며 모두 불러올 수 없으면 <code>progress</code> 키워드를 사용합니다.</p>

<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>

<h3 id="값">값</h3>

<dl>
 <dt><a id="&lt;url>" name="&lt;url>"><code id="&lt;url>">&lt;url&gt;</code></a></dt>
 <dd>이미지 파일을 가리키는 <code>url(…)</code>, 또는 쉼표로 구분한 <code>url(…), url(…), …</code> 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. <a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a>를 참고하세요.</dd>
 <dt><a id="&lt;x>&lt;y>" name="&lt;x>&lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code></a> {{experimental_inline}}</dt>
 <dd>xy 좌표. 32 미만의 {{cssxref("&lt;number&gt;")}}여야 합니다.</dd>
 <dt><span id="Keyword values">키워드 값</span></dt>
 <dd>
 <p><em>행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.</em></p>

 <table class="standard-table">
  <thead>
   <tr>
    <th scope="col">카테고리</th>
    <th scope="col">CSS 값</th>
    <th scope="col">예제</th>
    <th scope="col">설명</th>
   </tr>
  </thead>
  <tbody>
   <tr style="cursor: auto;">
    <th rowspan="3" scope="row">일반</th>
    <td><code>auto</code></td>
    <td></td>
    <td>사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 <code>text</code>를 사용합니다.</td>
   </tr>
   <tr style="cursor: default;">
    <td><code>default</code></td>
    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
    <td>플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.</td>
   </tr>
   <tr style="cursor: none;">
    <td><code>none</code></td>
    <td></td>
    <td>커서 없음.</td>
   </tr>
   <tr style="cursor: context-menu;">
    <th rowspan="5" scope="row" style="cursor: auto;">링크와 상태</th>
    <td><code>context-menu</code></td>
    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
    <td>콘텍스트 메뉴 사용 가능.</td>
   </tr>
   <tr style="cursor: help;">
    <td><code>help</code></td>
    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
    <td>도움말 사용 가능.</td>
   </tr>
   <tr style="cursor: pointer;">
    <td><code>pointer</code></td>
    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
    <td>링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.</td>
   </tr>
   <tr style="cursor: progress;">
    <td><code>progress</code></td>
    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
    <td>프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (<code>wait</code>과 반대)</td>
   </tr>
   <tr style="cursor: wait;">
    <td><code>wait</code></td>
    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
    <td>프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (<code>progress</code>와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.</td>
   </tr>
   <tr style="cursor: cell;">
    <th rowspan="4" scope="row" style="cursor: auto;">선택</th>
    <td><code>cell</code></td>
    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
    <td>표의 칸이나 여러 칸을 선택할 수 있음.</td>
   </tr>
   <tr style="cursor: crosshair;">
    <td><code>crosshair</code></td>
    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
    <td>십자 커서. 종종 비트맵 선택에 사용합니다.</td>
   </tr>
   <tr style="cursor: text;">
    <td><code>text</code></td>
    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
    <td>글씨 선택 가능. 보통 I빔 모양입니다.</td>
   </tr>
   <tr style="cursor: vertical-text;">
    <td><code>vertical-text</code></td>
    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
    <td>세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.</td>
   </tr>
   <tr style="cursor: alias;">
    <th rowspan="7" scope="row" style="cursor: auto;">드래그 앤 드롭</th>
    <td><code>alias</code></td>
    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
    <td>별칭이나 바로가기를 만드는 중.</td>
   </tr>
   <tr style="cursor: copy;">
    <td><code>copy</code></td>
    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
    <td>복사하는 중.</td>
   </tr>
   <tr style="cursor: move;">
    <td><code>move</code></td>
    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
    <td>움직이는 중.</td>
   </tr>
   <tr style="cursor: no-drop;">
    <td><code>no-drop</code></td>
    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
    <td>현재 위치에 놓을 수 없음.<br>
     {{bug("275173")}}: Windows와 Mac OS X에서 <code>no-drop</code>은 <code>not-allowed</code>와 같습니다.</td>
   </tr>
   <tr style="cursor: not-allowed;">
    <td><code>not-allowed</code></td>
    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
    <td>요청한 행동을 수행할 수 없음.</td>
   </tr>
   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
    <td><code>grab</code></td>
    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
    <td>잡을 수 있음. (잡아서 이동)</td>
   </tr>
   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
    <td><code>grabbing</code></td>
    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
    <td>잡고 있음. (잡아서 이동)</td>
   </tr>
   <tr style="cursor: all-scroll;">
    <th rowspan="15" scope="row" style="cursor: auto;">크기 조절과 스크롤</th>
    <td><code>all-scroll</code></td>
    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
    <td>모든 방향으로 이동 가능. (패닝)<br>
     {{bug("275174")}}: Windows에서 <code>all-scroll</code>은 <code>move</code>와 같습니다.</td>
   </tr>
   <tr style="cursor: col-resize;">
    <td><code>col-resize</code></td>
    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.</td>
   </tr>
   <tr style="cursor: row-resize;">
    <td><code>row-resize</code></td>
    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
    <td>항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.</td>
   </tr>
   <tr style="cursor: n-resize;">
    <td><code>n-resize</code></td>
    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
    <td rowspan="8" style="cursor: auto;">움직일 수 있는 모서리. 예를 들어, <code>se-resize</code> 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 <code>n-resize</code>와 <code>s-resize</code>는 <code>ns-resize</code>와 같습니다.</td>
   </tr>
   <tr style="cursor: e-resize;">
    <td><code>e-resize</code></td>
    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: s-resize;">
    <td><code>s-resize</code></td>
    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: w-resize;">
    <td><code>w-resize</code></td>
    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ne-resize;">
    <td><code>ne-resize</code></td>
    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nw-resize;">
    <td><code>nw-resize</code></td>
    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: se-resize;">
    <td><code>se-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: sw-resize;">
    <td><code>sw-resize</code></td>
    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: ew-resize;">
    <td><code>ew-resize</code></td>
    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
    <td rowspan="4" style="cursor: auto;">양방향 크기 조절 커서.</td>
   </tr>
   <tr style="cursor: ns-resize;">
    <td><code>ns-resize</code></td>
    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: nesw-resize;">
    <td><code>nesw-resize</code></td>
    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
   </tr>
   <tr style="cursor: nwse-resize;">
    <td><code>nwse-resize</code></td>
    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
   </tr>
   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
    <th rowspan="2" scope="row" style="cursor: auto;">확대와 축소</th>
    <td><code>zoom-in</code></td>
    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
    <td rowspan="2" style="cursor: auto;">
     <p>확대/축소할 수 있음.</p>
    </td>
   </tr>
   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
    <td><code>zoom-out</code></td>
    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

{{csssyntax}}

<h2 id="사용_일람">사용 일람</h2>

<p>비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 {{Glossary("user agent", "사용자 에이전트")}}가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.</p>

<p>{{anch("브라우저 호환성")}} 항목에서 커서 크기 제한을 찾아보세요.</p>

<h2 id="예제">예제</h2>

<pre class="brush:css">.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* URL을 쓸 땐 키워드 값 필수 */
.baz {
  cursor: url("hyper.cur"), auto;
}
</pre>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<div>{{Compat("css.properties.cursor")}}</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a></li>
 <li>{{cssxref("pointer-events")}}</li>
</ul>