목록 태그
- 목차와 메뉴를 구성할 때 주로 사용
1. 순서가 없는 리스트(unordered list): <ul></ul>
2. 정렬된 리스트(ordered list): <ol></ol>
3. 정의 리스트(description list): <dl></dl>
<ul>과 <ol>의 항목 태그: <li>
<dl>의 용어 이름: <dt>
<dl>의 용어 정의: <dd>
- <ul>과 <ol> 요소의 차이는 '순서의 중요성'
- <ul>과 <ol>은 직계 자식 요소로는 오직 <li> 요소만 올 수 있으며, 최소 하나 이상의 <li> 요소를 자식으로 가져야 한다.
- <dl>의 직계 자식 요소로는 <dt>와 <dd> 그리고 <div>만 올 수 있다.
- 목록 태그에 링크 태그 <a>를 적용시킬 때 <li> 안에 <a>를 작성해야 한다. 왜냐하면 <ul>과 <ol>은 직계 자식 요소로 <li>만 올 수 있기 때문이다.
1. 순서가 없는 리스트 <ul>
- <ul></ul>
- 순서가 중요하지 않은 목록을 나타날 때 사용
- <li>요소를 자식으로 가진다.
- 목록의 항목은 불릿(•)으로 표시된다.
<ul>
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ul>
CSS의 list-style-type 속성을 사용하여 글머리 기호 변경
| disc | 속이 찬 원형 ● / 기본값 |
| circle | 속이 빈 원형 ○ |
| square | 속이 찬 사각형 ■ |
| none | 아무기호 없음 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML list</title>
</head>
<body>
<h1>정렬되지 않은 리스트</h1>
<p>속이 찬 원형 (기본값)</p>
<ul>
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ul>
<p>속이 빈 원형</p>
<ul style="list-style-type: circle">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ul>
<p>속이 찬 사각형</p>
<ul style="list-style-type: square">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ul>
</body>
</html>
2. 순서가 있는 리스트 <ol>
- <ol></ol>
- 순서가 중요한 목록을 나타낼 때 사용
- <li> 요소를 자식으로 가진다.
- 목록의 항목은 숫자로 표시
<ol>
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
CSS의 list-style-type 속성을 사용하여 마커 모양 변경
| decimal | 숫자 (기본설정) |
| upper-alpha | 영문 대문자 |
| lower-alpha | 영문 소문자 |
| upper-roman | 로마 숫자 대문자 |
| lower-roman | 로마 숫자 소문자 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML list</title>
</head>
<body>
<h1>정렬된 리스트</h1>
<p>숫자 (기본값)</p>
<ol>
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
<p>영어 대문자</p>
<ol style="list-style-type: upper-alpha">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
<p>영어 소문자</p>
<ol style="list-style-type: lower-alpha">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
<p>로마자 대문자</p>
<ol style="list-style-type: upper-roman">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
<p>로마자 소문자</p>
<ol style="list-style-type: lower-roman">
<li>다람쥐</li>
<li>쿼카</li>
<li>웜뱃</li>
</ol>
</p>
</body>
</html>
3. 정의 리스트 <dl>
- <dl></dl>
- 정의 리스트는 용어를 사전적으로 정의하거나 설명할 때 사용
- dt 태그로 용어 작성
- dd 태그로 용어 설명 작성
- <dl>의 직계 자식 요소로는 <dt>와 <dd> 그리고 <div>만 올 수 있다.
- 브라우저가 이해할 수 있도록 <dl>, <dt>, <dd> 태그를 사용해서 용어에 대한 정의를 하고 있음을 나타내야 한다.
용어 이름 <dt>
용어 정의 <dd>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML list</title>
</head>
<body>
<h1>정의 리스트</h1>
<dl>
<dt>다람쥐</dt>
<dd>- 나무를 매우 잘 타지만 땅 위에서 더 많이 활동한다.
동면에 들어가기 전에는 먹이를 저장하는 습성이 있다.
</dd>
<dt>쿼카</dt>
<dd>- 항상 웃는 얼굴을 하고 있는 동물이기에,
'세상에서 가장 행복한 동물'이라는 별명이 있다.</dd>
</dl>
</body>
</html>
정의 태그 (definition)
<p>
<dfn>쿼카</dfn>는 항상 웃는 얼굴을 하고 있는 동물이기에,
'세상에서 가장 행복한 동물'이라는 별명이 있다.
</p>
'기술 > HTML' 카테고리의 다른 글
| [HTML] block / inline / inline-block (0) | 2022.10.08 |
|---|---|
| [HTML] 테이블 (0) | 2022.10.08 |
| [HTML] 폼 (0) | 2022.10.07 |
| [HTML] 하이퍼링크, 이미지 (0) | 2022.10.07 |
| [HTML] 멀티미디어 (0) | 2022.09.28 |