HTML 데이터 설명 태그 예시 - 정의 목록 활용법

소개

HTML 은 용어 목록을 생성하고 각 용어에 대한 설명을 제공할 수 있는 일련의 태그를 제공합니다. 이러한 목록에 사용되는 태그 중 하나는 <dd> (data description, 데이터 설명) 태그로, <dt> 태그를 사용하여 표현된 용어에 대한 설명을 제공하는 데 사용됩니다. 이 랩에서는 <dd> 태그를 사용하는 방법을 배우게 됩니다.

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

정의 목록 만들기

첫 번째 단계는 <dl> 태그를 사용하여 정의 목록을 만드는 것입니다. 이 태그 내에서 <dt> 태그를 사용하여 하나 이상의 용어를 정의해야 합니다. 예를 들어, "HTML"과 "CSS"라는 두 개의 용어로 정의 목록을 만듭니다.

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>Description of HTML</dd>
      <dt>CSS</dt>
      <dd>Description of CSS</dd>
    </dl>
  </body>
</html>

태그 사용하기

<dt> 태그를 사용하여 몇 가지 용어를 정의했으므로, 이제 <dd> 태그를 사용하여 각 용어에 대한 설명을 제공할 수 있습니다. 아래와 같이 각 용어의 설명을 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML 은 Hyper Text Markup Language 의 약자입니다. 웹에서 콘텐츠를
        생성하고 구조화하는 데 사용됩니다.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS 는 Cascading Style Sheets 의 약자입니다. HTML 요소를 스타일링하고 웹
        페이지를 시각적으로 매력적으로 만드는 데 사용됩니다.
      </dd>
    </dl>
  </body>
</html>

정의 목록 스타일링

기본적으로 <dd> 태그는 블록으로 표시되고 들여쓰기되어 용어와 설명을 쉽게 구별할 수 있습니다. 그러나 CSS 를 사용하여 스타일을 조정할 수도 있습니다. 정의 목록의 모양을 수정하려면 다음 스타일을 HTML 코드에 추가하십시오.

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

태그 내 태그 사용하기

<img> 태그를 사용하여 용어의 설명에 이미지를 추가할 수도 있습니다. 예를 들어, HTML 설명에 HTML 로고 이미지를 추가해 보겠습니다.

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        <img
          src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
          alt="HTML5 Logo"
        />
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

요약

<dd> 태그는 정의 목록 내에서 <dt> 태그를 사용하여 정의된 용어에 대한 설명을 제공하는 데 사용됩니다. 기본적으로 블록으로 표시되고 들여쓰기되어 읽기 쉽습니다. CSS 를 사용하여 스타일을 조정하고 <img> 태그를 사용하여 이미지를 추가할 수도 있습니다.

HTML 설명 값

소개

정의 목록 만들기

태그 사용하기

정의 목록 스타일링

태그 내 태그 사용하기

요약