HTML List Example
HTML 목록 예제
An Unordered HTML List
- Coffee
- Tea
- Milk
An Ordered HTML List
- Coffee
- Tea
- Milk
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
cs
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 디스크
cs
Example - Circle 원
cs
Example - Square 사각
cs
Example - None 없음
cs
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
cs
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: 번호:
cs
Uppercase Letters: 대분자:
cs
Lowercase Letters: 소문자:
cs
Uppercase Roman Numbers:대문자 로마 숫자
cs
Lowercase Roman Numbers: 소문자 로마 숫자
cs
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
cs
Nested HTML Lists
중첩 된 HTML 목록
List can be nested (lists inside lists):
목록을 중첩 할 수 있습니다 (목록 내부에 나열).
Example
cs
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
cs
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
cs
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
'개발 실무' 카테고리의 다른 글
| HTML 클래스의 Attribute(HTML The class Attribute) (0) | 2018.06.18 |
|---|---|
| HTML 블록 및 인라인 요소(HTML Block and Inline Elements) (0) | 2018.06.17 |
| HTML 표(HTML Tables) (0) | 2018.06.15 |
| HTML 이미지(HTML Images) (0) | 2018.06.14 |
| HTML 링크(HTML Links) (0) | 2018.06.13 |