HTML <dfn> 태그 (Definition)

1. HTML dfn 태그란?
2. 기본 문법
3. 주요 특징
4. 사용 예제
   • 기본적인 용어 정의
   • title 속성을 사용하여 추가 정보 제공
   • abbr 태그와 함께 사용 (약어 + 정의)
   • CSS를 활용하여 스타일링
5. dfn 태그와 i 태그의 차이점
6. 사용 장점

 

• dfn 태그는 어떤 용어나 개념의 정의를 나타낼 때 사용
• 브라우저 기본 스타일은 기울임꼴(italic)
• title 속성과 함께 사용하면 툴팁 제공 가능
• abbr 태그와 함께 사용하여 축약어를 정의 가능
• CSS를 활용하여 스타일을 커스터마이징 가능

 

---

 

HTML dfn 태그란?

dfn 태그(Definition)는 어떤 용어나 개념의 정의를 나타낼 때 사용하는 태그입니다. 기본적으로 브라우저에서는 기울임꼴(italic, 이탤릭체)로 표시되며, 주로 사전적인 정의, 용어 설명, 기술 문서 작성 등에 사용됩니다.

 

---

 

기본 문법

<p><dfn>HTML</dfn>은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>

• 기본적으로 브라우저에서 이탤릭체(기울임꼴)로 표시됨
• 사전적 의미의 용어나 개념을 설명할 때 유용

 

---

 

주요 특징

1. 어떤 용어(단어)의 정의를 나타낼 때 사용
2. 브라우저에서 기본적으로 기울임꼴(italic)로 렌더링됨
3. abbr 태그와 함께 사용하여 축약어(약어) 정의 가능
4. title 속성과 함께 사용하여 추가 정보 제공 가능

 

---

 

사용 예제

💡 기본적인 용어 정의

🌈 예제 코드:

<p><dfn>CSS</dfn>는 웹 페이지의 스타일을 지정하는 스타일시트 언어입니다.</p>

✅ 출력 결과:

CSS

는 웹 페이지의 스타일을 지정하는 스타일시트 언어입니다.

"CSS"라는 용어를 정의하고 있음.

 

💡 title 속성을 사용하여 추가 정보 제공

🌈 예제 코드:

<p><dfn title="HyperText Markup Language">HTML</dfn>은 웹 페이지의 구조를 정의하는 언어입니다.</p>

✅ 출력 결과:

HTML

은 웹 페이지의 구조를 정의하는 언어입니다.

마우스를 <dfn> 태그 위에 올리면 "HyperText Markup Language" 툴팁이 표시됨.

 

💡 abbr 태그와 함께 사용 (약어 + 정의)

🌈 예제 코드:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>는 웹 스타일을 지정하는 언어입니다.</p>

✅ 출력 결과:

CSS

는 웹 스타일을 지정하는 언어입니다.

<abbr> 태그를 사용하여 약어를 명확하게 표시하고, <dfn> 태그로 정의함.

 

💡 CSS를 활용하여 스타일링

🌈 예제 코드:

<style>
  dfn {
    font-style: normal; /* 기본 이탤릭 스타일 제거 */
    font-weight: bold;  /* 굵게 표시 */
    color: #0073e6; /* 파란색 */
  }
</style>

<p><dfn>JavaScript</dfn>는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다.</p>

 

CSS를 적용하여 기본 기울임꼴 스타일을 제거하고, 굵은 글씨와 색상을 추가

 

---

 

dfn 태그와 i 태그의 차이점

태그	차이점
dfn	특정 용어의 정의를 나타낼 때 사용 (의미 강조)
i	단순히 이탤릭체(기울임꼴) 로 텍스트를 표현할 때 사용 (스타일 목적)

🌈 예제 코드:

<p><dfn>HTML</dfn>은 웹 문서의 기본 구조를 정의합니다.</p>
<p><i>HTML</i>을 배우는 것은 매우 유용합니다.</p>

✅ 출력 결과:

HTML

은 웹 문서의 기본 구조를 정의합니다.

HTML을 배우는 것은 매우 유용합니다.

dfn 태그는 의미를 부여하는 태그, i 태그는 단순한 텍스트 스타일 변경

 

---

 

사용 장점

• 기술 문서, 사전, 용어집(Glossary) 작성
• 약어, 전문 용어, 새로운 개념을 정의할 때
• 웹 접근성을 높이기 위해 특정 용어를 강조할 때

 

---

 

• HTML <details> 태그
• HTML <wbr> 태그
• HTML <del> 태그