path: root/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html

---
title: Advanced text formatting
slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">텍스트 서식에 있어서  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 이야기 하지 않은 수많은 요소들이 있습니다. 이 글에서 설명하는 요소들은 비교적 많이 알려져 있지않지만 여전히 유용합니다. (그리고 이것은 완전한 목록이 아닙니다.). 이 글에서 여러분은 인용구, 서술문, 컴퓨터 코드 및 관력 텍스트, 첨자, 위첨자, 연락처 정보 등을 표시하는 방법에 대해 알아봅시다.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">요구 기술:</th>
   <td><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a> 에 설명된 기본적인 HTML 숙련도. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 설명하는 텍스트 포맷팅에 대한 지식.</td>
  </tr>
  <tr>
   <th scope="row">목표:</th>
   <td>
    <p>비교적 알려지지 않은 HTML 요소들을 사용하여 고급 시맨틱 기능을 사용하여 HTML을 구성하는 방법을 학습합니다.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Description_lists">Description lists</h2>

<p><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">mark up basic lists</a> 를 볼 수 있습니다. 하지만 해당 글에는 여러분이 앞으로 종종 마주할 세 번째 리스트 타입인 <strong>description lists</strong>에 대해선 언급하지 않았습니다. 이 리스트의 목적은 용어 및 정의, 질문 및 답변과 같은 일련의 항목 및 관련 설명을 표시하는 것입니다.  아래의 예시를 살펴봅시다.</p>

<pre class="notranslate">soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information</pre>

<p>Description lists 는 다른 타입의 리스트와 다르게 {{htmlelement("dl")}} 태그를 사용합니다. 용어, 질문과 같은 상위 항목은 {{htmlelement("dt")}} (description term) 요소를 사용하고,\ 정의, 답변과 같은 하위 항목은 {{htmlelement("dd")}} (description definition) 요소를 사용합니다. 이해를 돕기위해 아래의 마크업 예시가 준비되어 있습니다.</p>

<pre class="brush: html notranslate">&lt;dl&gt;
  &lt;dt&gt;soliloquy&lt;/dt&gt;
  &lt;dd&gt;In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)&lt;/dd&gt;
  &lt;dt&gt;monologue&lt;/dt&gt;
  &lt;dd&gt;In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.&lt;/dd&gt;
  &lt;dt&gt;aside&lt;/dt&gt;
  &lt;dd&gt;In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.&lt;/dd&gt;
&lt;/dl&gt;</pre>

<p>브라우저에서 제공하는 기본 스타일에 의해서 정의, 답변과 같은 하위 항목에 대해서 들여쓰기가 적용됩니다.  현재 보고계시는 description list 는 MDN에서 제공하는 스타일이 적용되어 있습니다. 이는 브라우저에서 제공하는 기본 스타일과 매우 유사하게 정의 되어 있습니다만, 추가적으로 정의된 스타일입니다.</p>

<dl>
 <dt>soliloquy</dt>
 <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
 <dt>monologue</dt>
 <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
 <dt>aside</dt>
 <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
 <dt></dt>
</dl>

<p>아래의 예시와 같이 하나의 <code>&lt;dt&gt;</code> 에는 여러개의 <code>&lt;dd&gt;</code> 가 존재할 수 있습니다. </p>

<pre class="notranslate">&lt;dl&gt;
  &lt;dt&gt;aside&lt;/dt&gt;
  &lt;dd&gt;In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.&lt;/dd&gt;
  &lt;dd&gt;In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)&lt;/dd&gt;
&lt;/dl&gt;</pre>

<dl>
 <dt>aside</dt>
 <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
 <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
 <dt></dt>
</dl>

<h3 id="추가학습_일련의_정의_표시">추가학습: 일련의 정의 표시</h3>

<p>description list 를 직접 시도해볼 시간입니다. input 필드에 요소들을 추가하여 output 필드에 description list 로 표시되도록 하십시오. 원하시는 경우에 추가적인 요소들을 추가하셔도 좋습니다.</p>

<p>실수를 하셨을 경우에는, <em>Reset </em>버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 <em>Show solution</em> 버튼을 통해서 해답을 보실 수 있습니다.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;Bacon
The glue that binds the world together.
Eggs
The glue that binds the cake together.
Coffee
The drink that gets the world running in the morning.
A light brown color.&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;dl&gt;\n  &lt;dt&gt;Bacon&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the world together.&lt;/dd&gt;\n  &lt;dt&gt;Eggs&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the cake together.&lt;/dd&gt;\n  &lt;dt&gt;Coffee&lt;/dt&gt;\n  &lt;dd&gt;The drink that gets the world running in the morning.&lt;/dd&gt;\n  &lt;dd&gt;A light brown color.&lt;/dd&gt;\n&lt;/dl&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>

