HTML 에는 설명 목록을 정의하는 데 사용되는 <dl>이라는 특수 태그가 있습니다. 이러한 유형의 목록은 일반적으로 용어와 해당 정의를 설명하거나 제품 또는 서비스에 대한 간략한 설명을 제공하기 위해 생성됩니다. 이 랩에서는 HTML 에서 <dl> 태그를 사용하여 자신만의 설명 목록을 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 새 HTML 파일을 만듭니다. 기본 HTML 구조와 페이지 제목을 포함합니다.
<!doctype html>
<html>
<head>
<title>My Description List</title>
</head>
<body></body>
</html>HTML 파일의 body 내에서 <dl> 태그를 사용하여 설명 목록을 만듭니다. <dl> 태그는 정의되는 용어를 나타내는 <dt> 태그와 용어의 정의를 나타내는 <dd> 태그와 함께 사용해야 합니다.
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>설명 목록의 모양을 개선하기 위해 CSS 스타일을 추가합니다. 이 예제에서는 여백 (margin) 과 안쪽 여백 (padding) 을 0 으로 설정하여 제거한 다음, <dt> 태그에 약간의 안쪽 여백을 추가하여 눈에 띄게 만듭니다.
<style>
dl {
margin: 0;
padding: 0;
}
dt {
padding: 10px;
font-weight: bold;
}
</style>이제 기본적인 설명 목록이 설정되었으므로, 여기에 자신만의 내용을 추가할 수 있습니다. 각 용어와 정의에 대해 새로운 <dt> 및 <dd> 쌍을 목록에 추가하기만 하면 됩니다.
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language, 웹 페이지를 만드는 데 사용되는 표준 마크업 언어
</dd>
<dt>CSS</dt>
<dd>
Cascading Style Sheets, HTML 로 작성된 문서의 프레젠테이션을 설명하는 데
사용되는 언어
</dd>
<dt>JavaScript</dt>
<dd>주로 웹 애플리케이션 개발에 사용되는 프로그래밍 언어</dd>
</dl>index.html 파일을 저장한 다음, 웹 브라우저에서 열어 새로운 설명 목록을 확인하십시오.
이 랩에서는 HTML 에서 <dl> 태그를 사용하여 용어와 정의가 있는 설명 목록을 만드는 방법을 배웠습니다. <dt> 및 <dd> 태그를 사용하여 용어를 정의하고 각 용어에 대한 설명을 제공할 수 있었습니다. 또한 웹 페이지에서 더 보기 좋게 보이도록 설명 목록에 간단한 CSS 스타일을 추가하는 방법도 배웠습니다.
