λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
μΉ΄ν…Œκ³ λ¦¬ μ—†μŒ

UL, OL, DL λͺ©λ‘(list)에 기호 μŠ€νƒ€μΌ μ§€μ •ν•˜κΈ°

by 5566 2023. 11. 15.

1. UL, OL, DL λͺ©λ‘(list)μ΄λž€?

λ§ˆν¬λ‹€μš΄(Markdown)은 ν…μŠ€νŠΈ 기반의 κ²½λŸ‰ λ§ˆν¬μ—… μ–Έμ–΄λ‘œ, μ›Ήμ—μ„œ 글을 μž‘μ„±ν•˜κΈ° μœ„ν•œ 문법 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. λ§ˆν¬λ‹€μš΄μ„ μ‚¬μš©ν•˜μ—¬ λͺ©μ°¨λ₯Ό μž‘μ„±ν•  λ•Œ 주둜 μ‚¬μš©λ˜λŠ” ν•­λͺ©μ€ UL, OL, DL λͺ©λ‘μž…λ‹ˆλ‹€.

  • UL(Unordered List λͺ©λ‘): μˆœμ„œκ°€ μ—†λŠ” λͺ©λ‘μœΌλ‘œ, ν•­λͺ©λ“€μ΄ 점 λ˜λŠ” 기호둜 κ΅¬λΆ„λ©λ‹ˆλ‹€. 일반적으둜 점(β€’), ν•˜μ΄ν”ˆ(-), λ³„ν‘œ(*) λ“±μ˜ 기호 μŠ€νƒ€μΌμ„ μ‚¬μš©ν•˜μ—¬ λͺ©λ‘μ„ ν‘œμ‹œν•©λ‹ˆλ‹€. UL λͺ©λ‘μ€ 주둜 λ‹¨μˆœν•œ λͺ©λ‘μ΄λ‚˜ μ•„μ΄ν…œμ„ λ‚˜μ—΄ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.

  • OL(Ordered List λͺ©λ‘): μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘μœΌλ‘œ, ν•­λͺ©λ“€μ΄ 번호둜 κ΅¬λΆ„λ©λ‹ˆλ‹€. 일반적으둜 숫자(1., 2., 3. λ“±)둜 λͺ©λ‘μ„ ν‘œμ‹œν•©λ‹ˆλ‹€. OL λͺ©λ‘μ€ 보닀 κ΅¬μ‘°ν™”λœ λͺ©μ°¨λ₯Ό ν‘œμ‹œν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.

  • DL(Definition List λͺ©λ‘): μš©μ–΄μ™€ μ •μ˜, ν˜Ήμ€ μš©μ–΄μ™€ μ„€λͺ…이 ν•¨κ»˜ μžˆλŠ” λͺ©λ‘μž…λ‹ˆλ‹€. μš©μ–΄λŠ” DT(D<efinition Term) νƒœκ·Έλ‘œ, μ •μ˜λ‚˜ μ„€λͺ…은 DD(Definition Description) νƒœκ·Έλ‘œ κ΅¬λΆ„λ©λ‹ˆλ‹€. DL λͺ©λ‘μ€ 주둜 μš©μ–΄μ§‘μ΄λ‚˜ μš©μ–΄μ— λŒ€ν•œ μ„€λͺ…을 μ œκ³΅ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.

UL, OL, DL λͺ©λ‘μ€ 각각 λ‹€λ₯Έ λͺ©λ‘ ν˜•μ‹μ„ 가지고 μžˆμ–΄μ„œ λ‹€μ–‘ν•œ 상황에 맞게 μ‚¬μš©λ©λ‹ˆλ‹€. μ΄λŸ¬ν•œ λͺ©λ‘μ„ μž‘μ„±ν•  λ•ŒλŠ” 각 λͺ©λ‘ μœ ν˜•μ— λ§žλŠ” 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ„ μ‹œκ°μ μœΌλ‘œ ꡬ뢄짓고 λ‚΄μš©μ„ λ”μš± λͺ…ν™•ν•˜κ²Œ 전달할 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒ ν•­λͺ©μ—μ„œλŠ” UL, OL, DL λͺ©λ‘μ— 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

