HTML <dfn> 태그

<p>
    <dfn title="웹 페이지의 구조를 정의하는 마크업 언어">HTML</dfn>은 
    웹 개발의 기초가 되는 언어입니다.
</p>

<p>
    <dfn>반응형 웹 디자인</dfn>은 
    다양한 화면 크기에 맞춰 자동으로 조정되는 웹 디자인 방식입니다.
</p>

<!-- 1. 기술 용어 사전 -->
<article class="tech-glossary">
    <h2>웹 개발 용어 사전</h2>
    <p>
        <dfn title="웹 페이지의 시각적 표현을 담당하는 스타일시트 언어">CSS</dfn>는 
        HTML과 함께 웹 페이지의 디자인을 구성합니다.
    </p>
    <p>
        <dfn title="웹 브라우저에서 실행되는 프로그래밍 언어">JavaScript</dfn>는 
        웹 페이지에 동적인 기능을 추가합니다.
    </p>
</article>

<!-- 2. 개념 설명 -->
<article class="concept-explanation">
    <h2>프로그래밍 개념</h2>
    <p>
        <dfn class="concept-term">객체 지향 프로그래밍</dfn>은 
        프로그램을 객체들의 모임으로 파악하는 프로그래밍 패러다임입니다.
    </p>
    <p>
        <dfn class="concept-term">함수형 프로그래밍</dfn>은 
        함수를 중심으로 프로그램을 구성하는 프로그래밍 패러다임입니다.
    </p>
</article>

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

.dfn-custom:hover {
    background-color: #e3f2fd;
    padding: 2px 4px;
    border-radius: 3px;
}

.tech-glossary dfn {
    color: #e91e63;
    font-style: italic;
}

.concept-term {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}
</style>

<p>
    <dfn class="dfn-custom" title="웹 서버와 클라이언트 간의 통신 규약">HTTP</dfn>는 
    웹의 기본 프로토콜입니다.
</p>