[글머리 숫자 목록]에 사용하는 태그 : 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여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.