2. UL λͺ©λ‘μ— 기호 μŠ€νƒ€μΌ μ§€μ •ν•˜κΈ°

UL(Unordered List) λͺ©λ‘μ€ μˆœμ„œκ°€ μ—†λŠ” λͺ©λ‘μœΌλ‘œ, ν•­λͺ©λ“€μ΄ 점 λ˜λŠ” 기호둜 κ΅¬λΆ„λ©λ‹ˆλ‹€. UL λͺ©λ‘μ—λŠ” λ‹€μ–‘ν•œ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ˜ λͺ¨μ–‘을 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

UL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜κΈ° μœ„ν•΄μ„œλŠ” -, *, + λ“±μ˜ 기호λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 기호λ₯Ό λͺ©λ‘ μ•žμ— μž…λ ₯ν•˜λ©΄ ν•΄λ‹Ή 기호둜 λͺ©λ‘μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€. μ΄λ•Œ, 기호λ₯Ό 두 μΉΈ 이상 λ“€μ—¬μ“°κΈ°ν•˜μ—¬ ν•˜μœ„ λͺ©λ‘μ„ λ§Œλ“€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, λ‹€μŒκ³Ό 같이 UL λͺ©λ‘μ„ μž‘μ„±ν•˜κ³  기호 μŠ€νƒ€μΌμ„ 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

- ν•­λͺ© 1
- ν•­λͺ© 2
  - ν•˜μœ„ ν•­λͺ© 1
  - ν•˜μœ„ ν•­λͺ© 2
- ν•­λͺ© 3

μœ„μ˜ λ§ˆν¬λ‹€μš΄ μ½”λ“œλ₯Ό λ Œλ”λ§ν•˜λ©΄ λ‹€μŒκ³Ό 같은 UL λͺ©λ‘μ΄ μƒμ„±λ©λ‹ˆλ‹€.

  • ν•­λͺ© 1
  • ν•­λͺ© 2
    • ν•˜μœ„ ν•­λͺ© 1
    • ν•˜μœ„ ν•­λͺ© 2
  • ν•­λͺ© 3

UL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ λ³€κ²½ν•˜λ €λ©΄, 기호 λŒ€μ‹  μ‚¬μš©ν•  νŠΉμ • 기호λ₯Ό μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, *을 μ‚¬μš©ν•˜μ—¬ λͺ©λ‘μ„ μž‘μ„±ν•˜λ©΄ 점 λŒ€μ‹  λ³„ν‘œλ‘œ ν‘œμ‹œλ©λ‹ˆλ‹€.

* ν•­λͺ© 1
* ν•­λͺ© 2
  * ν•˜μœ„ ν•­λͺ© 1
  * ν•˜μœ„ ν•­λͺ© 2
* ν•­λͺ© 3

μœ„μ˜ λ§ˆν¬λ‹€μš΄ μ½”λ“œλ₯Ό λ Œλ”λ§ν•˜λ©΄ λ‹€μŒκ³Ό 같은 UL λͺ©λ‘μ΄ μƒμ„±λ©λ‹ˆλ‹€.

  • ν•­λͺ© 1
  • ν•­λͺ© 2
    • ν•˜μœ„ ν•­λͺ© 1
    • ν•˜μœ„ ν•­λͺ© 2
  • ν•­λͺ© 3

λ§ˆν¬λ‹€μš΄μ—μ„œ UL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ˜ 외관을 μ›ν•˜λŠ” λŒ€λ‘œ λ³€κ²½ν•  수 μžˆμœΌλ―€λ‘œ, 상황에 맞게 μ μ ˆν•œ μŠ€νƒ€μΌμ„ μ„ νƒν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

