diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:48:24 +0100 |
commit | ee778d6eea54935fd05022e0ba8c49456003381a (patch) | |
tree | 151a4cef804d8823cc8fc753b8edc693b7078241 /files/ko/web/css/css_basic_user_interface | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.gz translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.tar.bz2 translated-content-ee778d6eea54935fd05022e0ba8c49456003381a.zip |
unslug ko: move
Diffstat (limited to 'files/ko/web/css/css_basic_user_interface')
-rw-r--r-- | files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..416718c17f --- /dev/null +++ b/files/ko/web/css/css_basic_user_interface/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 +--- +<p><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)은 URL 값을 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 커서 속성</a>값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.</p> + +<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3> + +<p>이 속성의 문법은 다음과 같습니다:</p> + +<pre class="eval">cursor: [<url>,]* keyword; +</pre> + +<p>즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 <strong>반드시</strong> <a href="ko/CSS">CSS</a>규정에 정의된 <code>auto</code> 나 <code>pointer</code>같은 키워드들이 따라와야 합니다.</p> + +<p>예를 들면, 다음과 같은 값이 지정될 수 있습니다:</p> + +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> + +<p>우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, <code>auto</code>가 사용될 것입니다.</p> + +<p>커서 값에 대한 CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">syntax</a> 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:</p> + +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> + +<p>첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.</p> + +<h3 id=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD" name=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD">제약 사항</h3> + +<p>Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.</p> + +<p>Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.</p> + +<p>투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.</p> + +<p>모질라의 윈도우, 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) }})</p> + +<h3 id=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1" name=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1">다른 브라우저들과의 호환성</h3> + +<p>마이크로소프트 인터넷 익스플로러(MSIE)도 <code>cursor</code>속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.</p> + +<p><code>cursor</code>속성 문법도 또한 제약이 덜한 관계로</p> + +<pre class="eval">cursor: url(foo.cur); +</pre> + +<p>이나</p> + +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> + +<p>와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.</p> + +<h3 id="To-do" name="To-do">To-do</h3> + +<dl> + <dd><em>To-do: document what MSIE does with CSS 3 hotspot locations</em></dd> +</dl> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p>{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}</p> |