WeniVooks

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>

<dl> 태그는 Definition List(설명 목록)의 줄임말로, 용어와 그 설명을 짝지어 표현하는 특별한 목록입니다. 마치 사전에서 단어와 뜻이 함께 나오는 것처럼, 웹페이지에서도 체계적으로 정보를 정리할 수 있게 해줍니다.

주요 특징

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

왜 <dl> 태그를 사용할까요?

스타일링

• 스타일링을 위해 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>
  </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>
  </div>
</dl>