---
title: <abbr>
slug: Web/HTML/Element/abbr
tags:
  - Element
  - HTML
  - HTML text-level semantics
  - Reference
  - Web
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;abbr&gt;</code> 요소</strong>는 준말 또는 머리글자를 나타냅니다.</span> 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. <code>title</code> 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>



<table class="htmlelt">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a></td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">암시적 ARIA 역할</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>모두</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다. 단, 다른 요소와 달리 <code>&lt;abbr&gt;</code> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, <code>title</code>은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 <code>title</code>의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.</p>

<p>각각의 <code>&lt;abbr&gt;</code> 요소는 서로 독립적입니다. 하나의 요소에 <code>title</code>을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.</p>

<h2 id="사용_일람">사용 일람</h2>

<h3 id="많이_쓰이는_곳">많이 쓰이는 곳</h3>

<p>당연히 모든 준말을 <code>&lt;abbr&gt;</code>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.</p>

<ul>
 <li>사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 {{htmlattrxref("title")}} 특성을 지정한 <code>&lt;abbr&gt;</code> 요소를 사용하세요.</li>
 <li>독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 <code>&lt;abbr&gt;</code>과 함께 <code>title</code> 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.</li>
 <li>준말임을 명시적으로 나타내야 할 경우 <code>&lt;abbr&gt;</code> 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.</li>
 <li><code>&lt;abbr&gt;</code>을 {{HTMLElement("dfn")}}과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 {{anch("준말 정의하기")}}을 참고하세요.</li>
</ul>

<h3 id="문법_고려사항">문법 고려사항</h3>

<p>수량이 문법에 영향을 미치는 언어(one apple vs. two apple<strong>s</strong>)의 경우, <code>&lt;abbr&gt;</code> 요소의 텍스트와 <code>title</code> 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.</p>

<h2 id="기본_스타일">기본 스타일</h2>

<p><code>&lt;abbr&gt;</code>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}<code>: inline</code>)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.</p>

<ul>
 <li>Internet Explorer 등 일부 브라우저는 {{HTMLElement("span")}} 요소와 동일하게 그립니다.</li>
 <li>Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.</li>
 <li>몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS {{cssxref('font-variant')}}를 <code>none</code>으로 설정하세요.</li>
</ul>

<h2 id="예제">예제</h2>

<h3 id="준말임을_나타내기">준말임을 나타내기</h3>

<p>설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <code>&lt;abbr&gt;</code>을 다른 특성 없이 사용하세요.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Using &lt;abbr&gt;HTML&lt;/abbr&gt; is fun and easy!&lt;/p&gt;</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample("준말임을_나타내기")}}</p>

<h3 id="준말_스타일링">준말 스타일링</h3>

<p>CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Using &lt;abbr&gt;CSS&lt;/abbr&gt;, you can style your abbreviations!&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">abbr {
  font-variant: all-small-caps;
}</pre>

<h4 id="결과_2">결과</h4>

<p>{{EmbedLiveSample("준말_스타일링")}}</p>

<h3 id="펼친_형태_보여주기">펼친 형태 보여주기</h3>

<p>{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Ashok's joke made me &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt; big
time.&lt;/p&gt;</pre>

<h4 id="결과_3">결과</h4>

<p>{{EmbedLiveSample("펼친_형태_보여주기")}}</p>

<h3 id="준말_정의하기">준말 정의하기</h3>

<p><code>&lt;abbr&gt;</code>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
&lt;/dfn&gt; is a markup language used to create the semantics and structure
of a web page.&lt;/p&gt;

&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.&lt;/p&gt;</pre>

<h4 id="결과_4">결과</h4>

<p>{{EmbedLiveSample("준말_정의하기", 600, 120)}}</p>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.</p>

<h4 id="예제_2">예제</h4>

<pre class="brush: html notranslate">&lt;p&gt;JavaScript Object Notation(&lt;abbr&gt;JSON&lt;/abbr&gt;)은 경량의 데이터 교환 형식입니다.&lt;/p&gt;
</pre>

<p>무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.abbr")}}</p>