HTML <dfn> 태그란?
HTML의 <dfn> 태그는 본문에서 특정 용어가 처음 등장해 정의되는 지점을 표시할 때 사용합니다. 'dfn'은 'definition(정의)'의 줄임말로, 전문 용어나 약어를 소개할 때 활용하는 시맨틱(semantics) 요소입니다.
<dfn> 태그로 감싼 용어는 대부분의 브라우저에서 기본적으로 기울임꼴로 표시됩니다. 또한 title 속성과 함께 사용하면 마우스 커서를 올렸을 때 용어의 전체 명칭이나 설명이 툴팁 형태로 나타나 가독성과 접근성을 높일 수 있습니다.
<dfn> 태그 사용 예제
다음은 <dfn> 태그를 실제로 적용한 예제 코드입니다.
<!DOCTYPE html> <html> <body> <h2>MCA 과정의 주요 과목</h2> <p><dfn title="Master of Computer Applications">MCA</dfn>는 3년 과정의 대학원 석사 학위 과정입니다.</p> <p>1학기 과목은 다음과 같습니다...</p> <dl> <dt>JavaScript</dt> <dd>스크립트 언어입니다.</dd> <dt>Java</dt> <dd>프로그래밍 언어입니다.</dd> <dt>jQuery</dt> <dd>JavaScript 라이브러리입니다.</dd> <dt>C#</dt> <dd>객체지향 프로그래밍 언어입니다.</dd> </dl> </body> </html>
위 코드를 실행하면 아래와 같은 결과가 출력되며, MCA 위에 마우스를 올리면 title 속성에 설정한 설명도 함께 표시됩니다.
핵심 코드 분석
예제에서 <dfn> 태그가 적용된 핵심 부분은 다음과 같습니다.
<p><dfn title="Master of Computer Applications">MCA</dfn>는 3년 과정의 대학원 석사 학위 과정입니다.</p>
여기서 <dfn> 태그는 'MCA'라는 용어를 정의하는 역할을 하며, title 속성에는 그 풀네임인 'Master of Computer Applications(컴퓨터 응용 석사)'가 지정되어 있습니다.
알아두면 좋은 팁
- <dfn> 태그는 하나의 용어가 문서에서 최초로 정의될 때 한 번만 사용하는 것이 좋습니다.
- <abbr> 태그와 중첩하면 약어를 더욱 명확하게 표현할 수 있습니다.
- 검색 엔진과 스크린 리더가 용어의 의미를 정확히 파악하도록 도와주므로 SEO와 웹 접근성 측면에서도 유리합니다.