HTML <abbr> 태그

<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>