목록을 생성한다고 하면, 주로 글에서 순서대로 목록을 텍스트로 나열하는 기능만을 생각하실 것입니다. 물론, 텍스트와 콘텐츠의 줄 별 정렬을 위해서도 사용하지만 CSS를 통해서 내비게이션이나 콘텐츠의 배열을 구성하는 데 있어서도 응용하여 다양하게 사용되는 태그입니다. 이번 아티클에서는 html에서의 목록 태그를 살펴보도록 하겠습니다.
○ <ol>, <li> - 순서가 있는 목록 만들기
<ol>은 기본적으로 ordered list의 줄임말입니다. 즉, 각 목록 콘텐츠에 순서(숫자나 알파벳 등)이 배정되는 리스트 목록을 의미합니다. <ol> 태그로 리스트를 생성하고 내부에 <li> 태그를 통해서 콘텐츠를 삽입하게 됩니다. 아래 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>순서있는 리스트 생성하기</h2>
<p>순서있는 리스트는 ordered list를 의미합니다.</p>
<ol>
<li>첫 번째 입니다.</li>
<li>두 번째 입니다.</li>
<li>세 번째 입니다.</li>
</ol>
</body>
</html>
순서있는 리스트 생성하기
순서있는 리스트는 ordered list를 의미합니다.
- 첫 번째 입니다.
- 두 번째 입니다.
- 세 번째 입니다.
순서 있는 목록의 경우, 위와 같이 <li>에 아무 값도 지정하지 않으면 숫자로 리스트의 순서를 매기게 되어있습니다. 하지만 <ol> 태그의 속성 값을 이용하여 순서를 매기는 기준 표시 타입을 변경할 수도 있고, 시작하는 값을 임의로 지정할 수도 있습니다.
type 속성을 사용하면 숫자 이외의 알파벳이나 로마자를 통해서 순서를 표기할 수 있습니다.
- type = "1" : 숫자
- type = "a" : 알파벳 소문자
- type = "A" : 알파벳 대문자
- type = "i" : 로마 숫자 소문자
- type = "I" : 로마 숫자 대문자
역시 예문을 살펴보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>순서있는 리스트 생성하기</h2>
<p>순서있는 리스트는 ordered list를 의미합니다.</p>
<ol type="a">
<li>첫 번째 입니다.</li>
<li>두 번째 입니다.</li>
<li>세 번째 입니다.</li>
</ol>
<ol type="i">
<li>첫 번째 입니다.</li>
<li>두 번째 입니다.</li>
<li>세 번째 입니다.</li>
</ol>
<ol type="1" start="8">
<li>첫 번째 입니다.</li>
<li>두 번째 입니다.</li>
<li>세 번째 입니다.</li>
</ol>
</body>
</html>
○ <ul>, <li> - 순서가 없는 목록 만들기
<ul>은 unordered list의 줄임말입니다. 즉, 각 목록 콘텐츠에 순서가 없이 배정되는 리스트 목록을 의미합니다. <ul> 태그로 리스트를 생성하고 내부에 <li> 태그를 통해서 콘텐츠를 삽입하게 됩니다. 이번에도 아래와 같이 예시를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>순서없는 리스트 생성하기</h2>
<p>순서없는 리스트는 unordered list를 의미합니다.</p>
<ul>
<li>첫 번째 입니다.</li>
<li>두 번째 입니다.</li>
<li>세 번째 입니다.</li>
</ul>
</body>
</html>
순서없는 리스트 생성하기
순서없는 리스트는 unordered list를 의미합니다.
- 첫 번째 입니다.
- 두 번째 입니다.
- 세 번째 입니다.
○ <dl>, <dt>+<dd> - 설명 목록 만들기
설명 목록, 즉 description list는 기존 <li>라는 단일 태그로 구성되는 목록이 아니라 하나의 콘텐츠가 <dt>와 <dd>로 구성되는 목록 형태를 의미합니다. 사용법은 비슷하지만, 하나의 목록이 이름(dt)과 값(dd)으로 구성된다는 차이가 있습니다. 여기서 <dd>는 하나의 <dt>에 복수로 사용할 수 있다는 점을 기억해 두세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>설명목록 만들기</h2>
<p>설명 목록은 dt와 dd를 사용합니다.</p>
<dl>
<dt>첫 번째 입니다.</dt>
<dd>첫 번째 중 1번</dd>
<dd>첫 번째 중 2번</dd>
<dt>두 번째 입니다.</dt>
<dd>두 번째 중 1번</dd>
<dd>두 번째 중 2번</dd>
</dl>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(3) - 표 생성하기 2 (0) | 2023.02.26 |
|---|---|
| 2. 내용 입력하기(3) - 표 생성하기 1 (0) | 2023.02.24 |
| 2. 내용 입력하기(1) - 텍스트 입력 2 (0) | 2023.02.22 |
| 2. 내용 입력하기(1) - 텍스트 입력 1 (0) | 2023.02.22 |
| 1. HTML문서의 구조(2) - 시맨틱 태그 (0) | 2023.02.20 |
