<HTML5> 5강 ul, ol, li 목록태그

 

<ul>태그

- unorder list 약자

- 순번이 없는 목록태그

- 인라인 요소이다.

- 순번대신 불릿을 가지고 있다.

- CSS 속성에 따라 다양한 형태의 불릿을 표시할 수 있다.  (list-style: circle ,disc, square)

- 실무에서는 불릿이 불편하여 잘 사용하지 않고 (ul{list-style : none})  필요할때는 다른 기법으로 사용한다 (img, background)

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

 

- 리스트, 네비게이션 메뉴, 캐러셀 등 연관된 콘텐츠가 반복적으로 나열되어 있을 때 자주 사용된다.

 

<ol>태그

- order list 약자

- 순번이 있는 목록태그

- 인라인 요소이다.

- CSS 속성에 따라 1,2,3 abc등 여러 기호로 표시할 수 있다.  (list-style: lower-romanm, upper-roman... )

- <ul>태그의 직계 자식은 <li>태그만 사용할 수 있다.

- 검색어순위 등에 사용된다. ul태그에 비해 상대적으로 사용 빈도가 적다.

 

<li>태그

- 항목을 나열할 때 사용한다. (독립적으로 쓰이지 않고, ul, ol태그와 함께 사용된다.

- 들여쓰기가 되어 있다.

 -<li>요소는 <div>를 제외한 모든 블럭요소를 자식으로 사용할 수 있다

- <ul>,<ol>자식인 <li>태그 안에 또 <ul><ol>태그를 중첩할 수 있다.

   ex1) ul > li > ul    ex2) ol > li > ol

 

정리

목록태그는 계층 수단의 표현으로 사용된다.

순서가 필요한 목록은 ul, 필요없는 경우는 ol 태그를 사용한다. 대부분 ul태그를 사용한다.

실무에서는 불릿과 들여쓰기의 기본 형태를 잘 사용하지 않고 css에서 none을 default 값을 적용하여 사용한다.