[HTML] abbr 태그 문법 및 스타일링

728x90

목 차

• 1. abbr 태그란?
• 2. 기본 개념
• 3. 기본 문법
• 4. 사용 예제
  • 4-1. 단순 약어
  • 4-2. 두문자어(Acronym)
• 5. 접근성 향상
• 6. CSS 스타일링
• 7. 중첩 사용
• 8. 호환성

반응형

 

1. abbr 태그란?

HTML의 <abbr> 태그는 "약어(abbreviation)"나 "두문자어(acronym)"를 정의할 때 사용됩니다. 이 태그는 사용자가 약어의 의미를 쉽게 이해할 수 있도록 도와주는 역할을 하며, 접근성을 향상시킬 수 있습니다.

 

---

 

2. 기본 개념

• <abbr> 태그로 표시된 약어나 두문자어에는 보통 title 속성을 추가하여 그 의미를 설명합니다.
• 브라우저는 title 속성을 통해 추가 정보를 제공하며, 사용자 인터페이스 요소(마우스 오버 시 툴팁 등)로 표시할 수 있습니다.

 

---

 

3. 기본 문법

<abbr title="Hypertext Markup Language">HTML</abbr>

• title 속성: 약어나 두문자어의 전체 의미를 설명하는 데 사용됩니다.
• 위 코드는 HTML이라는 약어가 "Hypertext Markup Language"의 줄임말임을 나타냅니다.

 

---

 

4. 사용 예제

4-1. 단순 약어

<p>
  <abbr title="World Health Organization">WHO</abbr>는 국제 보건 기구입니다.
</p>

WHO는 국제 보건 기구입니다.

• 사용자에게 WHO가 "World Health Organization"의 약자임을 알려줍니다.

 

4-2. 두문자어(Acronym)

<p>
  <abbr title="As Soon As Possible">ASAP</abbr>로 회신해 주세요.
</p>

ASAP로 회신해 주세요.

 

---

 

5. 접근성 향상

1. 화면 읽기 프로그램 지원:
   • <abbr> 태그는 화면 읽기 소프트웨어(screen readers)에서 약어의 의미를 설명할 수 있도록 도와줍니다.
   • 예를 들어, 사용자가 약어를 듣는 대신 전체 설명을 들을 수 있습니다.
2. 추가 의미 제공:
   • 제목(title) 속성은 약어의 정의를 제공하여 문맥을 이해하기 쉽게 만듭니다.

 

---

 

6. CSS 스타일링

<abbr> 태그는 스타일링할 수 있습니다. 일반적으로 약어는 시각적으로 강조되도록 스타일링하는 경우가 많습니다.

<style>
  abbr {
    border-bottom: 1px dotted #000;
    cursor: help;
  }
</style>

<p>
  <abbr title="Cascading Style Sheets">CSS</abbr>는 웹 디자인에 사용됩니다.
</p>

• border-bottom: 점선 밑줄로 약어임을 강조.
• cursor: help: 마우스를 올리면 "도움말" 커서로 표시.

 

---

 

7. 중첩 사용

여러 약어를 한 문장에 사용할 수도 있습니다.

<p>
  <abbr title="Hypertext Transfer Protocol">HTTP</abbr>와
  <abbr title="Secure Sockets Layer">SSL</abbr>은 보안 웹 통신의 핵심입니다.
</p>

HTTP와 SSL은 보안 웹 통신의 핵심입니다.

 

---

 

8. 호환성

• <abbr> 태그는 대부분의 현대 브라우저에서 지원됩니다.
• 과거에는 <acronym> 태그가 사용되었으나, HTML5에서 제거되었습니다. 대신 <abbr>로 통합되었습니다.

 

---

 

관련글

• [HTML] 테이블(table) 태그 속성 (병합, 테두리, 간격, 여백)
• 아스키 코드표 (0 ~ 255) 한 눈에 확인하기
• 텍스트 입력을 위한 input 태그의 올바른 사용법