<h2 id="인용구">인용구</h2>

<p>HTML에는 인용구 표시에 사용할 수 있는 요소가 존재합니다. 해당 요소는 블록 또는 인라인 요소인지에 따라서 다르게 표시됩니다.</p>

<h3 id="Blockquotes">Blockquotes</h3>

<p>블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트등)이 인용된 경우, 이를 나타내는 <code>&lt;blockquote&gt;</code>요소로 감싸야합니다. 그리고 <code>cite</code> 속성에 출처를 표기합니다. 아래의 예시는 MDN <code>&lt;blockquote&gt;</code> 요소 페이지를 인용한 것 입니다.</p>

<pre class="brush: html notranslate">&lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;</pre>

<p>이것을 block quote 로 변경하기 위해서 아래와 같이 할 수 있습니다.</p>

<pre class="brush: html notranslate">&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
&lt;/blockquote&gt;</pre>

<p>브라우저 기본 스타일은 인용구를 표현할 때, 들여쓰기 된 단락으로 나타냅니다. MDN은 추가적인 스타일링과 함께 이를 나타냅니다.</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<h3 id="Inline_quotations">Inline quotations</h3>

<p>인라인 인용구는 <code>&lt;q&gt;</code> 요소를 사용한다는 점만 제외하면 블럭 인용구와 동일하게 동작합니다. 아래의 마크업 예시는 MDN <code>&lt;q&gt;</code> 페이지의 인용문을 포함합니다.</p>

<pre class="brush: html notranslate">&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;intended
for short quotations that don't require paragraph breaks.&lt;/q&gt;&lt;/p&gt;</pre>

<p>브라우저 기본 스타일은 인라인 인용구를 따옴표로 묶은 일반 텍스트로 표현합니다.</p>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p>

<h3 id="Citations">Citations</h3>

<p>{{htmlattrxref("cite","blockquote")}}요소의 컨텐츠는 유용하게 보이지만 안타깝게도 브라우저, 스크린 리더 등은 이를 이용해서 할 수 있는 것이 많지 않습니다. 브라우저는  javascript나 CSS로 여러분이 직접 해결책을 제시하지 않는다면 <code>cite</code>  컨텐츠를 화면에 표시할 방법이 없습니다. 페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 <code>&lt;cite&gt;</code> 요소를 사용하는 것이 더 좋습니다. 이는 이름 그대로 출처를 포함하기 위해서 사용됩니다. — <code>&lt;cite&gt;</code> 요소 안에 있는 출처에 대한 링크를 연결할 수 있습니다.</p>

<pre class="brush: html notranslate">&lt;p&gt;According to the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
&lt;cite&gt;MDN blockquote page&lt;/cite&gt;&lt;/a&gt;:
&lt;/p&gt;

&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;intended
for short quotations that don't require paragraph breaks.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
&lt;cite&gt;MDN q page&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>

<p>Citations are styled in italic font by default. You can see this code at work in our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> example.</p>

<h3 id="추가학습_누가_말했어">추가학습: 누가 말했어?</h3>

<p>다른 실습 과제를 할 시간입니다! 이번 예제에서는 아래 항목을 수행하고자 합니다.</p>

<ol>
 <li>중간에 위치한 문단을 <code>cite</code> 속성을 지닌 블럭 인용구로 변경하십시오.</li>
 <li>세 번째 문단의 일부를 <code>cite</code> 속성을 지닌 인라인 인용구로 변경하십시오.</li>
 <li>각 링크에 &lt;cite&gt; 요소를 포함시키십시오.</li>
</ol>

<p>적절한 출처를 찾기 위해서 온라인 검색을 이용하십시오.</p>

<p>실수를 하셨을 경우에는, <em>Reset </em>버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 <em>Show solution</em> 버튼을 통해서 해답을 보실 수 있습니다.</p>

<div class="hidden">
<h6 id="Playable_code_2">Playable code</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;p&gt;Hello and welcome to my motivation page. As Confucius once said:&lt;/p&gt;

&lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;

