Web publisher/xhtml, css2009/04/28 18:29
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>


오픈캐스트 발행에 참여해주실 블로거분들은 방명록에 남겨주세요^^

[블로그 꾸미기 추천 책]
Posted by 별군

댓글을 달아 주세요