개발 도구 (Development Tools)/HTML & CSS

#5. HTML 목록

BiCute 2023. 3. 13. 08:00
반응형

 

HTML에서 목록은 ul, ol, li 태그를 사용하여 구현할 수 있습니다.

ul 태그는 순서가 없는 목록을 표현하며, li 태그를 사용하여 각 항목을 구성합니다.

ol 태그는 순서가 있는 목록을 표현하며, type 속성을 사용하여 숫자 또는 글자 등으로 표시되는 순서 형식을 지정할 수 있습니다.

 

 

 

# 순서가 없는 목록

 

순서가 없는 목록(Unordered list)은 HTML에서 ul 태그를 사용하여 구현할 수 있습니다. 각 항목은 li 태그를 사용하여 구성합니다.

순서가 없는 목록은 글자 형식의 순서를 사용하지 않고, 구분 기호(bullet)로 각 항목을 구분합니다.

예:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

 

 

 

# 순서가 있는 목록

 

순서가 있는 목록(Ordered list)은 HTML에서 ol 태그를 사용하여 구현할 수 있습니다.

각 항목은 li 태그를 사용하여 구성합니다.

 

순서가 있는 목록은 텍스트 형식의 순서(1, 2, 3, ...)를 각 항목에 부여하여 구분합니다.

 

예:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

 

각 항목에 대한 순서 표시 방식은 type 속성을 사용하여 지정할 수 있습니다. 

예를 들어, type="I"는 '로마 숫자'를, type="a"는 소문자 알파벳을 사용한 표시 방식을 지정합니다.

 

 

 

# Ordered list의 type 속성

 

Ordered list의 type 속성에서 지원하는 값은 다음과 같습니다:
- type="1" : 10진수 (기본값)
- type="A" : 대문자 알파벳
- type="a" : 소문자 알파벳
- type="I" : 로마 숫자
- type="i" : 소문자 로마 숫자

 

예:

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

 

 

 

# 정의 목록

 

정의 목록(Definition list)은 HTML에서 dl 태그를 사용하여 구현할 수 있습니다.

각 항목은 dt 태그와 dd 태그를 사용하여 구성합니다.

dt 태그는 정의하는 개념의 이름을 나타내고, dd 태그는 개념의 설명을 나타냅니다.

 

예:

<dl>
  <dt>Item 1</dt>
  <dd>Definition of item 1</dd>
  <dt>Item 2</dt>
  <dd>Definition of item 2</dd>
  <dt>Item 3</dt>
  <dd>Definition of item 3</dd>
</dl>

정의 목록은 단어와 그에 대한 정의를 나타내기 위해 주로 사용됩니다.

이를 통해 사용자에게 쉽게 정보를 제공할 수 있습니다.

반응형