Reference/HTML
<abbr> 태그는 줄임말이나 머리글자를 표현하는데 사용합니다.
<abbr>
<abbr> 태그는 줄임말이나 머리글자를 표현하는데 사용합니다. abbr은 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. title 속성을 사용하여 전체 단어를 지정 할 수 있으며, 용어에 대한 정의를 나타내는 <dfn> 태그와 같이 사용하여 설정할 수 있습니다.
| 특징 | 설명 |
|---|---|
| 요소 | 인라인 구조(Inline Element) |
| 닫는 태그 | 적용 |
| 버전 | HTML4 |
| 시각적 표현 | 점선(브라우저마다 틀림) 및 툴팁 |
| 사용성 | ★★☆☆☆ |
정의(Definition)
- <abbr> 태그는 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다.
- <abbr> 태그를 사용할 경우 번역 시스템이나 검색 시스템에게 유용한 정보를 제공합니다.
- <abbr> 태그는 title 속성을 사용하여 전체 단어를 지정 할 수 있습니다.
- <abbr> 태그는 용어에 대한 정의를 나타내는 <dfn> 태그와 같이 사용하여 정의할 수 있습니다.
- <abbr> 태그에 아이디를 설정하여, <a> 링크로 참조할 수 있습니다.
- <abbr> 태그는 시각적으로는 점선이 표시되지만 브라우저마다 표시가 다를 수 있습니다.
- <abbr> 태그는 title 속성을 설정할 경우 마우스 오버시 툴팁 형식으로 약어가 표시됩니다.
접근성(Accessibility)
- HTML4에서는 약어를 표현할 때 <acronym>를 사용하였지만, HTML5에서는 약어를 표현할 때 <abbr>를 사용합니다.
예제1(Sample)
줄임말이나 머리글자를 표현하는데 설정합니다.
지금은 HTML과 CSS를 공부하고 있습니다.
HTML이란? 웹 페이지를 볼 수 있는 언어입니다.
CSS이란? 웹 페이지를 꾸며주는 언어입니다.
HTML
CSS
SCRIPT
<div>
<p>지금은 HTML과 CSS를 공부하고 있습니다.</p>
<p><abbr>HTML</abbr>이란? 웹 페이지를 볼 수 있는 언어입니다. </p>
<p><abbr>CSS</abbr>이란? 웹 페이지를 꾸며주는 언어입니다. </p>
</div>
abbr {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
예제2(Sample)
줄임말이나 머리글자는 tilte 속성과 같이 사용할 수 있습니다.
지금은 HTML과 CSS를 공부하고 있습니다.
HTML이란? 웹 페이지를 볼 수 있는 언어입니다.
CSS이란? 웹 페이지를 꾸며주는 언어입니다.
HTML
CSS
SCRIPT
<div>
<p>지금은 HTML과 CSS를 공부하고 있습니다.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr>이란? 웹 페이지를 볼 수 있는 언어입니다. </p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>이란? 웹 페이지를 꾸며주는 언어입니다. </p>
</div>
abbr {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
예제3(Sample)
줄임말이나 머리글자는 <dfn> 태그와 같이 사용할 수 있습니다.
지금은 HTML과 CSS를 공부하고 있습니다.
HTML이란? 웹 페이지를 볼 수 있는 언어입니다.
CSS이란? 웹 페이지를 꾸며주는 언어입니다.
HTML
CSS
SCRIPT
<div>
<p>지금은 HTML과 CSS를 공부하고 있습니다.</p>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>이란? 웹 페이지를 볼 수 있는 언어입니다. </p>
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>이란? 웹 페이지를 꾸며주는 언어입니다. </p>
</div>
abbr {
color: #FF4B4C;
border-bottom: 1px solid #FF4B4C;
}
//Javascript none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <abbr> | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
댓글