설명
The HTML Abbreviation Element (<abbr>) represents an abbreviation and optionally provides a full description for it. If present, the title attribute must contain this full description and nothing else.
<abbr>는 약자를 쓸 때 사용한다. 이때 원본을 표시할 수도 있다. 원본이 있는 경우, 원본을 title 속성값으로 넣어준다.
HTML 문서에 '생코'라는 단어에 밑줄이 점선으로 그어져 있고, 여기에 마우스를 갖다 대면 노란 툴팁에 '생활코딩'이라고 나오는 경우가 있다. 이런 경우는 원본인 '생활코딩'의 약자 '생코'를 사용할 때, 원래의 표현을 툴팁에 보여주도록 <abbr >태그를 사용한 것이다. 이렇게 <abbr> 태그는 약자를 사용할 때 사용하는 태그이다. 이때 '생활코딩'이라는 원본은 title 속성값으로 들어가 있다. title 값을 넣는 것은 필수는 아니고 옵션이다.
참고 : When present, the grammatical number of the text in the title attribute should match that of the content of the <abbr> element. This is also the case in languages with more than two grammatical numbers (for example, Arabic not only has singular and plural categories, but also a dual category).
title 속성값에 해당하는 부분은 <abbr>태그 안에 쓰여있는 내용과 그 문법요소의 수가 같아야 한다. 해당 언어에 명사의 종류가 단수, 복수 외에 다른 종류가 있으면 마찬가지다. (예를 들어 아랍어에는 단수, 복수 외에 dual category(요거 어떤 건지 모르겠음. 궁금도 하고.. 표현도 알아봐야~ ) 라는 것이 있다.)
Usage Context (요기는 번역하지 않고 패스하기~)
| Permitted content | Flow content,Phrasing content |
| Tag omission | None, both the start tag and the end tag are mandatory |
| Permitted parent elements | Phrasing content |
| Normative document | HTML5, section 4.6.8( HTML 4 : HTML4.01, section 9.2.1) |
속성
This element has no other attributes than the global attributes, common to all elements. Note that the title attribute has a specific semantic meaning: it represents the full description of the abbreviation, often, but not necessarily, presented in a tooltip by the user agents.
<abbr> 요소는 모든 요소가 가지는 전역속성 말고는 별다른 속성이 있지 않다. title 속성은 특정한 semantic meaning을 가진다는 점을 주의해야 한다. (이 점을 왜 주의해야 하는건지 모르겠어. semantic meaning과 대비되는 건 뭐지? 모양..을 나타내는 부분과 대비되는 것을 semantic meaning이라고 하는 듯..) title은 축약형의 원본 표현을 가리키며, 보통은 인터넷 사용자가 마우스를 갖다 대면 툴팁에 나타난다. 툴팁이 나타나는 것은 필수는 아니고 옵션이다.
기본 스타일
The purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another:
<abbr> 요소를 사용하는 목적은 순전히 웹페이지를 작성자의 편의를 위해서이다. 그리고 모든 브라우저에서는 따로 모양을 지정하지 않으면 <abbr> 요소를 인라인 방식(인라인 방식.. 에 대한 설명으로 링크해주면 좋을텐데..)으로 보여준다. 물론 브라우저에 따라서 기본으로 보여주는 모양은 달라질 수 있다. (뒷 부분 의미가 잘 이해 안 됨..아하.. 기본으로 abbr 부분을 브라우저에서 보여주는 모양이 브라우저마다 다르다는 의미인 듯..)
-
Some browsers, like IE, do not style it differently than a
<span>element. - Opera, Firefox, and some others add a dotted underline to the content of the element.
-
A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the CSS takes care of this case.
- IE를 포함한 몇몇 브라우저는 <span> 에 적용하는 스타일을 똑같이 <abbr>에도 적용한다.
- 오페라와 파이어폭스와 몇몇 다른 브라우저에서는 <abbr>안에 있는 내용 밑에 점선을 그어준다.
- 몇몇 브라우저에서는 점선을 긋고, 작은 캡으로 씌운다. 이런 스타일을 적용하지 않으려면 font-variant: none이라고 CSS에 추가해주면 된다.
It is therefore strongly recommended that web authors not rely on the default styling. Note that this element is not supported by IE prior to IE7. As these IE versions don't allow styling for unknown elements, the following script is necessary to allow it:
따라서 웹페이지 저작자는 디폴트 스타일에 의존하지 않는 편이 낫다. 또한 <abbr>은 IE7 이전 버전의 IE에서는 지원되지 않는다. 그리고 이전 버전의 IE 버전은 브라우저가 모르는 엘리먼트에 대해서 스타일 적용을 허용하지 않기 때문에, 스타일을 적용하려면 다음과 같은 스크립트를 써주어야 한다. :
<!--[if lte IE 6]> //요 부분은 IE6과 그 이하 버전..을 의미할 듯.. lte가 모징? <script> document.createElement("abbr"); // abbr이라는 엘리먼트를 이렇게 생성해주는 것이군. </script> <![endif]-->
DOM Interface
This element implements the HTMLElement interface.
<abbr>요소는 HTMLElement 인터페이스를 구현한다.
예제
<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p> <br /> <p><abbr title="생활코딩">생코</abbr>에는 다양한 봇들이 있다. <br />자자, 아는 봇의 이름을 축약형을 만들고, abbr 태그를 씌워서 댓글로 달아봅시다~ </p>
예제 출력화면
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 2 or earlier | 1 (1.7) or earlier | 7.0 | 1.3 or earlier | 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 지원 | 지원 | 지원 | 지원 |
