diff options
Diffstat (limited to 'files/ko/learn/html/multimedia_and_embedding')
4 files changed, 1161 insertions, 0 deletions
diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html new file mode 100644 index 0000000000..d6930ac381 --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html @@ -0,0 +1,327 @@ +--- +title: 비디오 그리고 오디오 컨텐츠 +slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 <span class="seoSummary">{{htmlelement("video")}}</span>와 <span class="seoSummary">{{htmlelement("audio")}}</span> 요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">사전 지식:</th> + <td>기본 컴퓨터 사용능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, HTML 기본 원리(<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작에서 다룬 내용</a>) 및 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML의 이미지</a></td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.</td> + </tr> + </tbody> +</table> + +<h2 id="웹_상에서_비디오_그리고_오디오">웹 상에서 비디오 그리고 오디오</h2> + +<p>Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (and later, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.</p> + +<p>A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.</p> + +<p>We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files and example code</a> for your own experimentation, in case you are unable to get hold of your own.</p> + +<div class="note"> +<p><strong>Note</strong>: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like <a href="https://www.youtube.com/">YouTube</a>, <a href="https://www.dailymotion.com">Dailymotion</a>, and <a href="https://vimeo.com/">Vimeo</a>, and online audio providers like <a href="https://soundcloud.com/">Soundcloud</a>. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.</p> +</div> + +<h3 id="The_<video>_element">The <video> element</h3> + +<p>The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:</p> + +<pre class="brush: html notranslate"><video src="rabbit320.webm" controls> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> +</video></pre> + +<p>The features of note are:</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>In the same way as for the {{htmlelement("img")}} element, the <code>src</code> (source) attribute contains a path to the video you want to embed. It works in exactly the same way.</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>Users must be able to control video and audio playback (it's especially critical for people who have <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsy</a>.) You must either use the <code>controls</code> attribute to include the browser's own control interface, or build your interface using the appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.</dd> + <dt>The paragraph inside the <code><video></code> tags</dt> + <dd>This is called <strong>fallback content</strong> — this will be displayed if the browser accessing the page doesn't support the <code><video></code> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.</dd> +</dl> + +<p>The embedded video will look something like this:</p> + +<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p>You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example live</a> here (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p> + +<h3 id="Using_multiple_source_formats_to_improve_compatibility">Using multiple source formats to improve compatibility</h3> + +<p>There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.</p> + +<h4 id="Contents_of_a_media_file">Contents of a media file</h4> + +<p>First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called <strong><a href="/en-US/docs/Web/Media/Formats/Containers">container formats</a></strong>. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.</p> + +<p>A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.</p> + +<p><a href="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg"><img alt="Diagram conceptualizing the contents of a media file at the track level." src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg" style="height: 472px; width: 640px;"></a></p> + +<p>The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codec</a>, while video tracks are encoded using (as you probably have guessed) <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a video codec</a>. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).</p> + +<p>For example:</p> + +<ul> + <li>A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers, though older versions may not work.</li> + <li>An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.</li> + <li>The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.</li> +</ul> + +<p>There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.</p> + +<p>Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.</p> + +<p>An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.</p> + +<h4 id="Media_file_support_in_browsers">Media file support in browsers</h4> + +<div class="callout-box"> +<p>Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.</p> + +<p>Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.</p> +</div> + +<p>The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of <strong>{{Glossary("Codec","codecs")}}</strong>, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.</p> + +<p>Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.</p> + +<p>Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.</p> + +<p>One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers <em>may</em> be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.</p> + +<p>So how do we do this? Take a look at the following <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p> + +<pre class="brush: html notranslate"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>Here we've taken the <code>src</code> attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.</p> + +<p>Each <code><source></code> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The <code>type</code> attribute contains the {{glossary("MIME type")}} of the file specified by the <code><source></code>, and browsers can use the <code>type</code> to immediately skip videos they don't understand. If<code>type</code> isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.</p> + +<p>Refer to our <a href="/en-US/docs/Web/Media/Formats">guide to media types and formats</a> for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.</p> + +<h3 id="Other_<video>_features">Other <video> features</h3> + +<p>There are a number of other features you can include when displaying an HTML video. Take a look at our next example:</p> + +<pre class="brush: html notranslate"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video> +</pre> + +<p>The resulting UI looks something like this:</p> + +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/16949/poster_screenshot_updated.png" style="border-style: solid; border-width: 1px; display: block; height: 470px; margin: 0px auto; width: 413px;"></p> + +<p>The new features are:</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt> + <dd>You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the <strong>aspect ratio</strong>. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>Causes the media to play with the sound turned off by default.</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>Used for buffering large files; it can take one of three values:</p> + + <ul> + <li><code>"none"</code> does not buffer the file</li> + <li><code>"auto"</code> buffers the media file</li> + <li><code>"metadata"</code> buffers only the metadata for the file</li> + </ul> + </dd> +</dl> + +<p>You can find the above example available to <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.) Note that we haven't included the <code>autoplay</code> attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!</p> + +<h3 id="The_<audio>_element">The <audio> element</h3> + +<p>The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:</p> + +<pre class="brush: html notranslate"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio></pre> + +<p>This produces something like the following in a browser:</p> + +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>Note</strong>: You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">run the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p> +</div> + +<p>This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:</p> + +<ul> + <li>The {{htmlelement("audio")}} element doesn't support the <code>width</code>/<code>height</code> attributes — again, there is no visual component, so there is nothing to assign a width or height to.</li> + <li>It also doesn't support the <code>poster</code> attribute — again, no visual component.</li> +</ul> + +<p>Other than this, <code><audio></code> supports all the same features as <code><video></code> — review the above sections for more information about them.</p> + +<h3 id="Restarting_media_playback">Restarting media playback</h3> + +<p>At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:</p> + +<pre class="brush: js notranslate">const mediaElem = document.getElementById("my-media-element"); +mediaElem.load();</pre> + +<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3> + +<p>You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:</p> + +<pre class="brush: js notranslate">const mediaElem = document.querySelector("video"); +mediaElem.audioTracks.onaddtrack = function(event) { + audioTrackAdded(event.track); +} +</pre> + +<p>You'll find more information about this in our {{domxref("TrackEvent")}} documentation.</p> + +<h2 id="Displaying_video_text_tracks">Displaying video text tracks</h2> + +<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p> + +<ul> + <li>Many people have auditory impairments (such as being hard of hearing or deaf) so can't hear the audio clearly if at all.</li> + <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown).</li> + <li>Similarly, in environments where having the audio playing would be a distraction or disruption (such as in a library or when a partner is trying to sleep), having captions can be very useful.</li> + <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li> +</ul> + +<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> file format and the {{htmlelement("track")}} element.</p> + +<div class="note"> +<p><strong>Note</strong>: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."</p> +</div> + +<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and there are several kinds of cues which are used for different purposes. The most common cues are:</p> + +<dl> + <dt>subtitles</dt> + <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd> + <dt>captions</dt> + <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd> + <dt>timed descriptions</dt> + <dd>Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.</dd> +</dl> + +<p>A typical WebVTT file will look something like this:</p> + +<pre class="eval line-numbers language-html notranslate"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</code> +</pre> + +<p>To get this displayed along with the HTML media playback, you need to:</p> + +<ol> + <li>Save it as a <code>.vtt</code> file in a sensible place.</li> + <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code><track></code> should be placed within <code><audio></code> or <code><video></code>, but after all <code><source></code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li> +</ol> + +<p>Here's an example:</p> + +<pre class="brush: html notranslate"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>This will result in a video that has subtitles displayed, kind of like this:</p> + +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.</p> + +<div class="note"> +<p><strong>Note</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p> +</div> + +<h3 id="Active_learning_Embedding_your_own_audio_and_video">Active learning: Embedding your own audio and video</h3> + +<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p> + +<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p> + +<p>We would like you to:</p> + +<ol> + <li>Save your audio and video files in a new directory on your computer.</li> + <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li> + <li>Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.</li> + <li>Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.</li> + <li>Give the <code><video></code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li> +</ol> + +<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">next article</a>, so you may want to read that before attempting it.</p> + +<h2 id="Summary">Summary</h2> + +<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML media elements: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, and {{htmlelement("track")}}</li> + <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li> + <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> + <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..c0ebcc07e9 --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,496 @@ +--- +title: HTML의 이미지 +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">초창기의 웹에는 텍스트만 있었고 조금 지루했습니다. 다행히도 웹 페이지 안에 이미지 (및 보다 흥미로운 유형의 컨텐츠)를 삽입하는 기능이 추가되기까지는 오래 걸리지 않았습니다. 시작해볼 수 있는 다른 유형의 멀티미디어가 있지만 단순한 이미지를 웹 페이지에 삽입하는 데 사용되는 {{htmlelement ( "img")}} 요소로 쉽게 시작해 보겠습니다. 이 글에서는 기초내용 부터 심층적으로 사용하는 방법, {{htmlelement("figure")}}를 사용하여 캡션을 주석으로 추가하는 방법, {{htmlelement("CSS")}}배경 이미지와 관련된 사용 방법을 자세히 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선행사항:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일작업</a>에 대한 기본 지식, HTML 기초 지식 익숙 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a>에서 설명)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>간단한 이미지를 HTML에 삽입하고, 캡션을 사용하여 주석을 추가하는 방법과 HTML 이미지가 CSS 배경 이미지와 관련되는 방법을 배우십시오.</td> + </tr> + </tbody> +</table> + +<h2 id="웹페이지에_어떻게_이미지를_넣을까"><strong>웹페이지에 어떻게 이미지를 넣을까?</strong></h2> + +<p>이미지를 웹사이트에 넣기위해서 {{htmlelement("img")}} 요소를 사용합니다. 이것은 텍스트 내용이나 클로징 태그를 갖지 않는 {{glossary("비어있는 요소 (empty element)")}}이며, 적어도 <code>src</code>(풀네임인 source라고 불리곤 합니다)라는 속성 하나는 사용되어야합니다. <code>src</code> 속성은 당신이 페이지에 삽입하고자 하는 이미지를 가리키는 경로를 포함합니다. 그 경로는 {{htmlelement("a")}} 요소의 <code>href</code> 속성 값처럼 상대경로여도, 절대경로여도 됩니다.</p> + +<div class="note"> +<p><strong>노트</strong>: 계속하기 전에 절대경로, 상대경로에 대해 복습하기 위해 <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</a>를 읽어보세요.</p> +</div> + +<p>예를 들어, 당신의 이미지 파일 이름이 <code>dinosaur.jpg</code> 이고, 당신의 HTML 페이지와 같은 디렉토리 아래에 위치한다면 이런 식으로 이미지를 삽입할 수 있습니다:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.jpg"> +</pre> + +<p>그 이미지가 HTML페이지와 같은 디렉토리 하의 <code>images</code> 라는 하위 디렉토리에 있다면 (이러한 방식은 구글이 {{glossary("SEO")}}/색인을 위해 추천합니다), 이런 식으로 삽입할 수 있습니다:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> + +<div class="note"> +<p><strong>노트:</strong> 검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함시킵니다. 따라서 그 내용을 기술하는 파일 이름을 사용하세요. <code>img835.png</code>.보다는 <code>dinosaur.jpg</code> 가 낫습니다.</p> +</div> + +<p>절대경로를 사용해서 이미지를 삽입할 수도 있습니다. 예를 들면: </p> + +<pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"> +</pre> + +<p>그러나 이건 무의미합니다. DNS 서버로부터 IP 주소를 처음부터 다시 찾아보는 등 브라우저가 더 많은 일을 하게 만들기 때문입니다. 당신은 거의 항상 당신의 HTML과 같은 서버에 이미지를 두게 될 것입니다.</p> + +<div class="warning"> +<p><strong>주의사항</strong>: 대부분의 이미지들은 저작권 적용 대상입니다. 따라서, </p> + +<p>1) 당신이 그 이미지에 대한 소유권을 갖고 있거나<br> + 2) 당신이 그 이미지의 소유자로부터 명확한 서류상의 허가를 받았거나<br> + 3) 그 이미지가 실제로 공공재라는 충분한 증거가 있는 경우</p> + +<p>가 아니면 당신의 웹페이지에 이미지를 <strong>게시하지 마십시오. </strong></p> + +<p>저작권 침해는 불법이며 비윤리적입니다. 또한 당신의 <code>src</code> 속성이 링크하도록 허가받지 않은 누군가의 웹사이트에 호스팅 된 이미지를 가리키지 않도록 하십시오. 이러한 행위를 "핫 링킹(hot linking)"이라고 합니다. 누군가의 대역폭을 훔쳐 쓰는 것은 불법입니다. 이것은 당신의 페이지를 느리게 만들고, 그 이미지가 삭제되거나 무언가 부끄러운 걸로 바뀌어도 당신은 그것을 통제할 권한이 없습니다.</p> +</div> + +<p>위에서 쓴 우리의 코드는 이러한 결과를 보여줄 것입니다:</p> + +<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>Note</strong>: {{htmlelement("img")}} 와 {{htmlelement("video")}} 와 같은 element들을 대체 element라고 하기도 합니다. 그 이유는 element의 내용과 크기가 element 그 자체가 아니라, 외부적인 요소(이미지나 비디오)에 의해 결정되기 때문입니다.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 완성된 예제들을 <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a>에서 확인하실 수 있습니다. (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> 도 참고하세요.)</p> +</div> + +<h3 id="Alternative_text">Alternative text</h3> + +<p>다음으로 살펴볼 속성은 <code>alt</code>이다. 이 값은 이미지가 보여지지 않을 경우를 대비해서 이미지를 설명할 수 있는 글을 값으로 가진다. 예를 들어, 위의 코드를 다음과 같이 바꿀 수 있다:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth"></pre> + +<p><code>alt</code> 를 잘 작성하였는지 확인하기 위한 가장 쉬운 방법은 파일 이름을 고의로 틀리게 적는 것이다. 예를 들어 이미지 파일의 이름을 <code>dinosooooor.jpg</code> 로 바꾼다면 브라우저는 이미지를 보여주는 대신, alt의 내용을 보여줄 것이다:</p> + +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>alt는 왜 굳이 사용되거나 필요한걸까? alt는 여러가지 이유로 유용하게 사용된다:</p> + +<ul> + <li>사용자가 시각적인 장애를 가지고 있는 경우 <a href="https://en.wikipedia.org/wiki/Screen_reader">screen reader</a>가 그 내용을 읽어줄 수 있을 것이다. 사실 alt를 가지고 있다는 것만으로 대부분의 사용자들에게 도움이 될 수 있다.</li> + <li>위에서 살펴봤듯이, 파일명을 잘못 적거나 path를 잘못 적었을 수도 있다.</li> + <li>아직까지도 텍스트만 지원되는 브라우저(예를 들면 : <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>)를 사용하는 사용자들이 있기 때문에 이미지 지원이 안되는 사용자들도 있다.</li> + <li>텍스트를 제공하여 검색엔진이 이를 활용할 수 있도록 할 수 있다. 예를 들어, 검색엔진의 검색 query가 alt 텍스트와 일치할 수 있을 것이다.</li> + <li>사용자가 데이터 통신량과 방해요소를 줄이기 위해 고의적으로 이미지를 꺼 놓았을 수도 있다. 이러한 현상은 휴대기기 사용자들에게서 많이 나타나며 대역폭이 비싸거나 제한된 지역에서도 나타난다.</li> +</ul> + +<p>그렇다면 <code>alt</code> 안에 정확히 무엇을 써야될까? 그 내용은 이미지가 <em>왜</em> 사용되었는지에 따라 다르다. 다른말로 해서, 이미지가 나타나지 않으면:</p> + +<ul> + <li><strong>장식. </strong>You should use {{anch("CSS background images")}} for decorative images, but if you must use HTML, add a blank <code>alt=""</code>. If the image isn't part of the content, a screen reader shouldn't waste time reading it.</li> + <li><strong>내용. </strong>If your image provides significant information, provide the same information in a <em>brief </em><code>alt</code> text – or even better, in the main text which everybody can see. Don't write redundant <code>alt</code> text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use <code>alt=""</code>.</li> + <li><strong>링크.</strong> If you put an image inside {{htmlelement("a")}} tags, to turn an image into a link, you still must provide <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>. In such cases you may, either, write it inside the same <code><a></code> element, or inside the image's <code>alt</code> attribute – whichever works best in your case.</li> + <li><strong>텍스트.</strong> 텍스트는 이미지로 나타내면 안된다. 메인 헤딩이 drop shadow가 필요하다면 이미지로 넣는 방법 대신에 <a href="/en-US/docs/Web/CSS/text-shadow">CSS</a>를 사용하도록 하자. 최후의 수단으로 이미지를 사용해야된다면 <code>alt</code> 속성에 설명을 적어두길 바란다.</li> +</ul> + +<p>기본적으로, 이미지가 나타나지 않을 때, 사용자에게 충분할 설명을 제공하는 것이 목적이다. 이러한 방법을 통해 사용자가 이미지를 보지 않고도 내용을 충분히 전달 받을 수 있다. 이미지를 브라우저에서 끄고 어떻게 나타나는지 관찰해보자. 이미지가 나타나지 않을 때 alt의 소중함을 깨닫게 될 것이다.</p> + +<div class="note"> +<p><strong>Note</strong>: 더 자세한 정보를 얻길 원하다면 <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>를 클릭.</p> +</div> + +<h3 id="Width_and_height">Width and height</h3> + +<p><code>width</code> 와 <code>height</code> 속성을 통해 이미지의 크기를 조정할 수 있다. 이미지의 크기를 알아내는 몇가지 방법이 있는데 Mac은 <kbd>Cmd</kbd> + <kbd>I</kbd> 를 통해 이미지 정보를 볼 수 있다. 예제로 돌아와서, 우리는 이렇게 해볼 수 있다:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"></pre> + +<p>평범한 경우에 위와 같은 방법은 디스플레이에 큰 차이를 주지 않는다. 그러나 만약에 이미지가 로딩중이어서 아직 페이지에 안나타나더라도 브라우저는 지정된 크기의 공간을 이미지를 위해 할당해둔다:</p> + +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>이미지 크기를 지정해두는 것은 좋은 습관이며 이를 통해, 페이지가 더 빠르고 순조롭게 로딩될 수 있다.</p> + +<p>그러나 HTML 속성을 통해 이미지의 크기를 조정하는 것은 바람직하지 않다. 이미지 크기를 원본보다 크게 잡으면 원하지 않는 방향으로 나타날 수 있으며 사용자의 필요에 맞지 않는 불필요한 대역폭을 사용할 수도 있다. 또한, <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>를 지키지 않으면 이미지가 왜곡되어 나타날 수도 있다. 이미지 편집기를 통해서 크기를 변경한 후에 웹페이지에 올리는 것이 바람직하다.</p> + +<div class="note"> +<p><strong>Note</strong>: 이미지 크기를 변경해야 한다면 <a href="/en-US/docs/Learn/CSS">CSS</a> 를 사용하도록 하자.</p> +</div> + +<h3 id="Image_titles">Image titles</h3> + +<p>As <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">with links</a>, you can also add <code>title</code> attributes to images, to provide further supporting information if needed. In our example, we could do this:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341" + title="A T-Rex on display in the Manchester University Museum"></pre> + +<p>This gives us a tooltip, just like link titles:</p> + +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>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.</p> + +<h3 id="Active_learning_embedding_an_image">Active learning: embedding an image</h3> + +<p>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:</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>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.</p> + +<p>We would also like you to:</p> + +<ul> + <li>Add some alt text, and check that it works by misspelling the image URL.</li> + <li>Set the image's correct <code>width</code> and <code>height</code> (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.</li> + <li>Set a <code>title</code> on the image.</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<img> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">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; +}</pre> + +<pre class="brush: js notranslate">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 = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; +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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Annotating_images_with_figures_and_figure_captions">Annotating images with figures and figure captions</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><div class="figure"> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <p>A T-Rex on display in the Manchester University Museum.</p> +</div></pre> + +<p>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?</p> + +<p>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:</p> + +<pre class="notranslate"><figure> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> +</figure></pre> + +<p>The {{htmlelement("figcaption")}} element tells browsers, and assistive technology that the caption describes the other content of the {{htmlelement("figure")}} element.</p> + +<div class="note"> +<p><strong>Note</strong>: From an accessibility viewpoint, captions and {{htmlattrxref('alt','img')}} text have distinct roles. Captions benefit even people who can see the image, whereas {{htmlattrxref('alt','img')}} text provides the same functionality as an absent image. Therefore, captions and <code>alt</code> text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.</p> +</div> + +<p>A figure doesn't have to be an image. It is an independent unit of content that:</p> + +<ul> + <li>Expresses your meaning in a compact, easy-to-grasp way.</li> + <li>Could go in several places in the page's linear flow.</li> + <li>Provides essential information supporting the main text.</li> +</ul> + +<p>A figure could be several images, a code snippet, audio, video, equations, a table, or something else.</p> + +<h3 id="Active_learning_creating_a_figure">Active learning: creating a figure</h3> + +<p>In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:</p> + +<ul> + <li>Wrap it in a {{htmlelement("figure")}} element.</li> + <li>Copy the text out of the <code>title</code> attribute, remove the <code>title</code> attribute, and put the text inside a {{htmlelement("figcaption")}} element below the image.</li> +</ul> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">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; +}</pre> + +<pre class="brush: js notranslate">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 = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; +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(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="CSS_background_images">CSS background images</h2> + +<p>You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS {{cssxref("background-image")}} property, and the other <code>background-*</code> properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:</p> + +<pre class="brush: css notranslate">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!</p> + +<p>Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.</p> + +<div class="note"> +<p><strong>Note</strong>: You'll learn a lot more about <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> in our <a href="/en-US/docs/Learn/CSS">CSS</a> topic.</p> +</div> + +<p>That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages.</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/ko/learn/html/multimedia_and_embedding/index.html b/files/ko/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..33a3bf4aad --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,77 @@ +--- +title: Multimedia and embedding +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - NeedsTranslation + - SVG + - TopicStub + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">우리는 이 과정에서 지금까지 많은 텍스트를 살펴 봤지만 텍스트만을 사용한 웹은 따분합니다. 보다 흥미로운 내용으로 웹을 생생하게 만드는 방법을 살펴 보도록 합시다! 여기에서는 HTML을 사용하여 이미지를 포함 할 수있는 다양한 방법과 비디오, 오디오 및 웹 페이지 전체를 포함하는 방법을 비롯하여 웹 페이지에 멀티미디어를 포함하는 방법을 살펴 보도록 하겠습니다.</p> + +<h2 id="전제조건">전제조건</h2> + +<p>이 단원을 시작하기 전에 앞서 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML소개</a>에서 설명한대로 HTML에 대한 기본 지식이 있어야합니다. 이 모듈 (또는 이와 비슷한 것)을 사용해 보지 않았다면, 처음부터 다시 시작후 돌아오세요!</p> + +<div class="note"> +<p><strong>Note</strong>: 자신만의 파일을 만들수 없는 컴퓨터/테블릿/그외 기기에서 작업하는 경우, 코드 예제를 (대부분을) <a href="https://jsbin.com/">JSBin</a> 이나 <a href="https://thimble.mozilla.org/">Thimble</a>같은 온라인 코딩 프로그램을 통해 수행해 볼 수 있습니다</p> +</div> + +<h2 id="가이드">가이드</h2> + +<p>이 단원에는 웹 페이지에 멀티미디어를 삽입하는 모든 기본 사항을 설명하는 다음 문서가 포함되어 있습니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 이미지</a></dt> + <dd>여기에는 고려해야할 다른 종류의 멀티미디어들이 있지만, 간단한 이미지를 웹페이지에 삽입하는데 사용되는 일반적인 {{htmlelement("img")}} 엘리먼트를 사용하는것이 합리적입니다. 이번 내용에서는 {{htmlelement("figure")}} 사용하여, 기본적인 내용 및 캡션을 주석으로 추가하는 방법, CSS 배경 이미지와의 관계에 대해 자세히 다룰 것입니다.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">비디오와 오디오 컨텐츠</a></dt> + <dd>다음으로, {{htmlelement("video")}} 와{{htmlelement("audio")}} 엘리먼트를 사용하여 페이지에 비디오 및 오디오를 포함하는 방법을 살펴 보겠습니다. 기본기능을 포함, 여러종류의 브라우저에 다양한 파일 포맷에 접근하는 법, 캡션 및 자막 추가, 구형 브라우저에 대한 폴백 (fallback) 추가 방법 등 다양한 기능을 제공합니다.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies"><object> 로부터 <iframe>까지 — 기타 임베딩 기술</a></dt> + <dd>여기서는 웹 페이지에 다양한 콘텐츠 유형을 삽입 할 수있게 해주는 몇가지 추가적인 요소를 살펴봅니다 : {{htmlelement("iframe")}}, {{htmlelement("embed")}} 그리고 {{htmlelement("object")}} 엘리먼트입니다. <code><iframe></code>은 다른 웹 페이지를 삽입하기위한 것이고, 나머지 두 개는 PDF, SVG 및 플래시까지 포함 할 수 있습니다. — 이 기술들은 사라지는 중이지만 여전히 볼수 있을것입니다.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vector graphics 웹에 추가하기</a></dt> + <dd>Vector graphics 는 특정한 상황에서 매우 유용할 수 있습니다. Vector graphics 는 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">PNG/JPG와 같은 일반적인 형식과 달리 확대 시 왜곡/픽셀레이트가 발생하지 않으며, 스케일링 시 매끄러운 상태를 유지할 수 있습니다. 이 글에서는 Vector graphics 가 무엇인지, 웹 페이지에 인기 있는 </span> {{glossary("SVG")}} <span style="font-size: 1rem; letter-spacing: -0.00278rem;">포맷을 포함시키는 방법에 대해 소개합니다.</span></dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images(반응형 이미지)</a></dt> + <dd> + <p>휴대전화에서 데스크톱 컴퓨터에 이르기까지, 웹을 검색할 수 있는 매우 다양한 유형의 장치들로 인해서 형성된 현대 웹 세계를 마스터하기 위한 필수적인 개념은 반응형 디자인입니다. 이는 다양한 화면 크기, 해상도 등에 맞춰 기능을 자동으로 변경할 수 있는 웹 페이지를 만드는 것을 말합니다. 이것은 나중에 CSS 모듈에서 훨씬 더 자세히 살펴보겠지만, 현재로서는 HTML이 {{htmlelement("picture")}} 요소를 포함하여 반응형 이미지를 만드는 데 사용할 수 있는 도구를 살펴보기로 하겠습니다.</p> + </dd> +</dl> + +<h2 id="평가">평가</h2> + +<p>아래의 평가는 위의 가이드에서 다루는 HTML 기본 사항에 대한 이해를 테스트합니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt> + <dd> + <p>이 평가에서, 우리는 당신이 Mozilla 에 관한 모든 펑키한 스플래시 페이지에 몇 개의 이미지와 비디오를 추가하도록 하며, 이 모듈의 기사에서 논의된 몇 가지 기술에 대하여 당신의 지식을 테스트할 것입니다!</p> + </dd> +</dl> + +<h2 id="같이_보기">같이 보기</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">이미지 위에 히트맵 추가</a></dt> + <dd> + <p>이미지 맵은 이미지 링크의 다른 부분을 다른 곳에 연결하는 메커니즘을 제공합니다(당신이 클릭하는 각 나라에 대한 추가 정보들과 연결되는 지도를 생각해 봅시다). 이 기술은 때때로 유용하게 활용될 수 있습니다.</p> + </dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in the <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available, and shareable by others).</p> + </dd> +</dl> diff --git a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..14ecf00e1f --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,261 @@ +--- +title: 반응형 이미지 +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary">이 글에서 우리는 반응형 이미지(Responsive images)의 — 해상도, 스크린 크기 등이 다른 수많은 기기들에서 정상적으로 표시되는 이미지 — 개념과 구현을 위해 HTML에서 제공하는 도구에 대해 배울 것이다. 반응형 이미지는, 이후에 여러분이 배워야 할 CSS 과정 중 <a href="https://developer.mozilla.org/ko/docs/Learn/CSS">반응형 웹 디자인</a>의 일부이다.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td><a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 기본 태그</a>, <a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">이미지를 웹페이지에 넣는 방법</a></td> + </tr> + <tr> + <th scope="row">학습목표:</th> + <td>웹사이트에서 반응형 이미지를 구현하기 위해 사용하는 {{htmlattrxref("srcset", "img")}}이나 {{htmlelement("picture")}} 요소 같은 기능의 사용법을 배운다.</td> + </tr> + </tbody> +</table> + +<h2 id="반응형_이미지를_사용하는_이유">반응형 이미지를 사용하는 이유?</h2> + +<p>일반적인 웹 사이트를 떠올려 보라. 헤더 이미지가 있을 것이고, 헤더 이후 본문에는 이미지가 몇 개 있을 것이다. 헤더 이미지는 헤더의 전체 가로 너비를 자치할 것이고, 본문 이미지는 본문 영역 안에서 어느 정도를 차지할 것이다. 아래 사이트의 이미지 처럼 말이다.</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>노트북이나 데스크톱처럼 화면이 넓은 기기에서는 잘 작동할 것이다(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">실제 예시는 여기에 있고</a>, Github에서 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">소스코드</a>를 볼 수 있다.) CSS에 대해 너무 깊이 들어가고 싶진 않지만, 이정도는 이야기하자.</p> + +<ul> + <li>사이트 전체 너비는 최대 1200픽셀이다. 뷰포트가 1200픽셀이 넘는 경우 남는 공간 안에서 가운데 정렬된다. 1200픽셀 이하 뷰포트에서는 뷰포트 전체 너비의 100%가 된다.</li> + <li>헤더 이미지는, 너비가 얼마든간에 언제나 헤더의 가운데 오게 설정했다. 좁은 화면에서 본다면, 이미지의 가운데 있는 가장 중요한 부분(사람들)은 여전히 보인다. 그리고 나머지 좌우 부분은 보이지 않는다. 높이는 200픽셀이다.</li> + <li>본문 이미지는 웹사이트 너비가 이미지보다 작아지면, 줄어들기 시작해 삐져나가지 않고 언제나 사이트 너비 안에 있게 된다.</li> +</ul> + +<p>그러나, 좁은 화면 기기로 사이트를 보기 시작하면 문제가 생긴다. 헤더는 괜찮아 보이지만, 모바일 기기에서는 화면 높이를 너무 많이 차지하기 시작한다. 이 사이즈에서는, 본문 첫번째 사진의 사람들이 나타나기 어렵다.</p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>개선책은 좁은 화면에서 사이트를 볼 때 이미지의 중요한 상세를 보여 주는 자른 이미지를 보여 주는 것이다. 또 다르게 자른 이미지를 태블릿처럼 중간 정도 너비 화면의 기기에서 보여줄 수 있을 것이다. 이를 보통 <strong>아트 디렉션 문제(art direction problem)</strong>라고 한다. [아트 디렉션은 ‘연출 방향’ 정도로 번역할 수 있을 듯한데, 보통은 용어를 그대로 사용한다. 반응형 이미지에서는 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여 주거나 하는 방식을 의미한다. - 역자 주]</p> + +<p>게다가, 작은 모바일 화면에서는 페이지에 그렇게 큰 이미지를 포함할 필요가 없다. 이것을 <strong>해상도 전환 문제(resolution switching problem)</strong>라고 부른다. <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">벡터 그래픽 단원</a>에서 배웠듯이, 래스터 이미지[비트맵 이미지 - 역자 주]는 가로 픽셀들과 세로 픽셀들의 세트로 구성된다. 작은 래스터 이미지를 실제 사이즈보다 확대해서 보면 도트가 깨져 보인다(벡터 그래픽은 그렇지 않은데 반해).</p> + +<p>역으로, 적당한 크기보다 훨씬 작은 화면에 큰 이미지를 표시 할 필요가 없다. 그렇게 하는 것은 대역폭을 낭비하는 것이다. 특히, 모바일 사용자는 기기에 맞는 작은 이미지 대신 데스크톱에 사용되는 커다른 이미지를 다운로드하느라 대역폭을 낭비하고 싶어하지 않는다. 이상적인 상황은 다양한 해상도를 준비해 두고, 웹사이트 데이터를 받는 기기에 따라 적당한 사이즈를 제공하는 것이다.</p> + +<p>상황을 좀더 복잡하게 하면, 어떤 기기는 고해상도 화면이 있어서, 멋지게 보이려면 더 큰 이미지가 필요하다. 이것은 근본적으로 같은 문제지만, 약간 맥락은 다르다.</p> + +<p>아마 벡터 이미지가 이 문제를 해결할 것이라고 생각할 지도 모르겠고, 실제로 어느 정도는 그렇기도 하다 — 벡터 이미지는 파일 사이즈도 작고 확대해도 깨지지 않는다. 사용할 수 있다면 언제나 사용해야 한다. 그러나 벡터 이미지가 모든 유형에 맞는 것은 아니다. 간단한 그래픽, 패턴, 인터페이스 요소 등에 적합하지만, 사진 같은 상세한 종류의 이미지를 벡터 기반으로 만들려고 하면 복잡해지기 시작한다. JPEG 같은 래스터 이미지 포맷은 위 예제에 나온 종류의 이미지에 더 적합하다.</p> + +<p>이런 종류의 문제는 90년대 초중반에 웹이 처음 등장했을 때는 존재하지 않았다. 당시 웹을 탐색할 수 있는 기기는 데스크톱과 노트북뿐이었기 때문에 브라우저 개발자와 명세 작성자는 해결책 구현에 대한 생각조차 하지 않았다. 브라우저에 여러 개의 이미지 파일들을 제공하는 <em>반응형 이미지 기술</em>은 위에서 지적한 문제를 해결하기 위해 최근에 구현됐다. 픽셀 수가 다르지만 동일한 이미지를 보여주거나(<em>해상도 전환</em>), 다른 공간 점유에 맞는 다른 이미지를 보여 주거나(<em>아트 디렉션</em>).</p> + +<div class="note"> +<p><strong>알림</strong>: 이 글에서 다루는 새로운 기능들 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — 은 모두 출시된 최신 데스크톱과 모바일 브라우저(인터넷 익스플로러는 구현이 안 돼 있지만, 마이크로소프트 엣지를 포함해)에서 지원된다. </p> +</div> + +<h2 id="반응형_이미지를_어떻게_만들까">반응형 이미지를 어떻게 만들까?</h2> + +<p>이 섹션에서는 위에서 설명한 두 가지 문제를 살펴보고 HTML 반응형 이미지 기법을 이용해 문제를 해결하는 방법을 보여 준다. 이 섹션에서는, 위 예제의 본문 영역에서 봤듯, HTML {{htmlelement("img")}}에 초점을 맞출 것이라는 점을 주목하기 바란다(헤더 이미지는 장식용이고, 따라서 CSS 배경 이미지로 구현됐다). <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS에는 분명 HTML보다 더 나은 반응형 디자인 도구</a>가 있고, 그것은 향후 CSS 모듈에서 다룰 것이다.</p> + +<h3 id="해상도_전환_다양한_사이즈">해상도 전환: 다양한 사이즈</h3> + +<p>자, 해상도 전환으로 해결하려고 하는 문제는 뭘까? 우리는 기기에 따라 단지 크기만 다른, 동일한 이미지 콘텐츠를 보여 주고 싶다. 우리 예제에서 본문 두 번째 이미지가 직면한 상황이다. 표준 {{htmlelement("img")}} 요소는 전통적으로 브라우저에게 오직 하나의 소스 파일만 제시하도록 돼 있었다.</p> + +<pre class="brush: html notranslate"><img src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바"></pre> + +<p>그러나 {{htmlattrxref("srcset", "img")}}과 {{htmlattrxref("sizes", "img")}}라는 두 가지 새로운 속성(attribute)을 사용해 브라우저가 올바른 것을 선택하는 데 도움이 되는 몇 가지 추가 소스 이미지와 힌트를 제공 할 수 있다. 이 예제는 Github의 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 예제 (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">소스 코드</a> 참조)에서 볼 수 있다.</p> + +<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg 320w, + elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 320px) 280px, + (max-width: 480px) 440px, + 800px" + src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바"></pre> + +<p><code>srcset</code>과 <code>sizes</code> 속성은 복잡해 보이지만 위에서 보여 준 것처럼 각 행에 속성 값을 나눠 적으면 이해하기 어렵지 않다. 각 값은 쉼표로 구분한 목록으로 적고, 목록의 각 부분은 세 부분으로 구성된다. 이제 각 내용을 살펴 보자.</p> + +<p><strong><code>srcset</code></strong>은 브라우저에게 제시할 이미지 목록과 그 크기를 정의한다. 각 쉼표 앞에 이렇게 적는다.</p> + +<ol> + <li><strong>이미지 파일명</strong> (<code>elva-fairy-480w.jpg</code>.)</li> + <li>공백</li> + <li>이미지 <strong>고유 픽셀 너비</strong> (<code>480w</code>) — <code>px</code>이 아니라 <code>w</code> 단위를 사용한다는 데 주의하라. 이것은 이미지의 실제 사이즈인데, 컴퓨터에서 이미지를 확인하면 찾을 수 있다. (예컨대, 맥에서는 파인더에서 이미지를 선택하고 <kbd>Cmd</kbd> + <kbd>I</kbd>를 눌러 정보를 표시 할 수 있다).</li> +</ol> + + + +<p><strong><code>sizes</code></strong>는 미디어 조건문들을 정의하고(예를 들면, 화면 크기) 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다(앞서 언급한 힌트). 이 경우, 각 쉼표 전에 이렇게 쓴다.</p> + +<ol> + <li><strong>미디어 조건문</strong> (<code>(max-width:480px)</code>) — CSS 주제에서 이에 대해 더 많은 것을 배울 수 있을 테지만, 지금 간단히 말하면, 미디어 조건문은 가능한 화면 상태를 기술한다. 이 경우, 이렇게 말하는 것이다: “뷰포트 너비가 480픽셀 이하”.</li> + <li>공백.</li> + <li>미디어 조건문이 참인 경우 이미지가 채울 <strong>슬롯의 너비</strong>(<code>440px</code>).</li> +</ol> + +<div class="note"> +<p><strong>알림</strong>: 슬롯 너비로 절대값(<code>px</code>, <code>em</code>)이나 뷰포트에 대한 상대값(<code>vw</code>)을 넣어야 한다. 상대값으로 퍼센트(<code>%</code>)를 넣을 수는 없다. 마지막 슬롯 너비에는 미디어 조건문이 없다는 것을 확인했을 것이다. 이것은 미디어 조건문이 참인 경우가 하나도 없는 것우의 기본값이다. 브라우저는 첫 번째 조건문이 맞으면 나머지 모든 조건문을 무시한다. 따라서 미디어 조건문의 순서에 유의하라.</p> +</div> + +<p>그래서, 이 속성들을 제대로 적으면, 브라우저는 이렇게 할 것이다.</p> + +<ol> + <li>기기 너비를 확인한다.</li> + <li><code>sizes</code> 목록에서 가장 먼저 참이 되는 미디어 조건문을 확인한다.</li> + <li>해당 미디어 쿼리가 제공하는 슬롯 크기를 확인한다.</li> + <li>해당 슬롯 크기에 가장 근접하게 맞는 <code>srcset</code>에 연결된 이미지를 불러온다.</li> +</ol> + +<p>이게 전부다! 그래서 지금, 이 속성을 지원하는 뷰포트 너비가 480px인 브라우저가 페이지를 불러온다고 하자, <code>(max-width: 480px)</code> 미디어 조건문이 참이 될 것이고, 따라서 <code>440px</code> 슬롯이 선택될 것이다. 그러면 <code>440px</code>에 가장 가까운 고유 너비(<code>480w</code>)가 선택됨에 따라 <code>elva-fairy-480w.jpg</code>가 로딩될 것이다. 800px 사진은 128KB다. 480px 버전은 고작 63KB인데 말이다. 65KB를 절약했다. 사진이 엄청 많은 페이지였다면 어땠을까. 이 기법은 모바일 사용자가 수많은 대역폭을 절약하게 해 준다.</p> + +<p>이 기능을 지원하지 않는 낡은 브라우저들은 이 속성들을 무시할 것이다. 그리고 {{htmlattrxref("src", "img")}} 속성에 참조된 보통 이미지를 불러올 것이다.</p> + +<div class="note"> +<p><strong>알림</strong>: 문서의 {{htmlelement("head")}}에서 <code><meta name="viewport" content="width=device-width"></code> 줄을 찾을 수 있을 것이다. 이것은 모바일 브라우저가 실제 뷰포트 너비로 웹페이지를 보여주도록 강제한다. (몇몇 모바일 브라우저들은 뷰포트 너비를 속인다, 그리고 대신에 더 큰 뷰포트 너비에서 페이지를 불러오고, 불러온 페이지를 축소한다. 이것은 반응형 이미지나 디자인에 별로 도움이 되지 않는다. 이것에 대해서는 향후 더 자세히 다룰 것이다.)</p> +</div> + +<h3 id="유용한_개발_도구">유용한 개발 도구</h3> + +<p>브라우저에는 필요한 슬롯 너비, 기타, 필요한 것들을 찾을 수 있게 도와 주는 유용한 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발 도구들</a>이 있다. 나는 우선 반응형이 아닌 일반 버전의 예제를 불러온다(<code>not-responsive.html</code>). 그리고 나서 <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>(도구 > 웹 개발 도구 > 반응형 디자인 모드)로 간다. 이 모드는 다양한 크기의 기기로 보는 것처럼 웹페이지 레이아웃을 보게 해 준다.</p> + +<p>나는 뷰포트 너비를 320px로 했다가 480px로 한다. 각 너비에서 나는 <a href="https://developer.mozilla.org/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Page_Inspector">DOM 검사기</a>로 가서, 확인하고 싶은 {{htmlelement("img")}} 요소를 클릭한다. 그리고 화면의 오른쪽에 있는 박스 모델 뷰 탭에서 크기를 확인한다. 이렇게 하면 필요한 고유 너비를 알 수 있다.</p> + +<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> + +<p>다음으로 원하는 뷰포트 너비를 설정해서 어떤 <code>srcset</code>이 작동하는지 체크할 수 있다(예컨대, 좁게 설정할 수 있다). 네트워크 검사기(도구 > 웹 개발 도구 > 네트워크)를 열고, 페이지를 새로 고침 한다. 웹페이지를 만들기 위해 다운로드한 항목들을 보여 주는데, 따라서 어떤 이미지가 사용됐는지 여기서 확인할 수 있다.</p> + +<div class="note"> +<p><strong>알림:</strong> 크롬에서 테스트할 때 캐시를 비활성화하라. 개발자 도구를 열고, <strong>Network</strong> 탭의 체크박스들 중 <strong>Disable cache</strong>에 체크하라. 이렇게 하지 않으면 크롬은 최적의 이미지보다 캐시된 이미지를 선호할 것이다.</p> +</div> + +<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="해상도_전환_같은_크기_다른_해상도">해상도 전환: 같은 크기, 다른 해상도</h3> + +<p>만약 다양한 디스플레이 해상도를 지원해야 하는데, 모두가 이미지를 실제 사이즈로 동일하게 봐야 한다면, <code>srcset</code>에 <code>sizes</code> 없이 x-서술자를 사용해 브라우저가 적절한 해상도의 이미지를 선택하게 할 수 있다. 꽤 쉽다. <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a>에서 예제를 찾아 볼 수 있다. (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">소스 코드</a>도 볼 수 있다.)</p> + +<pre class="brush: html notranslate"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" alt="요정 옷을 입은 엘바"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">이 예에서, 다음 CSS가 이미지에 적용되고, 따라서 화면에서 너비는 320px이 된다(CSS 픽셀이라고 부르기도 한다).</p> + +<pre class="brush: css notranslate">img { + width: 320px; +}</pre> + +<p>이 경우 sizes는 필요 없다. 브라우저는 단순히 보이는 해상도가 얼마인지는 확인하고 <code>srcset</code>에 참조돼 있는 것들 중 가장 적합한 이미지를 제공한다. 따라서 기기의 1픽셀이 CSS의 1필셀에 대응되는, 보통/낮은 해상도 디스플레이의 기기가 페이지에 접속하면, <code>elva-fairy-320w.jpg</code>가 로드될 것이다(1x가 적용됐고, 그걸 명시해서 적을 필요는 없다). 만약 기기의 2픽셀이 CSS 1픽셀에 해당하는 고해상도 기기라면, <code>elva-fairy-640w.jpg</code>가 로드될 것이다. 640px 이미지는 93KB다. 320px 이미지는 39KB밖에 안 된다.</p> + +<h3 id="아트_디렉션">아트 디렉션</h3> + +<p>다시 말하면, <strong>아트 디렉션 문제</strong>는 서로 다른 이미지 디스플레이 사이즈에 맞추기 위해 디스플레이된 이미지를 변경하고자 하는 것과 관련있다. 예를 들면, 웹사이트에 데스크톱 브라우저로 들어오면 가운데 한 사람이 있는 커다란 가로 사진이 있다. 그런데 모바일 브라우저로 줄여서 보면 사람이 보기 힘들 정도로 정말 작아진다. 사람이 확대된 좀더 작은 세로 사진으로 보여 주는 게 더 나을 것이다. {{htmlelement("picture")}} 요소가 이런 종류의 해결책을 구현하게 해 준다.</p> + +<p>원래의 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> 예제로 돌아가 보자. 아트 디렉션이 절실히 필요한 사진이 있다.</p> + +<pre class="brush: html notranslate"><img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스"></pre> + +<p>{{htmlelement("picture")}}를 이용해 고쳐 보자! <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code>와 <code><audio></code></a> 처럼, <picture> 요소는 {{htmlelement("source")}} 요소들을 감싼다. <code>source</code> 요소는 브라우저가 고를 수 있는 여러 소스들을 제공한다. <code>soucre</code> 요소들 뒤에는 가장 중요한 {{htmlelement("img")}} 요소가 뒤따른다. <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 코드는 이렇다.</p> + +<pre class="brush: html notranslate"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스"> +</picture> +</pre> + +<ul> + <li><code><source></code> 요소에는 미디어 조건문이 있는 <code>media</code> 속성이 있다 — 처음에 살펴 봤던 <code>srcset</code> 예제처럼, 이 조건들도 어떤 이미지를 보여 줄 지 결정하는 데 사용한다 — 참을 리턴하는 첫 번째 것이 표시된다. 이 경우, 만약 뷰포트 너비가 799px 이하라면, 첫 번째 <code><source></code> 요소의 이미지가 표시될 것이다. 만약 뷰포트 너비가 800px 이상이라면, 두 번째 것을 보여 줄 것이다.</li> + <li>srcset 속성에는 보여 줄 이미지 경로가 있었다. 위의 <code><img></code>에서 살펴 봤듯이, <code><source></code>도 여러 참조 이미지와 <code>sizes</code> 속성을 <code>srcset</code> 속성에 넣을 수 있다. 따라서 우리는 이미지 여러 개를 <code><picture></code> 요소에서 제공할 수 있다. 하지만 그렇게 되면 각각 다양한 해상도도 제공해야 할 것이다. 현실적으로, 이런 일을 자주 하고 싶지는 않을 것이다.</li> + <li>이 모든 경우, <code>src</code>와 <code>alt</code> 속성이 있는 <code><img></code> 요소를 <code></picture></code> 바로 앞에 반드시 제공해야 한다. 그렇지 않으면 이미지가 표시되지 않을 것이다. 이것은 참을 리턴하는 미디어 조건문이 없는 경우 기본 이미지를 제공하는 것이다(실제 이 예제에서 두 번째 <code><source></code> 요소는 제거해도 된다). 그리고 <picture> 요소를 지원하지 않는 브라우저에 대체제를 제공하는 것이기도 하다.</li> +</ul> + +<p>이 코드는 넓은 화면과 좁은 화면 둘 다에서 적절한 이미지를 표시하게 해 준다. 아래를 보자.</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>알림</strong>: 미디어 속성은 아트 디렉션 시나리오에서만 사용하라. 만약 미디어를 사용한다면, 미디어 조건문을 사이즈 속성에 넣지 마라.</p> +</div> + +<h3 id="왜_CSS나_자바스크립트를_이용해_이렇게_할_수_없는가">왜 CSS나 자바스크립트를 이용해 이렇게 할 수 없는가?</h3> + +<p>브라우저가 페이지를 불러오기 시작할 때, 메인 파서가 CSS와 자바스크립트를 로드하고 해석하기 전에 이미지들을 다운로드(미리 불러오기)하기 시작한다. 이렇게 하는 것은 평균적으로 페이지 로딩 시간을 20%쯤 단축시켜주는 유용한 기법이다. 그러나 반응형 이미지에는 도움이 안 된다. 따라서 <code>srcset</code> 같은 해결책을 구현해야 한다. 예를 들면, {{htmlelement("img")}} 요소를 불러온 후, 자바스크립트로 뷰포트 너비를 감지하고, 필요하면 더 작은 소스 이미지로 동적으로 바꾸는 식으로 할 수 없다. 그 시점에, 원래의 이미지가 이미 로드된 상태고, 작은 이미지까지 불러와야 한다. 반응형 이미지 관점에서 더 나쁘다.</p> + +<ul> +</ul> + +<h3 id="최신_이미지_포맷을_대담하게_사용하라">최신 이미지 포맷을 대담하게 사용하라</h3> + +<p>흥미로운 새 이미지 포맷들이 있다(WebP나 JPEG-2000). 이 포맷들은 작은 용량과 높은 질을 동시에 유지할 수 있게 해 준다. 그러나 브라우저 지원에 구멍이 많다.</p> + +<p><code><picture></code>는 상대적으로 낡은 브라우저들의 욕구도 채워 준다. 우리는 <code>type</code> 속성 안에 마임타입을 제공해 브라우저가 지원하지 않는 파일 유형을 즉시 거부하도록 할 수 있다.</p> + +<pre class="brush: html notranslate"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="정삼각형 4개로 만든 일반적인 피라미드"> +</picture> +</pre> + +<ul> + <li>아트 디렉션이 필요한 경우가 아니라면 <code>media</code> 속성을 사용하지 마라.</li> + <li><code><source></code> 요소에서, <code>type</code>에 유형을 선언한 이미지만 사용할 수 있다.</li> + <li>앞서 다뤘듯, 필요에 따라 <code>srcset</code>과 <code>sizes</code>에 쉼표로 구분한 목록을 얼마든 사용할 수 있다.</li> +</ul> + +<h2 id="능동적_학습_나만의_반응형_이미지_구현">능동적 학습: 나만의 반응형 이미지 구현</h2> + +<p>능동적 학습을 위해, 우리는 당신이 용기를 내 홀로 해 보길 기대한다. (... 대개는.) 우리는 당신이 <code><picture></code>를 이용해 자신만의 딱 맞는 좁은 화면용/넓은 화면용 아트 디렉션 샷을 구현하고, <code>srcset</code>을 사용하는 해상도 전환 예제를 구현하길 바란다.</p> + +<ol> + <li>자기 코드가 있는 간단한 HTML을 작성하라(원한다면 <code>not-responsive.html</code>를 시작점으로 삼자).</li> + <li>어딘가에 상세한 부분이 있는 멋진 가로 풍경 사진을 찾아라. 그래픽 편집기를 이용해 웹 사이즈 버전을 만들고, 상세한 부분을 확대해 보여줄 수 있도록 그걸 더 작게 잘라서 두 번째 이미지를 만들자(대략 480px 정도면 적당하다).</li> + <li><code>srcset</code>/<code>size</code>를 사용해, 서로 다른 해상도에서 같은 크기의 이미지를 제공하거나 서로 다른 뷰포트 너비에서 서로 다른 크기 이미지를 제공하는 해상도 전환 예제를 만들자.</li> +</ol> + +<div class="note"> +<p><strong>알림</strong>: 위에서 보여 줬듯이, 브라우저 개발자 도구를 사용해 필요한 크기가 얼마인지 찾아내는 데 도움을 얻자.</p> +</div> + +<h2 id="정리">정리</h2> + +<p>이것이 반응형 이미지의 비밀이다. 이 새로운 기법을 즐기길 바란다. 핵심을 되짚다면, 우리가 다룬 두 가지 구분된 문제가 있다.</p> + +<ul> + <li><strong>아트 디렉션</strong>: 다양한 레이아웃에 자른 이미지를 제공하고자 하는 문제. 예를 들면, 데스크톱 레이아웃에서 전체 풍경을 보여 주는 가로 이미지와 모바일 레이아웃에서 주요 대상을 좀더 가깝게 확대해서 보여 주는 세로 이미지. {{htmlelement("picture")}} 요소를 이용해 해결할 수 있다.</li> + <li><strong>해상도 전환</strong>: 데스크톱 디스플레이와 달리 커다란 이미지가 필요치 않은 좁은 화면 기기에 더 작은 이미지 파일을 제공하고자 하는 문제. 그리고 또한 선택적으로 다양한 해상도 이미지를 고밀도/저밀도 화면에 제공하고자 하는 문제. 이것은 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">벡터 그래픽</a>(SVG 이미지), {{htmlattrxref("srcset", "img")}}와 {{htmlattrxref("sizes", "img")}} 속성을 이용해 해결할 수 있다.</li> +</ul> + +<p>이것으로 전체 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어와 엠베딩</a> 모듈을 끝냈다! 남은 것은 멀티미디어 평가를 치르는 것뿐이다. 얼마나 배웠는지 확인해 보자. 즐겁게 진행하기를!</p> + +<h2 id="더_알아_보기">더 알아 보기</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">제이슨 그릭스비의 훌륭한 반응형 이미지 소개</a></li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">반응형 이미지: 해상도를 변경할 뿐이라면, srcset을 사용하라</a> — 브라우저가 어떤 이미지를 사용할지 고르는 방법에 대한 더 상세한 설명 포함</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML의 이미지</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> +</div> |