목록들을 나열하고 싶을 때 쓰는 리스트 태그에 대해 알아보겠습니다.
리스트 태그에는 3가지 종류가 있습니다.
① ol 태그 |
순서가 있는 목록(리스트) |
② ul 태그 |
순서가 없는 목록(리스트) |
③ dl 태그 |
설명 리스트 |
위의 리스트 태그는 아래와 같은 목록 요소(자식 요소)를 가집니다.
<ol>태그, <ul>태그
① li 태그 |
목록 요소 |
<dl>태그
① dt 태그 |
용어 |
② dd 태그 |
용어에 대한 설명문(들여쓰기) |
합쳐서 정리하면 아래와 같습니다.
① ol 태그 + li 태그 | 순서가 있는 목록(리스트) |
② ul 태그 + li 태그 | 순서가 없는 목록(리스트) |
③ dl 태그 + dt 태그 + dd 태그 | 설명 리스트 |
#1 <ol>태그와 <li>태그
표에서 봤다시피 <ol>태그는 순서가 있는 리스트 태그입니다.
<ol> 태그 안에는 무조건 목록 요소인 <li>태그가 들어갑니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ol>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ol>
</body>
</html>
실제 웹페이지
<ol>태그는 순서가 있기 때문에 번호를 자동으로 매깁니다.
뿐만 아니라 <ol>태그의 속성을 이용해서 타입과 시작 번호도 변경 가능합니다.
속성
type="" |
I, A, a, i |
start="" |
시작번호 설정 속성 |
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ol type="I" start="3"> -->대문자 I타입, 3번째 숫자부터 시작
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ol>
</body>
</html>
실제 웹페이지
대문자 I타입으로 3번째 숫자부터 나열된 것을 확인할 수 있습니다.
#2 <ul>태그와 <li>태그
<ul>태그는 순서가 없는 목록 태그입니다.
<ul>태그도 <ol>태그와 마찬가지로 목록 요소인 <li>태그를 가집니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
</html>
실제 웹페이지
<ul>태그를 사용하면 번호가 매겨지지 않고 순서대로 나열됩니다.
<li>태그 개수마다 ●기호가 순서를 대신합니다.
이 기호를 변경하고 싶다면 CSS로 list-style-type을 사용합니다.
list-style-type은 종류가 많지만 그 중 몇 가지만 소개하겠습니다.
circle |
기호 ○ |
disc |
기호 ● |
square |
기호 ■ |
또한 목록 요소인 <li>태그 안에 또 <ul>이나 <ol>태그 즉, 리스트 태그를 넣을 수 있습니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul>
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>
<ul>
<li>리스트A</li>
<li>리스트B</li>
<li>리스트C</li>
</ul>
</li>
</ul>
</body>
</html>
실제 웹페이지
첫번째 리스트 목록 요소 안에 또 다른 두번째 리스트가 들어간 것을 알 수 있습니다.
#3 <dl>, <dt>, <dd>태그
<dl>태그는 설명 리스트 태그입니다. <dl>태그에는 <dt>, <dd>태그가 반복됩니다.
표시방법
<!DOCTYPE html>
<html lang="ko">
<head>
<title>리스트</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<dl>
<dt>용어1</dt>
<dd>- 용어1에 대한 설명문</dd>
<dt>용어2</dt>
<dd>- 용어2에 대한 설명문</dd>
<dt>용어3</dt>
<dd>- 용어3에 대한 설명문</dd>
</dl>
</body>
</html>
실제 웹페이지
<dd>태그는 용어에 대한 설명문으로 위와 같이 들여쓰기 됩니다.
'IT > HTML' 카테고리의 다른 글
| HTML - form태그 (0) | 2020.11.26 |
|---|---|
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
| HTML-<a>태그 (0) | 2020.11.25 |
| HTML-글자 태그 (0) | 2020.11.25 |
댓글