From 206f6c2f179408df6ea3cb37007c70c116cb2945 Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Wed, 23 Jun 2021 19:45:07 +0900 Subject: fix: image link (#1280) --- files/ko/web/html/element/img/clock-demo-200px.png | Bin 0 -> 90575 bytes files/ko/web/html/element/img/clock-demo-400px.png | Bin 0 -> 90575 bytes files/ko/web/html/element/img/favicon144.png | Bin 0 -> 3086 bytes files/ko/web/html/element/img/favicon72.png | Bin 0 -> 2061 bytes files/ko/web/html/element/img/index.html | 45 +++++++++++---------- 5 files changed, 23 insertions(+), 22 deletions(-) create mode 100644 files/ko/web/html/element/img/clock-demo-200px.png create mode 100644 files/ko/web/html/element/img/clock-demo-400px.png create mode 100644 files/ko/web/html/element/img/favicon144.png create mode 100644 files/ko/web/html/element/img/favicon72.png (limited to 'files/ko/web/html/element') diff --git a/files/ko/web/html/element/img/clock-demo-200px.png b/files/ko/web/html/element/img/clock-demo-200px.png new file mode 100644 index 0000000000..999ad528fe Binary files /dev/null and b/files/ko/web/html/element/img/clock-demo-200px.png differ diff --git a/files/ko/web/html/element/img/clock-demo-400px.png b/files/ko/web/html/element/img/clock-demo-400px.png new file mode 100644 index 0000000000..999ad528fe Binary files /dev/null and b/files/ko/web/html/element/img/clock-demo-400px.png differ diff --git a/files/ko/web/html/element/img/favicon144.png b/files/ko/web/html/element/img/favicon144.png new file mode 100644 index 0000000000..e30b574b65 Binary files /dev/null and b/files/ko/web/html/element/img/favicon144.png differ diff --git a/files/ko/web/html/element/img/favicon72.png b/files/ko/web/html/element/img/favicon72.png new file mode 100644 index 0000000000..db68260ca1 Binary files /dev/null and b/files/ko/web/html/element/img/favicon72.png differ diff --git a/files/ko/web/html/element/img/index.html b/files/ko/web/html/element/img/index.html index bedbe7b074..da0a17ee8c 100644 --- a/files/ko/web/html/element/img/index.html +++ b/files/ko/web/html/element/img/index.html @@ -10,6 +10,7 @@ tags: - Web - 사진 - 이미지 +browser-compat: html.elements.img translation_of: Web/HTML/Element/img ---
{{HTMLRef}}
@@ -220,52 +221,52 @@ translation_of: Web/HTML/Element/img

이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, {{glossary("SVG")}} 요소는 루트 {{svgelement("svg")}} 요소에 width와 height가 없는 경우 고유 크기를 가지지 않습니다.

-

예제

+

예제

-

보조 텍스트

+

보조 텍스트

페이지에 이미지를 삽입하고, 접근성을 높이기 위해 대체 텍스트를 제공하는 간단한 예제입니다.

-
<img src="https://developer.mozilla.org/static/img/favicon144.png"
-     alt="MDN logo">
+
<img src="favicon144.png"
+     alt="MDN logo">
+
-

{{ EmbedLiveSample('보조_텍스트', '100%', '70') }}

+

{{ EmbedLiveSample('Alternative_text', '100%', '160') }}

-

이미지 링크

+

이 예제는 이전 코드에 더해 이미지를 링크로 바꾸는 법을 보입니다. 단순히 <img> 태그를 {{htmlelement("a")}} 안에 넣기만 하면 됩니다. 다만 고려할 점 하나는, 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것입니다.

<a href="https://developer.mozilla.org">
-  <img src="https://developer.mozilla.org/static/img/favicon144.png"
-       alt="Visit the MDN site">
-</a>
+ <img src="favicon144.png" alt="Visit the MDN site"> + </a> -

{{ EmbedLiveSample('이미지_링크', '100%', '70') }}

+

{{ EmbedLiveSample('Image_link', '100%', '160') }}

-

srcset 특성 사용하기

+

srcset 특성 사용하기

이번 예제에서는 {{htmlattrxref("srcset", "img")}} 특성에 고해상도 버전 로고를 추가했습니다. 그러면 고해상도 장치에서는 일반 src 이미지 대신 고해상도 이미지를 사용합니다. srcset 특성을 지원하는 {{glossary("user agent", "사용자 에이전트")}}는 src 특성을 srcset 1x 로 간주합니다.

-
<img src="https://developer.mozilla.org/static/img/favicon72.png"
+
<img src="favicon72.png"
      alt="MDN logo"
-     srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">

+     srcset="favicon144.png 2x">
-

{{EmbedLiveSample("srcset_특성_사용하기", "100%", "160")}}

+

{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}

-

srcset과 sizes 특성 사용하기

+

srcset과 sizes 특성 사용하기

{{htmlattrxref("srcset", "img")}}를 지원하는 {{glossary("user agent", "사용자 에이전트")}}는, srcset에 w 서술자를 사용한 경우 src 특성을 무시합니다. 다음 코드는 미디어 조건 (max-width: 600px)을 만족할 때 200px 너비의 이미지를 불러오고, 그 외의 경우엔 다른 이미지(400px)를 불러옵니다.

-
<img src="/files/16864/clock-demo-200px.png"
+
<img src="clock-demo-200px.png"
      alt="Clock"
-     srcset="/files/16864/clock-demo-200px.png 200w,
-             /files/16797/clock-demo-400px.png 400w"
-     sizes="(max-width: 600px) 200px, 50vw">

+     srcset="clock-demo-200px.png 200w,
+             clock-demo-400px.png 400w"
+     sizes="(min-width: 600px) 200px, 50vw">
-

{{EmbedLiveSample("srcset과_sizes_특성_사용하기", "100%", 350)}}

+

{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}

-
-

직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 별도 페이지를 방문하세요.

+
+

직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 {{LiveSampleLink('Using_the_srcset_and_sizes_attributes', '별도 페이지')}}를 방문하세요.

보안 및 개인정보 고려사항

-- cgit v1.2.3-54-g00ecf