본문 바로가기
낙서장

[펌] 목록태그 (ul,ol)

by 사우람 2010. 7. 12.

여러 항목을 차례로 나열하고 항목마다 번호나 작은 불릿을 붙여 일목요연하게 보여주고자 할 때 사용할 수 있다.


* 텍스트 위주의 페이지에서 가끔 사용한다. 디자인 페이지에서는 이미지와 테이블 태그를 사용하게 된다.



■ <ul>~</ul> 순서값이 없는 목록

* Unordered List 란 뜻으로 항목의 앞에 자동으로 붙는 도형이 1,2.3 같은 순서값이 아닌 사각형이나,원이 붙게 된다.

* li는 List Item 으로 항목이 된다.

속성으로 type을 가지는데 디폴트는 disc이다.
disc <ul type=disc> 속이 찬 원
square <ul type=square> 속이 찬 사각
circle <ul type=circle> 속이 빈 원

강의과목
<ul>
<li>HTML</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
</ul>

강의과목
<ul type=square>
<li>HTML</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
</ul>
강의과목
  • HTML
  • JAVASCRIPT
  • ASP
강의과목
  • HTML
  • JAVASCRIPT
  • ASP





■ <ol>~</ol> 순서값을 갖는 목록

* Ordered List 란 뜻으로 항목의 앞에 자동으로 붙는 도형이 1,2.3 같은 순서값이 아닌 사각형이나,원이 붙게 된다.

속성으로 type을 가지는데 디폴트는 1이다.
1 <ul type=1> 순서가 1,2,3.....으로
A <ul type=A> 순서가 A,B,C.....으로
a <ul type=a> 순서가 a,b,c.....으로

강의과목
<ol>
<li>HTML</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
</ol>

강의과목
<ol type=a>
<li>HTML</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
</ol>
강의과목
  1. HTML
  2. JAVASCRIPT
  3. ASP
강의과목
  1. HTML
  2. JAVASCRIPT
  3. ASP




■ DIR,MENU,DL 태그가 있지만 사용빈도는 그리 많지 않을 것 같다