html 태그 중에 리스트 태그의 종류는 3가지가 있습니다.
  • ul(Unordered List) - 번호가 없는 리스트
  • ol(Ordered List) - 번호가 있는 리스트
  • dl(Definition List) - 정의 리스트
위의 리스트는 번호가 없는 리스트, 즉 ul 로 작성했습니다.^^

ol(Ordered List)은 번호가 자동적으로 붙어서 나오게 됩니다.
  1. 첫번째
  2. 두번째
  3. 세번째
ol리스트 앞의 번호 타입을 지정해 줄수 있습니다.
<ol type="1">
  1. 첫번째
  2. 두번째

<ol type="A">
  1. 첫번째
  2. 두번째

<ol type="a">
  1. 첫번째
  2. 두번째

<ol type="I">
  1. 첫번째
  2. 두번째

<ol type="i">
  1. 첫번째
  2. 두번째

* ol 리스트 type 의 디폴트는 "1" 이기 때문에 생략 가능합니다.

ul의 type도 변경 가능합니다.
<ul type="disc">
  • 첫번째
  • 두번째

<ul type="circle">
  • 첫번째
  • 두번째

<ul type="square">
  • 첫번째
  • 두번째

* ul 리스트 type의 디폴트는 "disc"이기 때문에 생략 가능합니다.

정의 리스트인 dl 태그는 일반적으로 텀(term)과 정의(definition)의 짝들로 이루어져 있습니다.
dt 태그 안에는 인라인 태그만 사용할 수 있으며, dd 태그 안에는 인라인,블럭 태그 둘 다 사용이 가능합니다.
<dl>
   <dt>재료</dt>
   <dd>설탕</dd>
   <dd>간장</dd>
   <dd>밀가루</dd>
</dl>

실행화면
재료
설탕
간장
밀가루

리스트태그는 다른 태그들과 같이 사용 될 수 있습니다.
<dl>
   <dt>재료</dt>
   <dd>
        <ul>
             <li>설탕</li>
             <li>간장</li>
             <li>밀가루</li>
        </ul>
   </dd>
</dl>

실행화면

재료
  • 설탕
  • 간장
  • 밀가루


자주 하는 실수

리스트 태그 사이에는 다른 태그를 사용할 수 없습니다.
<ul>
    <li></li>
    <div></div>
</ul>

<dl>
    <dt></dt>
    <p></p>
    <dd></dd>
</dl>


'Web publisher > xhtml, css' 카테고리의 다른 글

HTML 특수문자코드표  (0) 2009/05/04
그놈의 클리어타입 (clear type)  (7) 2009/05/02
리스트 태그  (0) 2009/04/28
XHTML and CSS  (0) 2009/04/13
Internet Explorer 8 과 ie8 css  (0) 2009/04/09
100% 레이아웃  (0) 2009/04/02
[웹표준 공부하기 추천 책]
Posted by 별군