From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/cursor/index.html | 315 +++++++++++++++++++++++++++++++++++++ 1 file changed, 315 insertions(+) create mode 100644 files/ko/web/css/cursor/index.html (limited to 'files/ko/web/css/cursor/index.html') diff --git a/files/ko/web/css/cursor/index.html b/files/ko/web/css/cursor/index.html new file mode 100644 index 0000000000..113920f9ee --- /dev/null +++ b/files/ko/web/css/cursor/index.html @@ -0,0 +1,315 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Reference + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+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;
+
+ +

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

+ +

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

+ +

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

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

값

+ +
+
<url>
+
이미지 파일을 가리키는 url(…), 또는 쉼표로 구분한 url(…), url(…), … 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. cursor 속성값으로 URL 사용하기를 참고하세요.
+
<x> <y> {{experimental_inline}}
+
xy 좌표. 32 미만의 {{cssxref("<number>")}}여야 합니다.
+
키워드 값
+
+

행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
카테고리CSS 값예제설명
일반auto사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다.
defaultdefault.gif플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.
none커서 없음.
링크와 상태context-menucontext-menu.png콘텍스트 메뉴 사용 가능.
helphelp.gif도움말 사용 가능.
pointerpointer.gif링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.
progressprogress.gif프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대)
waitwait.gif프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.
선택cellcell.gif표의 칸이나 여러 칸을 선택할 수 있음.
crosshaircrosshair.gif십자 커서. 종종 비트맵 선택에 사용합니다.
texttext.gif글씨 선택 가능. 보통 I빔 모양입니다.
vertical-textvertical-text.gif세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.
드래그 앤 드롭aliasalias.gif별칭이나 바로가기를 만드는 중.
copycopy.gif복사하는 중.
movemove.gif움직이는 중.
no-dropno-drop.gif현재 위치에 놓을 수 없음.
+ {{bug("275173")}}: Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다.
not-allowednot-allowed.gif요청한 행동을 수행할 수 없음.
grabgrab.gif잡을 수 있음. (잡아서 이동)
grabbinggrabbing.gif잡고 있음. (잡아서 이동)
크기 조절과 스크롤all-scrollall-scroll.gif모든 방향으로 이동 가능. (패닝)
+ {{bug("275174")}}: Windows에서 all-scroll은 move와 같습니다.
col-resizecol-resize.gif항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.
row-resizerow-resize.gif항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.
n-resizeExample of a resize towards the top cursor움직일 수 있는 모서리. 예를 들어, se-resize 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 n-resize와 s-resize는 ns-resize와 같습니다.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gif양방향 크기 조절 커서.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
확대와 축소zoom-inzoom-in.gif +

확대/축소할 수 있음.

+
zoom-outzoom-out.gif
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

사용 일람

+ +

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

+ +

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

+ +

예제

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL을 쓸 땐 키워드 값 필수 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Addition of several keywords and the positioning syntax for url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +
{{Compat("css.properties.cursor")}}
+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf