HTML 설명 목록 마스터하기

소개

HTML 에는 설명 목록을 정의하는 데 사용되는 <dl>이라는 특수 태그가 있습니다. 이러한 유형의 목록은 일반적으로 용어와 해당 정의를 설명하거나 제품 또는 서비스에 대한 간략한 설명을 제공하기 위해 생성됩니다. 이 랩에서는 HTML 에서 <dl> 태그를 사용하여 자신만의 설명 목록을 만드는 방법을 배웁니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일 설정

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 스타일을 추가하는 방법도 배웠습니다.