diff options
Diffstat (limited to 'files/ko/conflicting/learn/html/introduction_to_html')
| -rw-r--r-- | files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..8a1d0cb625 --- /dev/null +++ b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,268 @@ +--- +title: 약자 표시 및 이해시키는 방법 +slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +tags: + - HTML + - 초보 +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +--- +<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> |