[글머리 숫자 목록]에 사용하는 태그 : ol, li

[글머리 숫자 목록]에 사용하는 태그

<ol><li>목록1</li><li>목록2</li></ol>


<ol>태그 그룹은 글머리 숫자가 붙은 목록을 표현할 때 사용한다. <ol>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. <ul>태그와는 달리 HTML4와 HTML5에서 type 속성을 지원하며 start 속성도 지원한다. HTML5에서는 오름차순 정렬인 reversed 속성이 새로 추가되었으나 지원하지 않는 브라우저가 많기 때문에 신중히 사용해야 한다. 


◈ <ol><li> 태그 문법

<ol>

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</li>

</ol>

<hr />

<ol>

   <li type="A">사과</li>

   <li type="A">복숭아</li>

   <li type="A">자두</li>

   <li type="A">살구</li>

</ol>

<hr />

<ol start="10">

   <li type="1">사과</li>

   <li type="1">복숭아</li>

   <li type="1">자두</li>

   <li type="1">살구</li>

</ol>


ol_li_tag_sample.html



□ 사용 가능한 속성

속성

설명

type

1

A

a

I

i

<ol>태그에 사용하면 목록 전체, <li>태그에 사용하면 해당 목록의 타입을 지정할 수 있음.

글머리 숫자를 숫자, 알파벳 대소문자, 로마자로 표현할 수 있음.

reverse

-

<ol reverse>로 사용하며 속성의 값이 없음.

HTML5에서 새로 추가된 속성이며 일부 브라우저(뷰어)에서만 사용 가능함


◆ 기본 제공되는 글머리 이외에 다양한 글머리 표현하기 --> 링크

<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.


자세한 설명은 링크를 참조하세요.

설정

트랙백

댓글


티스토리 툴바