diff options
Diffstat (limited to 'files/ko/learn/html/howto')
3 files changed, 502 insertions, 0 deletions
diff --git a/files/ko/learn/html/howto/index.html b/files/ko/learn/html/howto/index.html new file mode 100644 index 0000000000..2bef079e90 --- /dev/null +++ b/files/ko/learn/html/howto/index.html @@ -0,0 +1,153 @@ +--- +title: Learn HTML to solve problems +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML + - NeedsTranslation + - TopicStub +translation_of: Learn/HTML/Howto +--- +<p>Once you've covered <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">the basics</a>, there isn't one right path to learn {{Glossary("HTML")}}. You can pick up whatever you like at your own pace. HTML is simply a set of {{glossary("tag","tags")}} you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a>.</p> + +<h2 id="Common_use_cases">Common use cases</h2> + +<p>HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basic_structure">Basic structure</h3> + +<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_basic_HTML_document">How to create a basic HTML document</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">How to set up a proper title hierarchy</a></li> +</ul> + +<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3> + +<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create list of items with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to stress or emphasize content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to indicate that text is important</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">How to display computer code with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">How to indicate exponential notation with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">How to provide contact information within a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">How to annotate images and graphics</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">How to add citations to webpages</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hyperlinks">Hyperlinks</h3> + +<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">How to create a hyperlink</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create a table of contents with HTML</a></li> +</ul> + +<h3 id="Images_multimedia">Images & multimedia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">How to add images to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add video content to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add audio content to a webpage</a></li> +</ul> + +<h3 id="Scripting_styling">Scripting & styling</h3> + +<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">How to use CSS within a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li> +</ul> + +<h3 id="Embedded_content">Embedded content</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">How to embed a webpage within another webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">How to add Flash content within a webpage</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2> + +<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Forms">Forms</h3> + +<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li> +</ul> + +<h3 id="Tabular_information">Tabular information</h3> + +<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li> +</ul> + +<h3 id="Data_representation">Data representation</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li> +</ul> + +<h3 id="Interactivity">Interactivity</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Advanced_text_semantics">Advanced text semantics</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li> +</ul> + +<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">How to add responsive image to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">How to add vector image to a webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">How to create dynamic and interactive images</a></li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> diff --git a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html new file mode 100644 index 0000000000..41c1697de3 --- /dev/null +++ b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html @@ -0,0 +1,267 @@ +--- +title: 약자 표시 및 이해시키는 방법 +slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +tags: + - HTML + - 초보 +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +--- +<div class="summary"> +<p>HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">먼저:</th> + <td><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">기초적인 HTML 문서 만들기</a>에 익숙해지셔야 합니다.</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.</td> + </tr> + </tbody> +</table> + +<h2 id="약자에_대해">약자에 대해</h2> + +<p>항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)</p> + +<p>We have to make sure that our readers can understand our abbreviations. In standard writing, it's really common to spell out the abbreviation only on its first occurrence, then just use the abbreviation everywhere:</p> + +<blockquote>유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.</blockquote> + +<div> +<p>이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.</p> +</div> + +<h2 id="abbr_요소">abbr 요소</h2> + +<p><em>HTML 약자 요소</em> ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.</p> + +<div class="note"> +<p><strong>알림:</strong> <code><acronym></code> 요소에 대해 들어보셨겠지만, <code><acronym</code><code>></code>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.</p> +</div> + +<pre class="brush: html"><p>I need to talk to you <abbr>ASAP</abbr>.</p></pre> + +<p>이렇게 <code>title</code> 속성으로 약자를 설명할 수도 있습니다:</p> + +<pre class="brush: html"><p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p></pre> + +<p>언제 <code>title</code> 속성을 적어야 할까요? 마음대로 시면 됩니다. It can be overkill to spell out a very common abbreviation like "ASAP" or an abbreviation used many times in your document. When in doubt, err on the side of providing the full description.</p> + +<div class="note"> +<p><strong>Note: </strong>In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element.</p> +</div> + +<p>{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 <code>title</code> 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:</p> + +<p>{{ EmbedLiveSample('The_abbr_element','100%',90) }}</p> + +<div class="note"> +<p><strong>중요: </strong>만약 사람들이 약자를 이해하는 것을 따진다면, <strong>절대로</strong> <code>title</code> 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.</p> +</div> + +<h2 id="실전">실전</h2> + +<p>{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <code><abbr></code>로 표시하고 <code>title</code> 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. <a href="/en-US/docs/Glossary">용어 사전</a>에서 모든 약자들을 보실 수 있습니다.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="exercise"> + <main> + <div class="instruction">Mark all the abbreviations with the <code>&lt;abbr&gt;</code> element</div> + <div class="playground"><textarea spellcheck="false"></textarea></div> + <div class="checking"> + <button>Show results</button><span class="count"></span> + </div> + <div class="result">Web <abbr title="developers">dev.</abbr> use <abbr title="Hypertext Markup Language">HTML</abbr> to structure documents, <abbr title="Cascading StyleSheet">CSS</abbr> to style them, and JavaScript to add special effects by using some dedicated <abbr title="Application Programming Interface">API</abbr>s.</div> + </main> +</div></pre> + +<pre class="brush: css">body { + font: 1em/100% sans-serif; + padding: 0; + margin: 0; +} + +.exercise { + background: #F9FAFB; + border-radius: 5px; + height: 13em; + overflow: hidden; +} + +.instruction, .count { + padding: .5em; + font-style: italic; + font-size: .95em; +} + +.playground { + padding: 0 .5em; +} + +.playground textarea { + display: block; + font-size : 1em; + line-height: 1.5em; + font-family: monospace; + box-sizing: border-box; + width : 100%; + padding : .5em; + height : 9.7em; +} + +.checking { + padding: .5em; +} + +.checking button { + box-sizing: border-box; + box-shadow:inset 0 1px 0 0 #bcd9a3; + background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); + background-color:#b4d665; + border-radius:5px; + border:1px solid #8aa164; + cursor:pointer; + font-size:1em; + padding:.5em; + text-decoration:none; +} +.checking button:hover { + background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); + background-color:#89a646; +} +.checking button:active { + transform: translate(0, 1px); +} + +.result { + height: 10em; + line-height: 1.4em; + padding: .5em; + box-sizing: border-box; +} + +main { + transform: translate(0,0); + transition: transform 300ms; +} + +.next main { + transform: translate(0, -10em); +} + +abbr { + display: inline-block; + white-space: nowrap; +} + +abbr.ok { + color: green; +} + +abbr.ok:after { + content: ' ✔︎'; +} + +abbr.fail { + color: red; +} + +abbr.fail:after { + content: ' ✘'; +} + +abbr.warning { + color: orange; +} + +abbr.warning:after { + content: ' !'; + font-weight: bold; +} +</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var content = document.querySelector('.exercise'); + var input = document.querySelector('.playground textarea'); + var button = document.querySelector('.checking button'); + var message = document.querySelector('.checking .count'); + var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); + var data = { + pass : 0, fail : 0, warning : 0 + }; + + input.value = document.querySelector('.result').textContent; + + function toggleResult(e) { + e.preventDefault(); + var classList = content.className.split(' '); + + if (classList.length === 1 && checkResult()) { + content.className = 'exercise next'; + message.innerHTML = 'Get ' + data.pass + ', ' + + 'Get ' + data.warning + ' without full description, ' + + 'Miss ' + data.fail + '.'; + button.innerHTML = 'Try again'; + } else { + content.className = 'exercise'; + message.innerHTML = ''; + button.innerHTML = 'Show results'; + } + } + + function checkResult() { + var i, j, node = document.createElement('div'); + node.innerHTML = input.value; + data = { pass : 0, fail : 0, warning : 0 }; + + var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); + + if (userAbbr.length === 0) { + alert("You haven't marked any abbreviations (there are " + abbr.length + " to find)."); + return false; + } + + for (i in abbr) { + var txt = abbr[i].textContent; + var fail = true; + + for (j in userAbbr) { + var userText = userAbbr[j].textContent; + + if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { + fail = false; + if (userAbbr[j].title) { + data.pass += 1; + abbr[i].className = 'ok'; + } else { + data.warning += 1; + abbr[i].className = 'warning'; + } + } + } + + if (fail) { + data.fail += 1; + abbr[i].className = 'fail'; + } + } + + return true; + } + + button.addEventListener('click', toggleResult); +}); +</pre> +</div> + +<p>{{ EmbedLiveSample('Exercise','100%',220) }}</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li>{{HTMLElement("abbr")}} 참고 문서.</li> +</ul> diff --git a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html new file mode 100644 index 0000000000..d4abd5da57 --- /dev/null +++ b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html @@ -0,0 +1,82 @@ +--- +title: 데이터 속성 사용하기 +slug: Learn/HTML/Howto/데이터_속성_사용하기 +tags: + - HTML + - HTML5 + - 가이드 + - 예제 + - 웹 + - 전용 데이터 속성 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 속성</a>은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.</p> + +<h2 id="HTML_문법">HTML 문법</h2> + +<p>문법은 간단합니다. 어느 엘리멘트에나 <code>data-</code>로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 <code>data</code> 사용법이 있습니다:</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_에서_접근하기">JavaScript 에서 접근하기</h2> + +<p><a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.: {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.</p> + +<p><code>dataset</code> 객체를 통해 <code>data</code> 속성을 가져오기 위해서는 속성 이름의 <code>data-</code> 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) </p> + +<pre class="brush: js">var article = document.getElementById('electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 <code>article.dataset.columns = 5</code>와 같이 설정하면 해당 속성을 <code>"5"</code>로 변경할 것입니다.</p> + +<h2 id="CSS_에서_접근하기">CSS 에서 접근하기</h2> + +<p>데이터 속성은 순 HTML 속성이기 때문에 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">생성된 content</a> 를 사용하면 됩니다.:</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>CSS의 <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a>도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p><a href="http://jsbin.com/ujiday/2/edit">이 JSBin 예시</a>에서 이들이 함께 작동하는 것을 볼 수 있습니다. </p> + +<p>데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">이 screencast</a> 를 확인하세요. (<a href="http://jsbin.com/atawaz/3/edit">JSBin 예시</a>).</p> + +<p><span style="line-height: 16.7999992370605px;">데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.</span></p> + +<h2 id="문제점">문제점</h2> + +<p>보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.</p> + +<p>고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 <a href="http://caniuse.com/#feat=dataset"><code>dataset</code>을 지원하지 않습니다</a>. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 <a href="http://jsperf.com/data-dataset">데이터 속성 읽기의 성능</a>은 저조합니다.</p> + +<p>하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.</p> + +<p>Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li>Custom attributes are also supported in SVG 2; see {{domxref("SVGElement.dataset")}} and {{SVGAttr("data-*")}} for more information.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> |