3. OL λͺ©λ‘μ— 기호 μŠ€νƒ€μΌ μ§€μ •ν•˜κΈ°

OL(Ordered List) λͺ©λ‘μ€ μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘μœΌλ‘œ, ν•­λͺ©λ“€μ΄ 번호둜 κ΅¬λΆ„λ©λ‹ˆλ‹€. 기본적으둜 λ§ˆν¬λ‹€μš΄μ—μ„œλŠ” 숫자둜 λͺ©λ‘μ„ ν‘œμ‹œν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ, OL λͺ©λ‘μ—λŠ” λ‹€μ–‘ν•œ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ˜ λͺ¨μ–‘을 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

OL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜κΈ° μœ„ν•΄μ„œλŠ” 번호 λŒ€μ‹  μ‚¬μš©ν•  νŠΉμ • 기호λ₯Ό μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€. 번호 λŒ€μ‹  μ‚¬μš©ν•  수 μžˆλŠ” κΈ°ν˜Έλ‘œλŠ” 1., i., a. 등이 μžˆμŠ΅λ‹ˆλ‹€. 기호λ₯Ό λͺ©λ‘ μ•žμ— μž…λ ₯ν•˜λ©΄ ν•΄λ‹Ή 기호둜 λͺ©λ‘μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€. μ΄λ•Œ, 기호λ₯Ό 두 μΉΈ 이상 λ“€μ—¬μ“°κΈ°ν•˜μ—¬ ν•˜μœ„ λͺ©λ‘μ„ λ§Œλ“€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, λ‹€μŒκ³Ό 같이 OL λͺ©λ‘μ„ μž‘μ„±ν•˜κ³  기호 μŠ€νƒ€μΌμ„ 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

1. ν•­λͺ© 1
2. ν•­λͺ© 2
   1. ν•˜μœ„ ν•­λͺ© 1
   2. ν•˜μœ„ ν•­λͺ© 2
3. ν•­λͺ© 3

μœ„μ˜ λ§ˆν¬λ‹€μš΄ μ½”λ“œλ₯Ό λ Œλ”λ§ν•˜λ©΄ λ‹€μŒκ³Ό 같은 OL λͺ©λ‘μ΄ μƒμ„±λ©λ‹ˆλ‹€.

  1. ν•­λͺ© 1
  2. ν•­λͺ© 2
    1. ν•˜μœ„ ν•­λͺ© 1
    2. ν•˜μœ„ ν•­λͺ© 2
  3. ν•­λͺ© 3

OL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ λ³€κ²½ν•˜λ €λ©΄, 기호 λŒ€μ‹  μ‚¬μš©ν•  νŠΉμ • 기호λ₯Ό μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, i.을 μ‚¬μš©ν•˜μ—¬ λͺ©λ‘μ„ μž‘μ„±ν•˜λ©΄ 둜마 숫자둜 ν‘œμ‹œλ©λ‹ˆλ‹€.

i. ν•­λͺ© 1
ii. ν•­λͺ© 2
   i. ν•˜μœ„ ν•­λͺ© 1
   ii. ν•˜μœ„ ν•­λͺ© 2
iii. ν•­λͺ© 3

μœ„μ˜ λ§ˆν¬λ‹€μš΄ μ½”λ“œλ₯Ό λ Œλ”λ§ν•˜λ©΄ λ‹€μŒκ³Ό 같은 OL λͺ©λ‘μ΄ μƒμ„±λ©λ‹ˆλ‹€.

i. ν•­λͺ© 1
ii. ν•­λͺ© 2
i. ν•˜μœ„ ν•­λͺ© 1
ii. ν•˜μœ„ ν•­λͺ© 2
iii. ν•­λͺ© 3

λ§ˆν¬λ‹€μš΄μ—μ„œ OL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ˜ 외관을 μ›ν•˜λŠ” λŒ€λ‘œ λ³€κ²½ν•  수 μžˆμœΌλ―€λ‘œ, 상황에 맞게 μ μ ˆν•œ μŠ€νƒ€μΌμ„ μ„ νƒν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

