<abbr>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <abbr>
요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title
을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title
속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.
시도해보기
콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 구문 콘텐츠 |
태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
암시적 ARIA 역할 | 대응하는 역할 없음 |
가능한 ARIA 역할 | 모두 |
DOM 인터페이스 | HTMLElement |
특성
사용 일람
많이 쓰이는 곳
당연히 모든 준말을 <abbr>
로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.
- 사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한
title
특성을 지정한<abbr>
요소를 사용하세요. - 독자에게 익숙하지 않을 수 있는 준말을 사용할 경우
<abbr>
과 함께title
특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요. - 준말임을 명시적으로 나타내야 할 경우
<abbr>
요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다. <abbr>
을<dfn>
과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 준말 정의하기을 참고하세요.
문법 고려사항
수량이 문법에 영향을 미치는 언어(one apple vs. two apples)의 경우, <abbr>
요소의 텍스트와 title
특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.
기본 스타일
<abbr>
의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인(display
: inline
)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.
- Internet Explorer 등 일부 브라우저는
<span>
요소와 동일하게 그립니다. - Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.
- 몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS
font-variant
를none
으로 설정하세요.
예제
준말임을 나타내기
설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <abbr>
을 다른 특성 없이 사용하세요.
HTML
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
결과
준말 스타일링
CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.
HTML
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
CSS
abbr {
font-variant: all-small-caps;
}
결과
펼친 형태 보여주기
title
특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.
HTML
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
결과
준말 정의하기
<abbr>
과 <dfn>
을 사용하면 준말을 정식으로 정의할 수 있습니다.
HTML
<p>
<dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
markup language used to create the semantics and structure of a web page.
</p>
<p>
A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
is a document that outlines in detail how a technology or API is intended to
function and how it is accessed.
</p>
결과
접근성 고려사항
준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.
예제
<p>
JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.
</p>
무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.
명세
Specification |
---|
HTML Standard # the-abbr-element |
브라우저 호환성
BCD tables only load in the browser