코드랩 레퍼런스

<abbr> 본문

HTML

<abbr>

webstoryboy 2016. 5. 24. 10:08
<abbr> 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다.
특징 설명
콘텐츠 카테고리 Flow Content, Phrasing Content, Palpable Content
콘텐츠 속성 Global Attributes, Event Attributes
콘텐츠 요소 Inline Element
닫는 태그 Closing (<abbr> ~ </abbr>)
버전 HTML4
시각적 표현 점선(브라우저마다 틀림) 및 툴팁

Definition

  • <abbr> 태그는 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다.
  • 약어를 사용할 경우 번역시스템이나 검색시스템에게 유용한 정보를 제공합니다.
  • <abbr> 태그는 title 속성을 사용하여 전체 단어를 지정합니다.
  • <dfn> 태그와 같이 사용할 수 있습니다.
  • <abbr> 태그에 아이디를 설정하여, <a> 링크로 참조할 수 있습니다.
  • 시각적으로는 점선이 표시되지만 브라우저마다 표시가 다릅니다. (오페라, 크롬, 파이어폭스는 점선 표시됨)
  • title 속성을 설정할 경우 마우스 오버시 툴팁형식으로 약어가 표시됩니다.

CrossBroswing

  • HTML4에서는 약어에 대해서는 <acronym>를 사용하고, HTML5에서는 약어를 <abbr로 사용합니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
abbr

Sample

abbr 태그

  • HTML은 웹 페이지를 만들기 위한 언어입니다.
  • HTML의 HT(Hyper Text)는 문서와 문서를 연결한다를 의미합니다.
  • HTML의 M(Markup)는 마크업(태그)을 의미합니다.
  • HTML의 L(Language)는 언어를 의미합니다.
  • HTML은 문서와 문서로 연결된 태그 언어를 말합니다.

  • 1은 abbr 태그는 title 속성과 같이 사용하여, 약어를 설명합니다.
  • 2은 약어가 반복될 경우 title을 반복적으로 사용할 필요는 없습니다.
  • 3은 dfn 태그와 같이 사용할 수 있습니다.
  • 4은 abbr 태그에 아이디를 설정합니다.
  • 5은 용어의 사용이 반복된다면, 링크(설정한 아이디)로 연결하여 설명을 참조 할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Dfn</title>
</head>
<body>
<h1>abbr 태그</h1>
<div>
	<ul>
		<li><abbr title="HyperText Markup Language">HTML</abbr>은 웹 페이지를 만들기 위한 언어입니다.</li>
		<li><abbr>HTML</abbr>의 HT(Hyper Text)는 문서와 문서를 연결한다를 의미합니다.</li>
		<li><dfn><abbr>HTML</abbr></dfn>의 M(Markup)는 마크업(태그)을 의미합니다.</li>
		<li><abbr id="abbr">HTML</abbr>의 L(Language)는 언어를 의미합니다.</li>
		<li><a href="#abbr"><abbr>HTML</abbr></a>은 문서와 문서로 연결된 태그 언어를 말합니다.</li>
	</ul>
</div>
<hr>
<div>
	<ul>
		<li>1은 abbr 태그는 title 속성과 같이 사용하여, 약어를 설명합니다.</li>
		<li>2은 약어가 반복될 경우 title을 반복적으로 사용할 필요는 없습니다.</li>
		<li>3은 dfn 태그와 같이 사용할 수 있습니다.</li>
		<li>4은 abbr 태그에 아이디를 설정합니다.</li>
		<li>5은 용어의 사용이 반복된다면, 링크(설정한 아이디)로 연결하여 설명을 참조 할 수 있습니다.</li>
	</ul>
</div>
</body>
</html>

Ad

Comments