Post

05. HTML- Typing the contents(List)

Posted
Preview Image
By younghoonko
4 min read
05. HTML- Typing the contents(List)

4. 웹 문서에 내용 입력하기

[toc]

4-2. 목록 만들기

이번 시간에는 HTML 문서에서 항목들을 나열할 수 있는 목록(list) 태그를 학습하였다. 목록 태그는 정보 구조를 명확하게 하고, 사용자에게 직관적인 콘텐츠 탐색 경험을 제공한다. 대표적인 목록 형태는 세 가지로 나뉜다: 순서 있는 목록 <ol>, 순서 없는 목록 <ul>, 설명 목록 <dl>.

1. <ol> 태그와 <li> 태그 — 순서 있는 목록

  • ol은 “ordered list”의 줄임말로, 항목이 순차적으로 정렬된 목록을 의미한다.
  • 각 항목은 <li> 태그로 감싸며, <ol> 내부에 위치시킨다.
1
2
3
4
5

<ol>
  <li>샤워를 한다</li>
  <li>밥을 먹는다</li>
  ...
</ol>

✅ 속성: type, start

<ol> 태그는 기본적으로 1부터 시작하는 숫자 리스트를 출력하지만, 속성을 통해 번호 유형 및 시작 번호를 다양하게 설정할 수 있다.

속성설명
type=”1”기본 숫자 (1, 2, 3)
type=”a”소문자 알파벳
type=”A”대문자 알파벳
type=”i”로마 숫자 (소문자)
type=”I”로마 숫자 (대문자)
start=”3”시작 번호를 3으로 설정
1
2
3
4
5
6
7
8
9

<ol type="a">
  <li>샤워를 한다</li>
  <li>밥을 먹는다</li>
</ol>

<ol type="a" start="3">
  <li>샤워를 한다</li>
  <li>밥을 먹는다</li>
</ol>

2. <ul> 태그와 <li> 태그 — 순서 없는 목록

  • ul은 “unordered list”의 줄임말로, 항목 간 순서가 중요하지 않은 목록을 만들 때 사용된다.
  • <ul> 태그 안에 <li> 태그를 사용하여 항목을 작성한다.
  • 항목 앞에는 기본적으로 불릿(bullet)이 표시되며, <ol>과는 달리 type이나 start 속성은 사용하지 않는다.
1
2
3
4
5

<ul>
  <li>샤워를 한다</li>
  <li>밥을 먹는다</li>
  <li>운동을 한다</li>
</ul>

3. <dl>, <dt>, <dd> 태그 — 설명 목록

  • dl은 “description list”의 약자로, 용어(term)와 설명(description)으로 구성된 목록을 만든다.
  • 용어는 <dt>로, 설명은 <dd>로 작성하며, <dl> 태그 안에 포함시킨다.
  • 하나의 <dt>에 여러 개의 <dd>를 배치할 수 있다.
1
2
3
4

<dl>
  <dt>name</dt>
  <dd>value</dd>
</dl>

1
2
3
4
5
6

<dl>
  <dt>name</dt>
  <dd>value1</dd>
  <dd>value2</dd>
  <dd>value3</dd>
</dl>

이 방식은 사전 스타일의 구조나 콘텐츠에 대한 속성 정의 등에 자주 사용된다.

📌 정리
목록 태그는 콘텐츠를 시각적으로 구분하고 정리하는 데 매우 중요한 역할을 한다. <ol>, <ul>, <dl> 각각의 목적과 구조를 정확히 이해하여 문서 구조화에 적극 활용할 수 있어야 한다.

End

HTML, HTML-Study
html