HTML 목록(HTML Lists)

HTML List Example

HTML 목록 예제

An Unordered HTML List

• Coffee
• Tea
• Milk

An Ordered HTML List

1. Coffee
2. Tea
3. Milk

Try it Yourself »

---

Unordered HTML List

정렬되지 않은 HTML 목록

An unordered list starts with the <ul>tag. Each list item starts with the <li> tag.

정렬되지 않은 목록은 <ul>태그로 시작합니다 . 각 목록 항목은 <li>태그로 시작합니다 .

The list items will be marked with bullets (small black circles) by default:

목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다.

Example

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

---

Unordered HTML List - Choose List Item Marker

정렬되지 않은 HTML 목록 - 목록 항목 마커 선택

The CSS list-style-type property is used to define the style of the list item marker:

CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용됩니다.

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Example - Disc 디스크

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example - Circle 원

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example - Square 사각

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

Example - None 없음

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

 

---

Ordered HTML List

순서가 지정된 HTML 목록

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

순서가 지정된 목록은 <ol>태그로 시작합니다 . 각 목록 항목은 <li>태그로 시작합니다 .

The list items will be marked with numbers by default:

목록 항목에는 기본적으로 숫자가 표시됩니다.

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

---

Ordered HTML List - The Type Attribute

정렬 된 HTML 목록 - 유형 속성

The type attribute of the <ol> tag, defines the type of the list item marker:

태그 의 type속성은 <ol>목록 항목 마커의 유형을 정의합니다.

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

Numbers: 번호:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Uppercase Letters: 대분자:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Lowercase Letters: 소문자:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Uppercase Roman Numbers:대문자 로마 숫자

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

Lowercase Roman Numbers: 소문자 로마 숫자

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

---

HTML Description Lists

HTML 설명 목록

HTML also supports description lists.

HTML은 설명 목록도 지원합니다.

A description list is a list of terms, with a description of each term.

설명 목록은 각 용어에 대한 설명과 함께 용어 목록입니다.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

<dl>태그는 상기 설명 목록을 정의 <dt>태그 용어 (이름)를 정의하고, <dd> 태그는 각각의 용어 설명 :

Example

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Try it Yourself »

---

Nested HTML Lists

중첩 된 HTML 목록

List can be nested (lists inside lists):

목록을 중첩 할 수 있습니다 (목록 내부에 나열).

Example

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Try it Yourself »

Note : List items can contain new list, and other HTML elements, like images and links, etc.

참고 : 목록 항목에는 새 목록과 이미지 및 링크와 같은 기타 HTML 요소가 포함될 수 있습니다.

---

Control List Counting

제어 목록 계산

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

기본적으로 순서가 지정된 목록의 수는 1부터 시작됩니다. 지정한 수에서 계산을 시작하려면 다음 start특성을 사용할 수 있습니다 .

Example

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Try it Yourself »

---

Horizontal List with CSS

CSS가있는 가로 목록

HTML lists can be styled in many different ways with CSS.

HTML 목록은 CSS를 사용하여 다양한 방식으로 스타일을 지정할 수 있습니다.

One popular way is to style a list horizontally, to create a navigation menu:

한 가지 일반적인 방법은 목록을 가로 방향으로 스타일을 지정하여 탐색 메뉴를 만드는 것입니다.

Example

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>
 
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
 
</body>
</html>

Try it Yourself »

Tip : You can learn much more about CSS in our CSS Tutorial.

팁 : CSS에 대한 자세한 내용은 CSS 자습서를 참조하십시오 .

---

Chapter Summary

Use the HTML <ul> element to define an unordered list

<ul>정렬되지 않은 목록을 정의 하려면 HTML 요소를 사용하십시오.

Use the CSS list-style-type property to define the list item marker

CSS list-style-type속성을 사용하여 목록 항목 마커 정의

Use the HTML <ol> element to define an ordered list

HTML <ol>요소를 사용하여 정렬 된 목록 정의

Use the HTML type attribute to define the numbering type

type번호 매기기 유형을 정의 하려면 HTML 속성을 사용하십시오.

Use the HTML <li> element to define a list item

HTML <li>요소를 사용하여 목록 항목 정의

Use the HTML <dl> element to define a description list

HTML <dl>요소를 사용하여 설명 목록 정의

Use the HTML <dt> element to define the description term

HTML <dt>요소를 사용하여 설명 용어 정의

Use the HTML <dd> element to describe the term in a description list

HTML <dd>요소를 사용하여 설명 목록에 용어를 설명합니다.

Lists can be nested inside lists

목록은 목록 내부에 중첩 될 수 있습니다.

List items can contain other HTML elements

목록 항목에는 다른 HTML 요소가 포함될 수 있습니다.

Use the CSS property float:left or display:inline to display a list horizontally

CSS 속성을 사용 float:left하거나 display:inline가로로 목록을 표시하십시오.

---

Test Yourself with Exercises!

---

HTML List Tags

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

---

출처 : W3School.com