html/css 독학하기

코스 전체목록

닫기

ol

설명

The HTML ordered list element (<ol>) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.
There is no limitation to the depth and imbrication of lists defined with the <ol> and <ul> elements.

순서있는 목록 <ol>은 항목들을 순서대로 표현하기 위한 요소이다. 일반적으로 숫자, 알파벳, 로마 숫자 그외 간단한 블릿으로 나타내는 어떠한 형태의 목록에서든 순서있는 목록의 항목들은 앞에서부터 번호가 매겨진다. 어떤 형식의 번호가 붙게 될지는 처음부터 HTML 문서에 정의되어 있지 않다. 대신 HTML 문서와 연결된 CSS에서 list-style-type 속성을 사용해서 원하는 방식을 정할 수 있다.
<ol>과 <ul>에서는 하위 항목으로 들여쓸 수 있는 갯수에는 제한이 없으며, 하위에 포함될 항목의 개수에도 제한이 없다.

참고 :
The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, else the <ul> is adequate.

참고 :
<ol> 과 <ul>은 양쪽 다 목록을 표현한다는 점에서는 동일하다. 이 둘의 차이점은 <ol>에는 순서 그 자체가 의미가 있다는 점이다. <ol>과 <ul>중 어떤 것을 써야할지 고민이라면, 목록의 순서를 바꿔보자. 순서를 바꿔서 목록으로서의  의미가 변했다면 <ol>을 사용해야 한다. 하지만 순서를 바꾸어도 목록으로서의 의미가 변하지 않았다면 <ul>을 쓰는 것이 적절하다.

Usage Context

Permitted content zero or more <li> elements, eventually mixed with <ol> and <ul> elements.
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accept flowing content
Normative document HTML5, section 4.5.5 (HTML4.01, section 10.2)

속성

이 엘리먼트는 전역속성을 지원한다.

compact 폐기됨

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers.

이 속성은 불리언 속성이며, 목록이 컴팩트한 스타일로 렌더링 되야만한다는 것을 알려준다. 이 속성은 사용자의 컴퓨터에 따라 해석이 가능할 수도 있고 그렇지 않을 수도 있다. 또 모든 브라우저에서 다 작동되는 것은 아니다.

Usage note :
Do not use this attribute, as it has been deprecated: the <ol> element should be styled using CSS. To give a similar effect than the compact attribute, the CSS property line-height can be used with a value of 80%.

사용시 참고 :
이 속성은 폐지되었기 때문에 더 이상 사용하지 않는다. <ol>엘리먼트를 꾸며주기 위해서 CSS를 사용해야 하는데 compact와 비슷한 효과를 주기 위해서는 CSS의 line-height 속성값으로 약80%를 주면 된다.

reversed HTML5에서 도입

This Boolean attribute specifies that the items of the item are specified in the reverse order, i.e. that the least important one is listed first. Browsers, by default, numbered the items in the reverse order too.

이 속성은 불리언 속성이며, 항목 안에 있는 다른 항목들이 반대로 표시되도록 명시한다. 즉, 가장 중요하지 않은 항목이 맨 처음에 위치하도록 하는 것이다. 별다른 설정이 없는 상태에도 기본적으로 브라우저에서는 목록내의 항목을 거꾸로 보여준다.

start HTML5에서 도입

This integer attribute specifies the start value for numbering the individual list items. Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number. To start numbering elements from the letter "C", use <ol start="3">.

이 속성은 정수값을 가지며, 목록 내의 항목이 시작하는 값을 지정한다. 순서를 표시하는 방식이 로마숫자나 문자인 경우에도, start 속성값은 항상 숫자로 지정한다. 예를 들어 문자 "C"부터 시작하려고 한다면 <ol start="3"> 라고 써주면 된다.

Note: that attribute was deprecated in HTML4, but reintroduced in HTML5.

참고: 이 속성은 HTML4에서 폐지되었으나 HTML5에서 다시 도입되었다.

type HTML5에서 도입

Indicates the numbering type:

 •'a' indicates lowercase letters,
 •'A' indicates uppercase letters,
 •'i' indicates lowercase Roman numerals,
 •'I' indicates uppercase Roman numerals,
 •and '1' indicates numbers.
 
The type set is used for the entire list unless a different type attribute is used within an enclosed <li> element.

Usage note :
Do not use this attribute, as it has been deprecated: use the CSSlist-style-type property instead. 

type - 폐지예정

순서를 표시하는 유형을 가리킨다 : 

 •'a' : 소문자로 나타낸다. 
 •'A' : 대문자로 나타낸다.
 •'i' : 로마숫자 소문자로 표시한다. 
 •'I' : 로마숫자 대문자로 표시한다. 
 •'1' : 아라비아 숫자로 표시한다.

type으로 지정한 세트가 목록 내의 모든 항목에 적용된다. 단, <li>로 감싸진 요소 내에서 다른 type값이 지정된 경우에는 그 표시유형이 바뀔 수 있다. 

예제

 Simple example

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

Above HTML will output:
 1.first item
 2.second item
 3.third item

간단한 예제

<ol>
  <li>첫번째 항목</li>
  <li>두번째 항목</li>
  <li>세번째 항목</li>
</ol>

출력화면

Using the start attribute

<ol start="7">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

Above HTML will output:
 7.first item
 8.second item
 9.third item

start 속성을 사용한 예

<ol start="7">
  <li>첫번째 항목</li>
  <li>두번째 항목</li>
  <li>세번째 항목</li>
</ol>

출력화면

Nesting lists

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

Above HTML will output:
 1.first item
 2.second item
    1.second item first subitem
    2.second item second subitem
    3.second item third subitem
 3.third item

목록을 겹친 예제

<ol>
  <li>첫번째 항목</li>
  <li>두번째 항목      <!-- 여기서 잠깐!! </li> 요 닫는 태그가 여기 안 들어갑니다! -->
    <ol>
      <li>두번째 항목의 첫번째 하위항목</li>
      <li>두번째 항목의 두번째 하위항목</li>
      <li>두번째 항목의 세번째 하위항목</li>
    </ol>
  </li>                <!-- 자, 요기에 비로소 닫는 태그</li>가 나옵니다. -->
  <li>세번째 항목</li>
</ol>

출력화면

Nested <ol> and <ul>

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

Above HTML will output:
 1.first item
 2.second item
     ■second item first subitem
     ■second item second subitem
     ■second item third subitem
 3.third item

<ol>와 <ul>을 겹쳐 쓴 예제

<ol>
  <li>첫번째 항목</li>
  <li>두번째 항목      <!-- 여기도, 닫는태그 </li>가 없죠!! -->
    <ul>
      <li>두번째 항목의 첫번째 하위항목</li>
      <li>두번째 항목의 두번째 하위항목</li>
      <li>두번째 항목의 세번째 하위항목</li>
    </ul>
  </li>                <!--여기에 닫는태그 </li>가 나오고요. -->
  <li>세번째 항목</li>
</ol>

출력화면

DOM Interface

This element implements the HTMLOListElement interface.

이 요소는 HTMLOListElement 인터페이스를 구현하였다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 1.0 1.0 (1.7 or earlier) 1.0 1.0 1.0
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원 지원 1.0 (1.0) 지원 지원 지원

참고

댓글

댓글 본문
버전 관리
graphittie
현재 버전
선택 버전
graphittie 자세히 보기