abbr element - by. UXKM

요약 설명

<abbr> 요소는 약어나 축약어(abbreviation)를 나타내는 시맨틱 태그로, 마우스를 올렸을 때 전체 뜻을 툴팁으로 보여주기 위해 title 속성과 함께 사용됩니다.
문서 내에서 약어의 의미를 명확히 전달하고, 보조 기술(스크린 리더 등)이 전체 단어로 읽어줄 수 있도록 하여 접근성과 가독성을 높이는 역할을 합니다. 처음 등장하는 약어나 생소한 용어에 사용하면 독자와 사용자 모두에게 유익합니다.
브라우저는 기본적으로 약어에 점선 밑줄을 표시합니다.

주요 역할 및 특징

  1. 약어 또는 축약어 정의
    • <abbr>는 약어나 줄임말을 명확히 표현하기 위해 사용됩니다.
    • 예: "HTML"은 "HyperText Markup Language"를 의미함.
  2. title 속성과 함께 사용
    • title 속성을 통해 약어의 전체 의미를 제공할 수 있습니다.
    • 사용자가 약어 위로 마우스를 올리면 툴팁으로 전체 의미가 표시됩니다.
  3. 접근성 개선
    • <abbr>는 스크린 리더가 약어를 올바르게 읽도록 돕습니다.
    • title 속성은 약어의 의미를 스크린 리더 사용자에게 전달하는 데 유용합니다.
  4. 브라우저 렌더링

    일부 브라우저는 <abbr>에 점선 밑줄을 표시하거나, 스타일을 변경하지 않을 수 있습니다. CSS로 스타일링을 추가하는 것이 일반적입니다.

  5. CSS 스타일링 가능

    기본 스타일 외에도 CSS를 사용해 약어를 강조하거나 시각적으로 구분할 수 있습니다.

CSS 기본 값

<abbr> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

[title] 선택 사항 <abbr title="풀 네임 또는 설명">

약어의 의미나 설명을 제공하는 텍스트를 작성합니다. title 속성이 없으면 브라우저는 <abbr> 요소를 특별히 처리하지 않습니다.

예제

title 속성이 없는 약어

약어의 전체 의미 제공

약어에 마우스를 올리면 title 속성에 선언된 전체 내용이 툴팁으로 표시됩니다.

다중 약어 사용

약어에 마우스를 올리면 title 속성에 선언된 전체 내용이 툴팁으로 표시됩니다.

CSS로 스타일링된 약어

약어에 마우스를 올리면 title 속성에 선언된 전체 내용이 툴팁으로 표시됩니다.

접근성을 고려한 약어

주의사항

  • 약어에 title 속성을 추가해 전체 의미를 제공하는 것이 중요합니다. 약어의 의미를 알 수 없는 사용자를 위해 필수적으로 작성하세요.
  • 모든 브라우저가 <abbr>를 시각적으로 구분하지 않으므로, CSS를 사용해 밑줄이나 배경색 등으로 강조하세요.
  • 약어의 의미를 문장 내에 이미 설명한 경우, title 속성에 중복된 정보를 추가하지 않도록 주의하세요.