&lt;p&gt;I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
(as mentioned in Affirmations for Positive Thinking.)&lt;/p&gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;p&gt;Hello and welcome to my motivation page. As &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Confucius&lt;/cite&gt;&lt;/a&gt; once said:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n  &lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;I also love the concept of positive thinking, and &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;The Need To Eliminate Negative Self Talk&lt;/q&gt; (as mentioned in &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>

<h2 id="약어">약어</h2>

<p>웹을 둘러 볼 때 <code>&lt;abbr&gt;</code> 요소를 꽤 많이 볼 수 있습니다. 이는 머리 글자 또는 약어를 나타내는데 사용됩니다. title 속성을 통해 원래의 용어를 나태날 수 있습니다. 몇가지 예제를 살펴 보겠습니다.</p>

<pre class="notranslate">&lt;p&gt;We use &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; to structure our web documents.&lt;/p&gt;

&lt;p&gt;I think &lt;abbr title="Reverend"&gt;Rev.&lt;/abbr&gt; Green did it in the kitchen with the chainsaw.&lt;/p&gt;</pre>

<p>위의 코드는 아래와 같이 보입니다. 용어의 전체 뜻은 마우스를 올려 놓으면 툴팁에 표시됩니다.</p>

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>

<div class="note">
<p><strong>Note</strong>: 약어를 나타내기 위해 &lt;abbr&gt; 과 동일하게 사용할 수 있는 <code>&lt;acronym&gt;</code> 가 존재합니다. 이는 사용중지 되었으며 브라우저에서도 호환되지 않는 경우가 있습니다. 따라서 <code>&lt;abbr&gt;</code> 을 대신 사용하는 것을 추천드립니다.</p>
</div>

<h3 id="추가학습_약어_만들기">추가학습: 약어 만들기</h3>

<p>아래의 간단한 실습 과제를 통해 약어 사용에 대한 학습을 하고자 합니다. 아래의 샘플을 그대로 사용하시거나 여러분의 샘플로 교체 하실 수 있습니다. </p>

<div class="hidden">
<h6 id="Playable_code_3">Playable code</h6>

<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
&lt;textarea id="code" class="input"&gt;&lt;p&gt;NASA sure does some exciting work.&lt;/p&gt;&lt;/textarea&gt;
&lt;h2&gt;Output&lt;/h2&gt;
&lt;div class="output"&gt;&lt;/div&gt;
&lt;div class="controls"&gt;
  &lt;input id="reset" type="button" value="Reset" /&gt;
  &lt;input id="solution" type="button" value="Show solution" /&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 5em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

button {
  padding: 10px 10px 10px 0;
}
</pre>

<pre class="brush: js notranslate">var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

solution.addEventListener("click", function() {
textarea.value = '&lt;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; sure does some exciting work.&lt;/p&gt;';
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p>

<h2 id="연락처_세부_사항_표시">연락처 세부 사항 표시</h2>

<p>HTML 에서 <code>&lt;address&gt;</code> 태그를 이용해서 연락처 세부 정보를 표시할 수 있습니다. 이것은 단순히 연락처 정보를 표시하는 것입니다.</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
&lt;/address&gt;</pre>

<p>그러나 기억해야 할 것은 &lt;address&gt; 요소는 HTML 문서를 작성한 사람의 연락처 정보를 표시하기 위해서 사용되어야 한다는 것입니다. 따라서 Chris 가 마크 업이 표시된 문서를 작성한 경우에만 위의 예제가 정상입니다. 아래와 같은 예제도 괜찮습니다.</p>

<pre class="brush: html notranslate">&lt;address&gt;
  &lt;p&gt;Page written by &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
&lt;/address&gt;</pre>

<h2 id="위첨자와_아래_첨자">위첨자와 아래 첨자</h2>

<p>여러분은 종종 날짜, 화학 공식 및 수학 방적식과 같은 항목을 표시 할 때 올바른 의미를 갖도록 위첨자 아래 첨자를 사용해야 할 수도 있습니다. <code>&lt;sup&gt;</code> 과 <code>&lt;sub&gt;</code> 요소들은 이를 위해 사용할 수 있습니다.</p>

<pre class="brush: html notranslate">&lt;p&gt;My birthday is on the 25&lt;sup&gt;th&lt;/sup&gt; of May 2001.&lt;/p&gt;
&lt;p&gt;Caffeine's chemical formula is C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; is 9, x must equal 3 or -3.&lt;/p&gt;</pre>

<p>표시될 결과는 아래와 같습니다.</p>

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>

<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>

<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

<h2 id="컴퓨터_코드를_나타내기">컴퓨터 코드를 나타내기</h2>

<p>HTML 을 이용해 컴퓨터 코드를 나타낼 때 아래와 같은 많은 요소들을 사용할 수 있습니다.</p>

<ul>
 <li>{{htmlelement("code")}}: 일반적인 컴퓨터 코드를 표시합니다.</li>
 <li>{{htmlelement("pre")}}: 공백(일반적으로 코드 블록)을 유지하기 위해 사용합니다. 택스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않습니다. 그러나 <code>&lt;pre&gt;&lt;/pre&gt;</code> 태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됩니다.</li>
 <li>{{htmlelement("var")}}: 변수이름을 특별하게 표시합니다.</li>
 <li>{{htmlelement("kbd")}}: 컴퓨터에 입력 된 키보드 (및 기타 유형) 입력을 표시합니다.</li>
 <li>{{htmlelement("samp")}}: 컴퓨터 프로그램의 출력을 표시합니다.</li>
</ul>

<p>몇 가지 예를 살펴 보겠습니다. 이 예제들을 통해서 자유롭게 학습해보십시오. (다른 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> 샘플 파일의 사본을 사용하실 수 있습니다).</p>

<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You shouldn't use presentational elements like &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;In the above JavaScript example, &lt;var&gt;para&lt;/var&gt; represents a paragraph element.&lt;/p&gt;


&lt;p&gt;Select all the text with &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;

&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>

<p>위의 코드는 아래와 같이 표시됩니다.</p>

<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>

<h2 id="시간과_날짜_표시">시간과 날짜 표시</h2>

<p>HTML 은 기계가 읽을 수 있는 형식(machine-readable)으로 시간과 날짜를 표시하기 위한 <code>&lt;time&gt;</code> 요소를 제공합니다. 예를 들면 아래와 같습니다.</p>

<pre class="brush: html notranslate">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>

<p>이것이 왜 유용할까요? 인간이 날짜를 기록하는 방법에는 여러 가지가 있습니다. 위 날짜는 아래와 같이 나타낼 수 있습니다.</p>

<ul>
 <li>20 January 2016</li>
 <li>20th January 2016</li>
 <li>Jan 20 2016</li>
 <li>20/06/16</li>
 <li>06/20/16</li>
 <li>The 20th of next month</li>
 <li><span lang="fr">20e Janvier 2016</span></li>
 <li><span lang="ja">2016年1月20日</span></li>
 <li>And so on</li>
</ul>

<p>그러나 이러한 다른 형식들은 컴퓨터가 쉽게 인식할 수 없습니다. 페이지의 모든 이벤트 날짜를 자동으로 인식하여 캘린더에 삽입하려면 어떻게 해야합니까? <code>&lt;time&gt;</code> 요소를 사용하면 기계가 읽을 수 있는 명확한 시간 / 날짜를 첨부 할 수 있습니다.</p>

<p>아래의 기본 예지는 간단한 기계 판독 가능 날짜를 제공하지만 사용 가능한 다른 많은 옵션들이 존재합니다.</p>

<pre class="brush: html notranslate">&lt;!-- Standard simple date --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Just year and month --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Just month and day --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Just time, hours and minutes --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- You can do seconds and milliseconds too! --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Date and time --&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Date and time with timezone offset--&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 January 2016 is 8.30pm in France&lt;/<span class="pl-ent">time</span>&gt;
&lt;!-- Calling out a specific week number--&gt;
&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;The fourth week of 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>

<h2 id="요약">요약</h2>

<p>HTML 텍스트 시맨틱에 대한 스터디가 끝났습니다. 이 과정에서 학습한 내용이 HTML 텍스트 요소의 전부가 아님을 명심하십시오. 우리는 필수 요소를 위주로 다루고 싶었고, 여러분이 일반적인 상황에서 보거나 적어도 흥미롭게 다가올 수 있는 더 일반적인 것들 중 일부를 다루려고 했습니다. 더 많은 HTML 요소를 찾으려면 <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> 를 살펴보십시오.(<a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> 섹션은 시작하기에 좋은 장소입니다.). 다음 문서에서는 HTML 문서의 다른 부분을 구성하는 데 사용할 HTML 요소를 살펴 보겠습니다.</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>