공통적으로 사용하는 항목을 나타내는 태그
- <li></li>
1. 순서목록
- <ol></ol> 순서가 있는 목록 사용 시
- 기본값으로 숫자가 정해져 있다.
- type 속성을 사용하여 로마자 숫자, 영어로 바꾸어 줄 수 있다. 5가지 사용 가능
- 숫자, 대문자 영어, 소문자 영여, 대문자 로마숫자, 소문자 로마숫자
- CSS 속성을 사용하여 type 속성을 바꿀 수 있다.
- style="list-style-type: 다양한 값;" 다양한 값에 원하는 값 넣기 / 아래 링크에서 확인가능
- <ol type="a" start="3"> start 속성으로 시작 번호를 지정할 수 있다.
W3Schools CSS list-style-type demonstration
www.w3schools.com
예>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서 목록</title>
</head>
<body>
<h2>순서 목록 사용 예</h2>
<ol>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="A">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="a">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="I">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<ol type="i">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ol>
<h2>오늘의 점심 메뉴</h2>
<ol style="list-style-type: armenian;">
<li>롯데리아</li>
<li>순대 국밥</li>
<li>양푼 비빔밥</li>
<li>점심 특선</li>
<li>가정식 백반</li>
</ol>
</body>
</html>2. 비순서목록
- <ul></ul> 순서가 없는 목록 사용 시
- 도형을 사용해서 목록을 표현, 이런 작은 그림을 bullet 불릿이라고 한다.
- style 속성을 사용하여 불릿을 변경할 수 있다. 기본값은 disc;
- style="list-style-type: disc / circle / square / none ;"
- 4개 중에 하나를 사용할 수 있으며, ● / ○ / ■ / 공란으로 표시된다.
- none은 사이트 메뉴를 작성할 때 디자인 요소를 위해서 많이 사용된다.
예>
<!DOCTYPE html><!--2.14 두번째-->
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비순서 목록</title>
</head>
<body>
<h2>비순서 목록 사용 예</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<hr>
<h2>오늘의 점심 메뉴</h2>
<ul style="list-style-type: circle;">
<li>자장면</li>
<li>짬뽕</li>
<li>탕수육</li>
<li>깐풍기</li>
</ul>
</body>
</html>
3. 정의 목록
각 용어에 대한 설명을 할 수 있도록 만들어진 목록
- <dl></dl> 목록을 정의
- <dt></dt> 용어(이름)를 정의
- <dd></dd> 각 용어를 설명한다.
화면에 나오는 예>
<!DOCTYPE html>
<html>
<body>
<h2>Tea List</h2>
<dl>
<dt>백차</dt>
<dd>솜털이 덮인 차의 어린 싹을 닦거나 비비지 않고, 그대로 건조시켜 만든 차이다.</dd>
<dt>녹차</dt>
<dd>발효시키지 않은, 푸른 빛이 그대로 나도록 말린 찻잎(茶葉), 또는 찻잎을 우린 물을 말한다.</dd>
<dt>우롱차</dt>
<dd>녹차와 홍차의 중간으로 발효 정도가 30-70% 사이의 차를 말하며 반발효차로 분류된다.</dd>
<dt>홍차</dt>
<dd>백차, 녹차, 우롱차보다 더 많이 산화된 차(Camellia Sinensis)의 일종이다.</dd>
</dl>
</body>
</html>
4. 목록 섞어서 하위 목록 만들기
목록 사이사이에 넣어야 하기 때문에
큰 틀을 먼저 만들어 놓고 그 안에 목록을 채워나가는 순서로 작성하면 쉽다.
예>
<!DOCTYPE html>
<html>
<head>
<title>목록 섞어서 만들기</title>
</head>
<body>
<h1>HTML 태그 목록</h1>
<ol>
<li>html
<ol type="A">
<li>head
<ul>
<li>meta</li>
<li>title</li>
</ul>
</li>
<li>body
<ul>
<li>title tag</li>
<li>list tag</li>
<li>text tag</li>
</ul>
</li>
</ol>
</ol>
</body>
</html>
'Front-End > HTML' 카테고리의 다른 글
| HTML 태그 한 눈에 정리하기 2 (0) | 2023.02.20 |
|---|---|
| HTML 태그 한 눈에 정리하기 1 (0) | 2023.02.16 |
| HTML 태그- table 2 (0) | 2023.02.14 |
| HTML 태그 - table (0) | 2023.02.11 |
| HTML - Favicon이란? (0) | 2023.02.08 |
