설명 목록은 용어와 해당 설명 간의 관계를 생성하는 정보를 구조화하고 표시하는 의미론적 방법을 제공합니다. 데이터 또는 정보를 더 쉽게 접근하고 이해할 수 있게 만듭니다. 작성자는 용어집, 사전, FAQ 섹션, 제품 사양 등과 같은 위치에서 설명 목록을 활용할 수 있습니다. 이 문서에서는 HTML에서 설명 목록을 사용하는 절차를 보여줍니다.
HTML에서 설명 목록을 사용하는 방법?
설명 목록은 ' ”, “ ', 그리고 ' ” 태그는 용어 모음과 해당 정의를 나타내는 데 사용됩니다. 설명이 단순한 글머리 기호 목록을 넘어서는 구조화된 형식으로 콘텐츠를 표시/표시합니다. CSS 속성을 설명 목록에 적용하여 시각적으로 매력적인 인터페이스를 만들 수도 있습니다.
HTML로 설명 목록을 만들려면 아래 코드 스니펫을 방문하세요.
< 몸 >
< 사업부 >
< h2 > 노트북 시장 점유율 h2 >
< dl >
< dt > HP dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 30 % 일 >
< dt > 작은 골짜기 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 24 % 일 >
< dt > 레노버 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 14 % 일 >
dl >
사업부 >
몸 >
위의 코드 스니펫에 대한 설명:
-
- 처음에는 부모가 “ 사업부 ” 요소는 설명 목록 요소 및 “와 같은 기타 HTML 요소에 대한 컨테이너 역할을 합니다. '.
- 다음으로 설명 목록 '
- 그런 다음 설명 이름/용어 ' ” 태그는 설명이 추가될 항목의 설명을 정의하는 데 사용됩니다.
- 그 후 설명 데이터 ' ” 설명 항목에 관련된 설명/정보를 포함하는 태그가 삽입됩니다.
컴파일 단계가 끝나면 HTML 요소가 다음과 같이 웹 페이지에 나타납니다.
출력은 설명 목록이 생성되었음을 보여줍니다.
예 1: 단일 용어에 여러 설명 할당
단일 용어에 대해 둘 이상의 설명이 있는 설명 테이블을 만들 수 있습니다. 설명 용어를 설명할 수 있는 하나 이상의 의미 또는 방법이 있는 경우 특히 유용할 수 있습니다.
위 시나리오의 코드는 다음과 같습니다.
< 사업부 >< h2 > 노트북 시장 점유율 h2 >
< dl >
< dt > HP dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 30 % ~에 2018년 일 >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 23 % ~에 2017년 일 >
< dt > 작은 골짜기 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 24 % ~에 2018년 일 >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 27 % ~에 2017년 일 >
< dt > 레노버 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 14 % ~에 2018년 그리고 9 % ~에 2017년 일 >
dl >
사업부 >
위의 코드에서:
-
- 먼저, '의 도움으로 설명 목록이 생성됩니다. dl ”, “ dt ' 그리고 ' 일 ” 요소.
- 다음으로 여러 ' ” 태그는 단일 “ dt ' 요소. 단일 용어에 여러 설명을 할당합니다.
컴파일 단계 후:
출력은 단일 용어에 대해 여러 설명이 추가되었음을 보여줍니다.
예 2: 단일 설명에 여러 용어 지정
개발자는 단일 설명 데이터가 있는 여러 설명 용어로 구성된 설명 목록을 만들 수도 있습니다. 여러 용어가 비슷하거나 기능이 동일한 경우 특히 유용합니다. 이 기술을 사용하면 이러한 모든 용어를 한 번에 설명할 수 있습니다.
< 사업부 스타일 = '여백: 20px' >< h2 > 노트북 시장 점유율 h2 >
< dl >
< dt > HP dt >
< dt > 엘리트북 dt >
< dt > 프로북 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 30 % ~에 2018년 일 >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 23 % ~에 2017년 일 >
< dt > 레노버 dt >
< 일 > 데스크탑 시스템 및 랩탑 카테고리에서 14 % ~에 2018년 그리고 9 % ~에 2017년 일 >
dl >
사업부 >
위의 코드 블록에서 설명 목록이 생성되고 여러 ' ” 태그는 단일 “ ” 태그.
컴파일 단계 종료 후:
위의 스냅샷은 여러 용어가 단일 설명 데이터로 할당되었음을 보여줍니다.
결론
설명 목록은 설명 목록 '을 사용하여 생성됩니다. ” 목록 항목 및 해당 설명에 대한 컨테이너를 생성하는 태그입니다. 나아가 “ ” 태그는 설명을 제공할 항목 이름을 나타냅니다. ' ” 태그는 해당 설명을 저장합니다. 이 기사는 HTML에서 설명 목록의 활용을 보여주었습니다.