HTML Lists
HTML Lists는 웹 페이지에서 항목들을 순서대로 나열하기 위해 사용되는 HTML 요소의 집합입니다.
리스트는 정보를 구조화하고 시각적으로 정돈된 방식으로 표시하는 데 사용됩니다.
크게 순서가 있는 목록과 순서가 없는 목록 등 두 가지 경우로 사용합니다.
HTML Lists는 웹 페이지의 정보 구조화에 유용하며, 목차, 항목 목록, 버튼 목록 등 다양한 형태로 사용될 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>An Unordered HTML List
- Coffee
- Tea
- Milk
An Ordered HTML List
- Coffee
- Tea
- Milk
Unordered HTML List
순서가 없는 목록은 <ul> 태그로 시작하며 각 목록의 아이템은 <li> 태그를 이용합니다.
목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<h3>오늘의 메뉴</h3>
<ul>
<li>김치찌개</li>
<li>흑미밥</li>
<li>계란말이</li>
<li>김</li>
</ul>
</body>
</html>An unordered HTML list
오늘의 메뉴
- 김치찌개
- 흑미밥
- 계란말이
- 김
Ordered HTML List
순서가 있는 목록은 <ol> 태그로 시작하며 각 목록의 아이템은 <li> 태그를 이용합니다.
목록 항목은 기본적으로 숫자로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>An ordered HTML list</h1>
<h2>To Do List</h2>
<ol>
<li>스프링 강의 듣기</li>
<li>코딩테스트 결과 확인 및 정리</li>
<li>프론트엔드 관련 HTML / 자바스크립트 정리</li>
</ol>
</body>
</html>An ordered HTML list
To Do List
- 스프링 강의 듣기
- 코딩테스트 결과 확인 및 정리
- 프론트엔드 관련 HTML / 자바스크립트 정리
Nested HTML Lists
HTML Lists는 중첩된 리스트를 만들 수도 있습니다. 즉, 한 리스트 내부에 다른 리스트를 포함시킬 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Nested HTML Lists</h2>
<ol>
<li>코딩테스트 큐 관련 문제 풀기</li>
<li>스프링 관련 공부</li>
<ul>
<li>스프링 강의 수강</li>
<li>스프링 북 스터디 정리</li>
</ul>
</ol>
<ul>
<li>프론트엔드 공부</li>
<ol>
<li>HTML</li>
<li>JavaScript</li>
</ol>
</ul>
</body>
</html>Nested HTML Lists
- 코딩테스트 큐 관련 문제 풀기
- 스프링 관련 공부
- 스프링 강의 수강
- 스프링 북 스터디 정리
- 프론트엔드 공부
- HTML
- JavaScript
HTML Description Lists
HTML Description Lists는 용어를 정의하거나 설명하는 데 사용되는 목록 유형입니다.
용어 정의 형식으로 정보를 구성하고 시각적으로 정돈된 방식으로 표시하는 데 유용합니다.
HTML Description Lists는 다음 세 가지 요소로 구성됩니다:
<dl> (Description List) : 용어와 설명을 감싸는 컨테이너 요소, 설명 목록을 정의입니다.
<dt> (Description Term) : 용어를 정의하는 데 사용되는 요소로, 보통 굵은 글씨로 표시됩니다.
<dd> (Description Description) : 용어에 대한 설명을 담는 요소로, 보통 일반 텍스트로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
</body>
</html>A Description List
- Coffee
- black hot drink
- Milk
- white cold drink
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML class Attribute (0) | 2023.07.28 |
|---|---|
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |
| HTML 튜토리얼 - HTML Tables (0) | 2023.07.19 |
| HTML 튜토리얼 - HTML Page Title (0) | 2023.07.17 |
| HTML 튜토리얼 - HTML Favicon (0) | 2023.07.17 |