#5-1. HTML 리스트(list) 만드는 방법(ul, ol, dl)

# HTML 에서 리스트(list)를 만드는 방법을 설명한다.
# HTML 리스트(list)에는 세 가지 방법이 있습니다.
# 1) 순서가 없는 리스트(unordered list) :: <ul>
# 2) 순서가 있는 리스트(ordered list) :: <ol>
# 3) 정의 리스트(definition list) :: <dl>

# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

HTML 리스트(List)

리스트를 만들 때 한 가지 팁이 있는데, 리스트를 만들 때 "Tap" 키를 활용하는 것입니다.
이 방법은 프론트 개발자들의 피로도를 줄여줄 수 있는 조그만한 팁이라고 할 수 있습니다.
아래와 같은 리스트를 만든다고 가정을 했을 때, 손으로 작성하는 코드의 양을 줄일 수 있습니다.

 

---

 

1) 순서가 없는 리스트

순서가 없는 리스트는 <ul>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작
각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치함


CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있음

- disc : 검정색 작은 원 모양(default)
- circle : 흰색 작은 원모양
- square : 사각형 모양

<ul style="list-style-type: circle">
  <li>사과</li>
  <li>멜론</li>
  <li>바나나</li>
</ul>

 

---

 

2) 순서가 있는 리스트

순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

type 속성을 이용하거나, CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

HTML type 속성:
- "a" : 영문 소문자
- "A" : 영문 대문자
- "i" : 로마 숫자 소문자
- "I" : 로마 숫자 대문자
- "1" : 숫자(defalut)

- reversed : 목록의 순서 역전 여부를 결정합니다. 즉, 내부에 지정된 항목이 역순으로 배열된 것인지 나타냅니다.
- start : 항목을 셀 때 시작할 수. type 이 로마 숫자나 양문인 경우에도 아라비아 숫자로 나타낸 정수만 가능합니다.

<ol type="i" reversed start=6>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

CSS list-style-type 속성:
- decimal: 숫자(default)
- upper-alpha: 영문 대문자
- lower-alpha: 영문 소문자
- upper-roman: 로마 숫자 대문자
- lower-roman: 로마 숫자 소문자

<ol style="list-style-type:upper-alpha">
  <li>수박</li>
  <li>참외</li>
  <li>옥수수</li>
</ol>

---

 

3) 정의 리스트(definition list)

정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작
<dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어감

<dl>
  <dt>호박</dt>
  <dd>- 박과의 한해살이 덩굴성 채소</dd>
  <dt>상추</dt>
  <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.