[HTML] list 목록 태그
2023. 3. 7. 23:36ㆍ기술 창고/HTML
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>목록 태그</title>
</head>
<body>
<h1>목록 태그</h1>
<h2>Unordered List</h2>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ol>
<h2>Definition List</h2>
<dl>
<dt>Definition term</dt>
<dd>Definition description</dd>
<dd>Definition description</dd>
<dd>Definition description</dd>
</dl>
<hr>
<h2>서브메뉴</h2>
<ul>
<li>About Us
<ul>
<li>Ceo Greeting</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Works</li>
<li>Services</li>
<li>Locations</li>
</ul>
</body>
</html>
<!--
# 목록 리스트를 손쉽게 나타내는 단축 명령어 : ul>li*4{list-item} -> 목록 메뉴 태그 ul에서 list를 담당하는 li 태그를 4개 아이템으로 구성하겠다는 뜻.
# li 태그로 생성된 검은 색 점 부분을 bullet이라고 한다.
# 순서가 중요한 리스트의 경우에는 ol 태그를 사용한다.
# ul 태그의 첫 자식 요소는 반드시 li 태그가 와야 한다.
# ol 태그의 첫 자식 요소는 반드시 li 태그가 와야 한다.
# dl 태그의 첫 자식 요소는 반드시 dt 태그와 dd 태그로 구성되어야 한다.
dl 태그는 정의된 텍스트 목록을 의미한다.
dt 태그는 정의된 텍스트의 대표 텍스트라고 보면 될 것이다.
dd 태그는 dt 태그로 생성된 항목을 설명하는 리스트 아이템들이다.
# <ul>
<li>list item1</li>
</ul>
<ul>
<li>list item1</li>
</ul>
위와 같은 형식은 리스트라고 볼 수 없다.
# 항목에 속한 서브 메뉴들을 나타내기 위해서는 li태그 안에 ul 태그 리스트들을 넣으면 서브메뉴 항목들을 만들 수 있다.
-->- <ul> : bullet 리스트를 생성하는 태그.
- <ol> : 순서 리스트를 생성하는 태그.
- <li> : ul, ol 태그 안에서 리스트 목록 아이템을 생성하는 태그.
- <dl> : 용어와 그에 대한 설명을 리스트 형식으로 생성하는 태그.
- <dt> : dl 태그 안에서 설명할 대표 용어를 생성하는 태그.
- <dd> : dt 태그로 생성된 대표 용어를 설명할 내용을 생성하는 태그.
- 리스트 내에서 다시 서브 메뉴들을 생성하기 위해서는 li 태그 안에 ul 태그 리스트들을 생성하면 서브메뉴 항목들을 만들 수 있다.
- 리스트를 한번에 원하는 만큼 생성하기 위한 간단 명령어
- ul>li*4{list-item} : ul 태그의 li 태그 리스트 아이템을 4개 생성하겠다는 명령어.
- ol>li*4{list-item} : ol 태그의 li 태그 리스트 아이템을 4개 생성하겠다는 명령어.
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] anchor 태그 (0) | 2023.03.09 |
|---|---|
| [HTML] 테이블 태그 (2) | 2023.03.07 |
| Visual Code 설치와 초기 html 작성 (0) | 2023.03.07 |
| [HTML] 정형화된 텍스트 (0) | 2023.03.07 |
| [HTML] 시멘틱 (semantic) 구분 (0) | 2023.03.07 |