이 랩에서는 HTML <dfn> 태그를 사용하여 정의되는 용어를 강조 표시하는 정의 목록을 만드는 방법을 배웁니다. <dfn> 태그는 튜토리얼 및 교육 웹사이트에서 대화형 및 유익한 사용자 경험을 제공하기 위해 일반적으로 사용됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 새 파일을 만들고 선호하는 코드 편집기에서 엽니다.<!doctype html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body></body>
</html><body> 요소 내부에 정의 목록을 포함할 <dl> 요소를 만듭니다.<dl> 요소 내에서 <dt> 및 <dd> 요소를 사용하여 용어와 정의 쌍을 각각 만듭니다.<body>
<dl>
<dt><dfn>HTML</dfn></dt>
<dd>HyperText Markup Language 는 웹 페이지를 만드는 표준 언어입니다.</dd>
<dt><dfn>CSS</dfn></dt>
<dd>
Cascading Style Sheets 는 마크업 언어로 작성된 문서의 프레젠테이션을
설명하는 데 사용됩니다.
</dd>
<dt><dfn>JavaScript</dfn></dt>
<dd>
동적 웹사이트 콘텐츠를 생성하고 제어하는 데 사용되는 스크립팅 언어입니다.
</dd>
</dl>
</body>이 예제에서는 <dfn> 태그를 사용하여 용어를 강조 표시하고 눈에 띄게 만듭니다.
<dfn> 요소 내에 title 속성을 포함합니다.<dt><dfn title="HyperText Markup Language">HTML</dfn></dt>
<dd>
HyperText Markup Language is the standard language for creating web pages.
</dd>title 속성은 사용자가 마우스로 용어 위에 마우스를 올리면 전체 용어를 표시하는 툴팁을 생성합니다.
<dfn> 태그는 이탤릭체 글꼴 스타일을 갖습니다. 그러나 CSS 를 사용하여 스타일을 사용자 정의할 수 있습니다.<style>
dfn {
font-style: italic;
color: blue;
}
dt {
font-weight: bold;
}
</style>위의 스타일은 <dfn>의 글꼴 스타일을 이탤릭체로, 글꼴 색상을 파란색으로 설정합니다. <dt>의 글꼴 굵기도 굵게 변경됩니다.
이 랩에서는 HTML <dfn> 태그를 사용하여 강조 표시된 용어와 툴팁이 있는 정의 목록을 만드는 방법을 배웠습니다. <dfn> 태그를 사용하면 교육 콘텐츠를 더욱 상호 작용적이고 사용자에게 시각적으로 매력적으로 만들 수 있습니다.
