반응형
항목 목록과 번호 목록(ul 요소, ol요소, li요소)
정의형목록(dl 요소, dt요소, dd요소)
일반적으로 목록작성에는 ul요소(비순차적 목록 unordered list) 또는 ol요소(순차적 목록 ordered list) 를 사용하며 각 항목은 li요소(list item)으로 정의한다.
ul요소, ol요소 모두 블륵 레벨 요소이지만 li요소 이외의 요소를 포함시킬 수 없다. li요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함할 수 있고 또 다른 블록 레벨 요소를 포함할 수 있다.
예제)
<p>웹브라우저의 종류는</p>
<ul type="square"><!-- type을 설정할 수 있음. circle | disc | square -->
<li>익스프로러
<ol type="a"><!-- type을 설정할 수 있음. A | a | I | i | 1 -->
<li>익스플로러 6</li>
<li>익스플로러 7</li>
<li>익스플로러 8</li>
</ol>
</li>
<li>파이어폭스</li>
<li>사파리</li>
<li>오페라</li>
<li>크롬</li>
</ul>
<p>등이 있다.</p>
-----------------
<ul>
<li>공지사항
<ul>
<li>제12회 전문가심사비납부 요청 공문 2011-03-10</li>
<li>제12회 품질마크 심사비 납부 안내 2011-02-21</li>
<li>2011년도 제 12회 웹 접근성 품... 2011-02-16</li>
<li>대납업체 알림 공문 샘플 및 신청절차... 2011-02-11</li>
</ul>
</li>
<li>자료실
<ul>
<li>웹 접근성 국제 세미나 발표자료(8).. 2010-10-08</li>
<li>웹 접근성 국제 세미나 발표자료(7).. 2010-10-08</li>
<li>웹 접근성 국제 세미나 발표자료(6).. 2010-10-08</li>
</ul>
</li>
<li>전문가칼럼
<ul>
<li>후지쯔의 유니버설 디자인 2009-06-16</li>
<li>유니버셜 디자인과 웹 2007-11-19</li>
<li>유니버설 디자인 프로세스(The Pr... 2007-07-20</li>
</ul>
</li>
</ul>
정의형목록(dl 요소, dt요소, dd요소)
'용어'와 '그 설명'으로 구성된 목록을 '정의형 목록'(definition list)이라고 한다. 정의형 목록은 dl요소로 정의하고 용어를 나나태는 dt(definition term)요소와 그 설명인 dd(definition description)요 소를 포함한다. dl요소는 블록 레벨 요소이지만 dt요소와 dd요소 이외의 요소를 포함할 수 없다. dt요소는 인라인 요소이며 인라인 요소와 텍스트를 포함할 수 있다. dd요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함할 수 있고, 또 블록 레벨 요소를 포함할 수 있다.
예제)
<dl>
<dt>이 꽃 이름을 알고 싶어요!</dt>
<dd>
<p> 이 꽃이 너무 이뻐서 사고싶은데 이름을 몰라서요 겨울 내내 잎만 있다가 봄이 되려고 하면 저렇게 이쁘게 꽃을 피우더라구요 크기도 그렇게 크지... 비슷하게 흰색과 분홍색이 섞인 꽃이 피는 화분도 있는데 그것도 이름이... </p>
</dd>
<dt>꽃 이름을 알려주세요.</dt>
<dd>
<p> 둑에서 피여나는 꽃입니다. 꽃 하나만을 볼때는 예쁘다는것을 못 느끼는데 한곳에 무리지여서 피여날때는 그 모습이 아주 아름답습니다. 연분홍빛깔의 꽃이 연약해보여서 이른봄에 이 꽃을 보면 가여린 마음이...</p>
</dd>
<dt>이 꽃이름이 뭐죠</dt>
<dd>
<p> 예전에 어느 블로그에서 에로티시즘을 상징하는 꽃이라 읽었던 기억이 나는데 이름이 도통 생각이... 좋습니다. 대부분이 빨간색의 꽃을 많이 볼수 있지만, 분홍색, 흰색의 꽃도 있으며 길게는 꽃이 2개월 이상도 피어 있어...</p>
</dd>
<dt>종이꽃!키우기!</dt>
<dd>
<p> 엄마가 .. 종이꽃키우라고주셨는데.. 제가 수험생이라..시간이없어서 잘... .ㅎㅎ 종이꽃을 책상용 스탠드 밑에 놔도되나요..? ㅠ.ㅠ 종이꽃이 뭐지... 흔히 종이꽃, 밀짚꽃(straw flower) 만지면 바스락거린다고 해서 바스라기꽃으로...</p>
</dd>
</dl>
반응형