4. DL λͺ©λ‘μ— 기호 μŠ€νƒ€μΌ μ§€μ •ν•˜κΈ°

DL(Definition List) λͺ©λ‘μ€ μ •μ˜λ₯Ό λ‚˜νƒ€λ‚΄λŠ” λͺ©λ‘μœΌλ‘œ, μš©μ–΄μ™€ ν•΄λ‹Ή μš©μ–΄μ˜ μ •μ˜λ₯Ό ν•œ 쌍으둜 ν‘œμ‹œν•©λ‹ˆλ‹€. 기본적으둜 λ§ˆν¬λ‹€μš΄μ—μ„œλŠ” μš©μ–΄μ™€ μ •μ˜λ₯Ό 콜둠(:)κ³Ό μ€„λ°”κΏˆμ„ μ΄μš©ν•˜μ—¬ κ΅¬λΆ„ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ, DL λͺ©λ‘μ—λ„ κ°„λ‹¨ν•œ 기호 μŠ€νƒ€μΌμ„ μ μš©ν•˜μ—¬ λͺ©λ‘μ˜ λͺ¨μ–‘을 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜λ €λ©΄, 각 ν•­λͺ© μ•žμ— 기호λ₯Ό μž…λ ₯ν•˜κ³  콜둠과 μ€„λ°”κΏˆμ„ μ‚¬μš©ν•˜μ—¬ μš©μ–΄μ™€ μ •μ˜λ₯Ό κ΅¬λΆ„ν•©λ‹ˆλ‹€. μ΄λ•Œ, 기호λ₯Ό 두 μΉΈ 이상 λ“€μ—¬μ“°κΈ°ν•˜μ—¬ ν•˜μœ„ λͺ©λ‘μ„ λ§Œλ“€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, λ‹€μŒκ³Ό 같이 DL λͺ©λ‘μ„ μž‘μ„±ν•˜κ³  기호 μŠ€νƒ€μΌμ„ 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

μš©μ–΄ 1
: μ •μ˜ 1

μš©μ–΄ 2
: μ •μ˜ 2

   μš©μ–΄ 3
   : μ •μ˜ 3

μœ„μ˜ λ§ˆν¬λ‹€μš΄ μ½”λ“œλ₯Ό λ Œλ”λ§ν•˜λ©΄ λ‹€μŒκ³Ό 같은 DL λͺ©λ‘μ΄ μƒμ„±λ©λ‹ˆλ‹€.

μš©μ–΄ 1
: μ •μ˜ 1

μš©μ–΄ 2
: μ •μ˜ 2

μš©μ–΄ 3
: μ •μ˜ 3

DL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ€ 기본적으둜 λ§ˆν¬λ‹€μš΄μ—μ„œ μ§€μ›ν•˜μ§€ μ•Šμ§€λ§Œ, μš©μ–΄μ™€ μ •μ˜λ₯Ό λ‚˜νƒ€λ‚΄λŠ” 콜둠(:)κ³Ό λ“€μ—¬μ“°κΈ°λ₯Ό μ΄μš©ν•˜μ—¬ μ‹œκ°μ μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€. DL λͺ©λ‘μ—μ„œ μ£Όλͺ©ν•  점은 기호 μŠ€νƒ€μΌμ΄ λͺ©λ‘μ˜ 외관을 λ³€κ²½ν•˜μ§€λ§Œ, HTMLμ—μ„œμ˜ <dl> νƒœκ·Έμ™€ 같은 μ •ν™•ν•œ 의미둠적인 ꡬ쑰λ₯Ό μ œκ³΅ν•˜μ§€λŠ” μ•ŠλŠ”λ‹€λŠ” μ μž…λ‹ˆλ‹€.

5. 정리

