HTML 목록을 만드는 방법

HTML 목록을 만드는 방법? HTML 목록은 정보 목록을 지정하는 데 사용됩니다. 모든 목록에는 하나 이상의 목록 요소가 있을 수 있습니다.

HTML에는 세 가지 유형의 목록이 있습니다.

주문한 <ol>

정렬되지 않은 <ul>

설명 <dl>

정렬되지 않은 목록

정렬되지 않은 목록은 <ul> 태그를 사용하여 생성됩니다.

정렬되지 않은 목록은 기본적으로 글머리 기호로 표시된 항목으로 구성됩니다.

각 목록 항목은 <li> 태그를 사용하여 생성됩니다.

다음은 쇼핑 항목 목록의 예입니다.

<ul>
  <li>Tea</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>

보시다시피 항목은 <ul></ul> 태그 사이에 배치됩니다.

정렬된 목록

정렬된 목록은 항목에 대한 글머리 기호 대신 기본적으로 숫자를 사용합니다.

정렬되지 않은 목록과 유사하게 생성되며 <ol> 대신 <ul> 태그를 사용하여 항목을 래핑합니다.

<ol>
  <li>Sam</li>
  <li>Amy</li>
  <li>Tom</li>
</ol>

그러면 번호가 매겨진 이름 목록이 생성됩니다.

설명 목록

설명 목록은 각 용어에 대한 설명이 포함된 용어 목록입니다.

사용

용어 및 정의

메타데이터 주제 및 값

질문과 답변

기타 이름-값 데이터 그룹

HTML 설명 목록에는 다음 세 가지 태그가 포함됩니다.

<dl> 태그는 목록의 시작을 정의합니다.

<dt> 태그는 용어를 정의합니다.

<dd> 태그는 용어 정의(설명)를 정의합니다.

예시:

<dl>
  <dt>Google</dt>
  <dd>
   Google LLC is an American multinational technology company that focuses on search engine technology, online advertising, cloud computing, computer software, quantum computing, e-commerce, artificial intelligence, and consumer electronics.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

description list element에 대해 자세히 알아보십시오.

중첩 목록

목록은 다른 목록 안에 중첩될 수 있습니다.

중첩된 정렬되지 않은 목록, 중첩된 정렬된 목록 또는 정렬되지 않은 목록 안에 중첩된 정렬된 목록을 만들 수 있습니다.

예시:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk
  <ul>
      <li>Dairy</li>
      <li>Almond</li>
      <li>Oat</li>
      <li>Soya</li>
    </ul>
  </li>
</ul>

이 카페 음료 목록에서 볼 수 있듯이 정렬되지 않은 목록은 다른 정렬되지 않은 목록의 목록 항목 안에 중첩되어 있습니다.

유효한 목록을 만들려면 목록 항목을 <li> </li> 태그로 열고 닫아야 하며 <ul> 또는 <ol> 태그로 래핑해야 합니다.

결론

그게 전부입니다! 이제 HTML에서 정렬된 목록, 정렬되지 않은 설명 목록을 작성하는 방법을 이해했습니다.

다음 기사를 읽으면서 HTML 학습을 계속하십시오.

How to Create an HTML Boilerplate

What is an HTML Element? How do you create one?

이 기사를 읽어 주셔서 감사합니다. 계속 코딩하세요.