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 +++++++++++++++++++++ .../index.html | 70 +++++ 2 files changed, 385 insertions(+) create mode 100644 files/ko/web/css/cursor/index.html create mode 100644 files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html (limited to 'files/ko/web/css/cursor') 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")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..416718c17f --- /dev/null +++ b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,70 @@ +--- +title: cursor 속성값에 URL 사용 +slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.

+ +

문법

+ +

이 속성의 문법은 다음과 같습니다:

+ +
cursor: [<url>,]* keyword;
+
+ +

즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 반드시 CSS규정에 정의된 auto 나 pointer같은 키워드들이 따라와야 합니다.

+ +

예를 들면, 다음과 같은 값이 지정될 수 있습니다:

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+ +

우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, auto가 사용될 것입니다.

+ +

커서 값에 대한 CSS3 syntax 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:

+ +
cursor: url(foo.png) 4 12, auto;
+
+ +

첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.

+ +

제약 사항

+ +

Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.

+ +

Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.

+ +

투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.

+ +

모질라의 윈도우, OS/2 그리고 리눅스(GTK+ 2.4 나 그 이후 버전 사용) 릴리즈에서만 커서로 URL값이 지원됩니다. 다른 플랫폼들에대한 지원은 향후 릴리즈에 추가될 것입니다.(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+ +

다른 브라우저들과의 호환성

+ +

마이크로소프트 인터넷 익스플로러(MSIE)도 cursor속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.

+ +

cursor속성 문법도 또한 제약이 덜한 관계로

+ +
cursor: url(foo.cur);
+
+ +

이나

+ +
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+ +

와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.

+ +

To-do

+ +
+
To-do: document what MSIE does with CSS 3 hotspot locations
+
+ +

Interwiki Language Links

+ +

{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}

-- cgit v1.2.3-54-g00ecf