λ§ˆν¬λ‹€μš΄μ—μ„œλŠ” OL(Ordered List) λͺ©λ‘κ³Ό DL(Definition List) λͺ©λ‘μ— 기호 μŠ€νƒ€μΌμ„ μ§€μ •ν•˜μ—¬ λͺ©λ‘μ˜ λͺ¨μ–‘을 λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

OL λͺ©λ‘μ€ μˆœμ„œκ°€ μžˆλŠ” λͺ©λ‘μœΌλ‘œ, 기본적으둜 숫자둜 ν‘œμ‹œλ©λ‹ˆλ‹€. OL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ„ λ³€κ²½ν•˜λ €λ©΄, 번호 λŒ€μ‹  μ›ν•˜λŠ” νŠΉμ • 기호λ₯Ό μž…λ ₯ν•˜λ©΄ λ©λ‹ˆλ‹€. μ΄λ•Œ, 기호λ₯Ό 두 μΉΈ 이상 λ“€μ—¬μ“°κΈ°ν•˜μ—¬ ν•˜μœ„ λͺ©λ‘μ„ λ§Œλ“€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

DL λͺ©λ‘μ€ μ •μ˜λ₯Ό λ‚˜νƒ€λ‚΄λŠ” λͺ©λ‘μœΌλ‘œ, 각 ν•­λͺ©μ˜ μš©μ–΄μ™€ μ •μ˜λŠ” 콜둠과 μ€„λ°”κΏˆμœΌλ‘œ κ΅¬λΆ„λ©λ‹ˆλ‹€. DL λͺ©λ‘μ˜ 기호 μŠ€νƒ€μΌμ€ λ§ˆν¬λ‹€μš΄μ—μ„œ μ§μ ‘μ μœΌλ‘œ μ§€μ›ν•˜μ§€ μ•Šμ§€λ§Œ, μš©μ–΄μ™€ μ •μ˜λ₯Ό κ΅¬λΆ„ν•˜λŠ” 콜둠과 λ“€μ—¬μ“°κΈ°λ₯Ό μ΄μš©ν•˜μ—¬ μ‹œκ°μ μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ§ˆν¬λ‹€μš΄μ˜ λͺ©λ‘ 기호 μŠ€νƒ€μΌμ„ μ΄μš©ν•˜λ©΄ λͺ©λ‘μ˜ 외관을 μ›ν•˜λŠ” λŒ€λ‘œ λ³€κ²½ν•  수 있으며, 상황에 맞게 μ μ ˆν•œ μŠ€νƒ€μΌμ„ μ„ νƒν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. OL λͺ©λ‘μ€ 숫자 기호, 둜마 숫자 기호, μ•ŒνŒŒλ²³ 기호 λ“±μœΌλ‘œ λ³€κ²½ν•  수 있고, DL λͺ©λ‘μ€ 콜둠과 λ“€μ—¬μ“°κΈ°λ₯Ό μ΄μš©ν•˜μ—¬ μ •μ˜μ™€ μš©μ–΄λ₯Ό μ‹œκ°μ μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, DL λͺ©λ‘μ€ HTMLμ—μ„œμ˜ <dl> νƒœκ·Έμ™€ 같은 μ •ν™•ν•œ 의미둠적인 ꡬ쑰λ₯Ό μ œκ³΅ν•˜μ§€λŠ” μ•ŠμŠ΅λ‹ˆλ‹€.

λ‹€μ–‘ν•œ λͺ©λ‘ 기호 μŠ€νƒ€μΌμ„ ν™œμš©ν•˜μ—¬ λͺ©λ‘μ„ 보닀 μ‰½κ²Œ 이해할 수 μžˆλ„λ‘ μž‘μ„±ν•  수 있으며, λ§ˆν¬λ‹€μš΄μ˜ λͺ©λ‘ κΈ°λŠ₯은 λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό κ°„κ²°ν•˜κ²Œ ν‘œν˜„ν•˜λŠ” 데 μœ μš©ν•œ λ„κ΅¬μž…λ‹ˆλ‹€.

λŒ“κΈ€