💡 퀵 접속: htm.kr/abbr

HTML <abbr> 태그

태그 설명

<abbr> 태그는 약어나 줄임말을 정의할 때 사용합니다. title 속성을 통해 약어의 전체 의미를 제공할 수 있으며, 이는 마우스를 올렸을 때 툴팁으로 표시됩니다.

주요 속성

속성	값	설명
title	텍스트	약어의 전체 의미를 지정합니다.

기본 예제

<p>
    <abbr title="World Wide Web">WWW</abbr>는 
    <abbr title="HyperText Markup Language">HTML</abbr>을 
    사용하여 만들어진 웹 페이지의 집합입니다.
</p>

블로그 실전 예제

<!-- 1. 기술 용어 설명 -->
<article>
    <h2>웹 개발 용어 설명</h2>
    <p>
        <abbr title="Cascading Style Sheets">CSS</abbr>는 
        웹 페이지의 스타일을 정의하는 언어입니다. 
        <abbr title="JavaScript">JS</abbr>와 함께 
        <abbr title="HyperText Markup Language">HTML</abbr>을 
        보완하는 역할을 합니다.
    </p>
</article>

<!-- 2. 전문 용어 설명 -->
<article>
    <h2>IT 업계 용어</h2>
    <p>
        <abbr title="Chief Executive Officer">CEO</abbr>와 
        <abbr title="Chief Technology Officer">CTO</abbr>는 
        회사의 핵심 의사결정자입니다. 
        <abbr title="User Interface">UI</abbr>와 
        <abbr title="User Experience">UX</abbr>는 
        사용자 경험을 결정하는 중요한 요소입니다.
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.abbr-custom {
    border-bottom: 1px dotted #2196f3;
    cursor: help;
    color: #2196f3;
}

.abbr-custom:hover {
    background-color: #e3f2fd;
    padding: 2px 4px;
    border-radius: 3px;
}
</style>

<p>
    <abbr title="Search Engine Optimization" class="abbr-custom">SEO</abbr>는 
    검색 엔진 최적화를 의미합니다.
</p>

실제 보여지는 모양

WWW는 HTML을 사용하여 만들어진 웹 페이지의 집합입니다.

SEO는 검색 엔진 최적화를 의미합니다.

참고사항

title 속성은 필수는 아니지만, 사용자 경험을 위해 제공하는 것이 좋습니다.
스크린 리더는 title 속성의 내용을 읽어줍니다.
CSS를 사용하여 약어의 스타일을 커스터마이즈할 수 있습니다.
자주 사용되는 약어는 한 번만 정의하면 됩니다.
검색 엔진은 title 속성의 내용을 인식합니다.

블로그 작성 팁

기술 문서에서 전문 용어를 설명할 때 유용합니다.
약어의 첫 등장 시에만 정의하면 됩니다.
스타일링을 통해 약어를 시각적으로 구분합니다.
마우스 오버 효과를 추가하여 사용자 경험을 향상시킵니다.
접근성을 고려하여 title 속성을 항상 포함합니다.

브라우저 지원

모든 주요 브라우저에서 지원됩니다.

Chrome: 지원
Firefox: 지원
Safari: 지원
Edge: 지원
Opera: 지원