[HTML] 리스트 관련 태그

웹 페이지를 만들다 보면 여러 항목을 나열해야 할 때가 많습니다.

이럴 때 유용하게 쓸 수 있는 것이 바로 리스트(list) 태그입니다.

HTML에서는 대표적으로 세 가지의 리스트 태그가 있으며, 각각의 목적과 사용법이 조금씩 다릅니다.

오늘은 그 리스트 태그들에 대해 하나씩 알아보겠습니다.

---

✨ 순서 없는 리스트: <ul>

<ul> 태그는 순서가 중요하지 않은 항목들을 나열할 때 사용합니다.

보통 항목 앞에 점(bullet) 모양이 붙는 것이 특징입니다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

위 코드를 웹 페이지에 넣으면 다음과 같이 표시됩니다

<ul> 태그는 unordered list의 약자이며, 안쪽에 들어가는 <li> 태그가 각각의 항목을 나타냅니다.

---

✨ 순서 있는 리스트: <ol>

<ol> 태그는 순서가 중요한 항목들을 나열할 때 사용합니다.

항목 앞에 숫자나 알파벳 등의 순서 표시가 자동으로 붙습니다.

<ol>
  <li>이메일 작성</li>
  <li>파일 첨부</li>
  <li>전송 클릭</li>
</ol>

결과는 다음과 같습니다

 

추가적으로, <ol> 태그에는 다양한 속성을 활용할 수 있습니다

• type: 표시할 순서 유형 지정 (1, A, a, I, i)
• start: 시작 번호 설정
• reversed: 역순으로 표시

예를 들어 아래 코드는 C, B, A 순으로 항목이 출력됩니다.

<ol type="A" start="3" reversed>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ol>

---

✨ 정의 리스트: <dl>, <dt>, <dd>

조금 특별한 리스트도 있습니다. 바로 정의 리스트(Definition List)입니다.

주로 용어와 그에 대한 설명을 짝지어서 보여줄 때 사용합니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 담당하는 마크업 언어입니다.</dd>

  <dt>CSS</dt>
  <dd>웹 페이지의 디자인과 레이아웃을 꾸밀 수 있게 도와주는 스타일 언어입니다.</dd>
</dl>

• <dl>: 정의 리스트 전체를 감싸는 태그
• <dt>: 정의할 용어
• <dd>: 용어에 대한 설명

 

이런 형식은 설명서나 용어집을 만들 때 특히 유용합니다.

---

✅ 마무리

HTML 리스트 태그는 단순한 나열 이상의 역할을 합니다.

정보를 깔끔하게 정리하고, 사용자의 눈에 잘 들어오게 구성할 수 있도록 도와줍니다.

상황에 맞게 <ul>, <ol>, <dl> 태그를 적절히 활용한다면 더욱 읽기 좋은 웹 페이지를 만들 수 있습니다.