HTML 목록(Lists)

« Previous Next Chapter »

Example of an unordered list and an ordered list in HTML:

Unordered List:

  • Item
  • Item
  • Item
  • Item

Ordered List:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

순서없는(Unordered) HTML Lists

순서없는 목록(unordered list)는 <ul> 태그로 시작한다. 각 항목은 <li> 태그로 시작한다.

목록 항목들은 작은 검은 점(bullet:small black circles)으로 표시된다. .

Example

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Try it Yourself »

순서없는HTML Lists - Style 속성

마커의 스타일을 정의 하는데,  style 속성을 unordered list 에 추가할 수 있다.:

Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

Disc:

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

Circle:

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

Square:

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

None:

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Try it Yourself »
Note  <ul style="list-style-type:disc"> 대신에, type 속성 <ul type="disc">도 작동한다.

순서있는(Ordered) HTML Lists

순서있는 목록은 <ol> 태그로 시작하며, 각 항목은 <li> 태그로 시작한다.

목록 항목들은 숫자로 표시된다.

Example

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Try it Yourself »

순서있는HTML Lists - Type 속성

마커의 타입을 정의하기 위해서 type 속성을 순서있는 목록(ordered list)에 추가 할 수 있다:

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

설명 목록(description list)은 용어와 용어에 대한 설명에 사용하는 목록이다.

<dl> 태그는 설명목록을 정의한다.

<dt> 태그는 용어(term)를 정의하며, <dd> 태그는 설명(description)을 정의한다.

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

목록은 중첩(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  목록 항목은 새로운 목록과 이미지와 링크 등과 같은 다른 HTML 요소를 포함할 수 있다.

수평(Horizontal) Lists

HTML 목록은 CSS로 다양한 방법으로 스타일 될 수 있다.

한가지 자주 사용되는 방법은 목록이 수평으로 표시되도록 스타일 하는 것이다. :

Example

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
Try it Yourself »

With a little extra style, you can make it look like a menu:

Example

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
Try it Yourself »

Chapter Summary

  • Use the HTML <ul> element to define an unordered list
  • Use the HTML style attribute to define the bullet style
  • Use the HTML <ol> element to define an ordered list
  • Use the HTML type attribute to define the numbering type
  • Use the HTML <li> element to define a list item
  • Use the HTML <dl> element to define a description list
  • Use the HTML <dt> element to define the description term
  • Use the HTML <dd> element to define the description data
  • Lists can be nested inside lists
  • List items can contain other HTML elements
  • Use the CSS property display:inline to display a list horizontally

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »

HTML List Tags

Tag Description
<ul> 순서없는 목록(unordered list) 정의
<ol> 순서있는 목록(ordered list) 정의
<li> 목록 항목 정의
<dl> 설명 목록(description list) 정의
<dt> 설명 목록의 용어(term)를 정의
<dd> 설명 목록의 설명(description)을 정의

« Previous Next Chapter »