WeniVooks

목록 관련 태그 ul,ol,dl

1. <ol>

순서가 있는 목록(ordered list)을 나타냅니다. 보통 숫자나 문자를 이용해 항목이 정렬된 목록을 만들 때 사용됩니다.

• 카운터 유형 지정: type 속성을 사용하여 항목을 셀 때 사용할 카운터 유형을 지정할 수 있습니다.
  • 1: 숫자(기본값)
  • a: 소문자 알파벳
  • A: 대문자 알파벳
  • i: 소문자 로마 숫자
  • I: 대문자 로마 숫자
• 시작 값 지정: start 속성을 사용하여 목록의 시작 값을 아라비아 숫자로 지정할 수 있습니다.
• 순서 역전: reversed 속성을 사용하여 목록의 순서를 역전시킬 수 있습니다.
• 적용 사례: 순서가 중요한 목록에 적합합니다. 예를 들어, 레시피 단계, 브레드크럼 네비게이션 등.

2. <ul>

• unordered list의 약자, 비순차적 목록을 말합니다.
• 정렬되지 않은, 보통 불릿으로 표현되는 목록을 의미합니다.
• 순서가 중요하지 않는 목록에 적용합니다.

3. <li>

• 목록의 항목을 나타냅니다.
• 단독으로 사용할 수 없습니다. ol, ul 의 자식요소로만 사용할 수 있습니다!

(X) 자식요소로는 li만!

자손요소로는 사용가능합니다

ol의 자식요소 li 특성

• type: 넘버링 타입. ol요소에 지정하는 유형을 덮어씁니다.
  • 1: 숫자(기본값)
  • a: 소문자 알파벳
  • A: 대문자 알파벳
  • i: 소문자 로마 숫자
  • I: 대문자 로마 숫자
• value: 항목의 현재 서수 값을 나타내는 정수입니다. 목록의 특정 항목의 번호를 설정하는 데 사용됩니다.

4. <dl>

설명 목록(definition list)을 나타냅니다. 이 태그는 용어와 해당 용어의 설명을 함께 제공하는데 사용됩니다. <dl> 태그는 <dt> (용어)와 <dd> (용어 설명) 요소를 포함합니다.

주요 특징

• 설명 목록: 용어와 그 설명을 짝지어 제공하는 목록을 나타냅니다.
• 구성 요소
  • <dt>: 정의될 용어를 나타냅니다.
  • <dd>: 용어에 대한 설명을 나타냅니다.
• 사용 사례: 용어사전 구현, 메타데이터(키-값 쌍의 목록) 표시 등에 사용됩니다.
• 유연성: 여러 개의 용어와 하나의 설명, 혹은 하나의 용어와 하나의 설명을 포함할 수 있습니다.

4.1 <dt>

• 용어 (Definition Term): 설명 목록에서 정의될 용어를 나타냅니다.
• 위치: 반드시 <dl> 요소 안에 위치해야 합니다. <dl>의 자식으로 사용되며 단독으로 사용할 수 없습니다.
• 사용 예시: <dl>과 함께 사용하여 설명 목록을 구성합니다.

4.2 <dd>

• 설명 목록 (Description Details): <dd> 태그는 <dt> 태그로 정의된 용어에 대한 설명을 나타냅니다.
• 위치: 반드시 <dl> 요소 안에 위치해야 합니다. <dl>의 자식으로 사용되며 단독으로 사용할 수 없습니다.
• 사용 예시: 앞선 <dt>와 함께 사용하여 설명 목록을 구성합니다.

스타일링

• 스타일링을 위해 div로 묶을 수 있습니다!

<dl>
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
 
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
 
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
  </div>
</dl>

<dl>
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
 
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
 
  <div>
    <dt></dt>
    <dt></dt>
    <dd></dd>
    <dd></dd>
  </div>
</dl>