-```
-
-그 이미지가 HTML페이지와 같은 디렉토리 하의 `images` 라는 하위 디렉토리에 있다면 (이러한 방식은 구글이 {{glossary("SEO")}}/색인을 위해 추천합니다), 이런 식으로 삽입할 수 있습니다:
-
-```html
-
-```
-
-그러나 이건 무의미합니다. DNS 서버로부터 IP 주소를 처음부터 다시 찾아보는 등 브라우저가 더 많은 일을 하게 만들기 때문입니다. 당신은 거의 항상 당신의 HTML과 같은 서버에 이미지를 두게 될 것입니다.
-
-> **경고:** : 대부분의 이미지들은 저작권 적용 대상입니다. 따라서,
->
-> 1. 당신이 그 이미지에 대한 소유권을 갖고 있거나
-> 2. 당신이 그 이미지의 소유자로부터 명확한 서류상의 허가를 받았거나
-> 3. 그 이미지가 실제로 공공재라는 충분한 증거가 있는 경우
->
-> 가 아니면 당신의 웹페이지에 이미지를 **게시하지 마십시오.**
-> 저작권 침해는 불법이며 비윤리적입니다. 또한 당신의 `src` 속성이 링크하도록 허가받지 않은 누군가의 웹사이트에 호스팅 된 이미지를 가리키지 않도록 하십시오. 이러한 행위를 "핫 링킹(hot linking)"이라고 합니다. 누군가의 대역폭을 훔쳐 쓰는 것은 불법입니다. 이것은 당신의 페이지를 느리게 만들고, 그 이미지가 삭제되거나 무언가 부끄러운 걸로 바뀌어도 당신은 그것을 통제할 권한이 없습니다.
-
-위에서 쓴 우리의 코드는 이러한 결과를 보여줄 것입니다:
-
-
-
-> **참고:** {{htmlelement("img")}} 와 {{htmlelement("video")}} 와 같은 element들을 대체 element라고 하기도 합니다. 그 이유는 element의 내용과 크기가 element 그 자체가 아니라, 외부적인 요소(이미지나 비디오)에 의해 결정되기 때문입니다.
-
-> **참고:** 완성된 예제들을 [running on Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html)에서 확인하실 수 있습니다. ([source code](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html) 도 참고하세요.)
-
-### Alternative text
-
-다음으로 살펴볼 속성은 `alt`이다. 이 값은 이미지가 보여지지 않을 경우를 대비해서 이미지를 설명할 수 있는 글을 값으로 가진다. 예를 들어, 위의 코드를 다음과 같이 바꿀 수 있다:
-
-```html
-
-```
-
-평범한 경우에 위와 같은 방법은 디스플레이에 큰 차이를 주지 않는다. 그러나 만약에 이미지가 로딩중이어서 아직 페이지에 안나타나더라도 브라우저는 지정된 크기의 공간을 이미지를 위해 할당해둔다:
-
-
-
-이미지 크기를 지정해두는 것은 좋은 습관이며 이를 통해, 페이지가 더 빠르고 순조롭게 로딩될 수 있다.
-
-그러나 HTML 속성을 통해 이미지의 크기를 조정하는 것은 바람직하지 않다. 이미지 크기를 원본보다 크게 잡으면 원하지 않는 방향으로 나타날 수 있으며 사용자의 필요에 맞지 않는 불필요한 대역폭을 사용할 수도 있다. 또한, [aspect ratio](https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29)를 지키지 않으면 이미지가 왜곡되어 나타날 수도 있다. 이미지 편집기를 통해서 크기를 변경한 후에 웹페이지에 올리는 것이 바람직하다.
-
-> **참고:** 이미지 크기를 변경해야 한다면 [CSS](/ko/docs/Learn/CSS) 를 사용하도록 하자.
-
-### Image titles
-
-As [with links](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E), you can also add `title` attributes to images, to provide further supporting information if needed. In our example, we could do this:
-
-```html
-
-```
-
-This gives us a tooltip, just like link titles:
-
-
-
-Image titles aren't essential to include. It is often better to include such supporting information in the main article text, rather than attached to the image. However, they are useful in some circumstances; for example, in an image gallery when you have no space for captions.
-
-### Active learning: embedding an image
-
-It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL:
-
-```
-https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
-```
-
-Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.
-
-We would also like you to:
-
-- Add some alt text, and check that it works by misspelling the image URL.
-- Set the image's correct `width` and `height` (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.
-- Set a `title` on the image.
-
-If you make a mistake, you can always reset it using the _Reset_ button. If you get really stuck, press the _Show solution_ button to see an answer:
-
-```html hidden
-Live output
- - - -Editable code
-- Press Esc to move focus away from the code area (Tab inserts a tab character). -
- - - - -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var output = document.querySelector(".output"); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function () { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", function () { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -var htmlSolution = - '
';
-var solutionEntry = htmlSolution;
-
-textarea.addEventListener("input", updateCode);
-window.addEventListener("load", updateCode);
-
-// stop tab key tabbing out of textarea and
-// make it write a tab at the caret position instead
-
-textarea.onkeydown = function (e) {
- if (e.keyCode === 9) {
- e.preventDefault();
- insertAtCaret("\t");
- }
-
- if (e.keyCode === 27) {
- textarea.blur();
- }
-};
-
-function insertAtCaret(text) {
- var scrollPos = textarea.scrollTop;
- var caretPos = textarea.selectionStart;
-
- var front = textarea.value.substring(0, caretPos);
- var back = textarea.value.substring(
- textarea.selectionEnd,
- textarea.value.length,
- );
- textarea.value = front + text + back;
- caretPos = caretPos + text.length;
- textarea.selectionStart = caretPos;
- textarea.selectionEnd = caretPos;
- textarea.focus();
- textarea.scrollTop = scrollPos;
-}
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function () {
- // We only want to save the state when the user code is being shown,
- // not the solution, so that solution is not saved over the user code
- if (solution.value === "Show solution") {
- userEntry = textarea.value;
- } else {
- solutionEntry = textarea.value;
- }
-
- updateCode();
-};
-```
-
-{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
-
-## Annotating images with figures and figure captions
-
-Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you doing this:
-
-```html
-
-
-
-
-```
-
-This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?
-
-A better solution, is to use the HTML5 {{htmlelement("figure")}} and {{htmlelement("figcaption")}} elements. These are created for exactly this purpose: to provide a semantic container for figures, and clearly link the figure to the caption. Our above example could be rewritten like this:
-
-```
-
-
- A T-Rex on display in the Manchester University Museum.
-
-
- Live output
- - - -Editable code
-- Press Esc to move focus away from the code area (Tab inserts a tab character). -
- - - - -``` - -```css hidden -html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -} -``` - -```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var output = document.querySelector(".output"); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function () { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = "Show solution"; - updateCode(); -}); - -solution.addEventListener("click", function () { - if (solution.value === "Show solution") { - textarea.value = solutionEntry; - solution.value = "Hide solution"; - } else { - textarea.value = userEntry; - solution.value = "Show solution"; - } - updateCode(); -}); - -var htmlSolution = - '\n