[XHTML] 8.리스트


리스트



일반적으로 목록을 작성할 때 쓰이며,

목록의 종류에는 순차적 목록 ol(Order List), 비순차적 목록 ul(Unorder List), 정의형 목록 dl(Definition List)가 있습니다.



ol(Order List)



순차적인 목록을 작성할 때 사용됩니다.


<ol><li>항목의 내용</li></ol>



다음 예제를 보시죠!


image



위의 결과처럼 순차적 목록은 항목 앞에 번호가 부여됩니다.

그리고 <ol>요소는 블록 요소이며, <li> 요소 이외의 다른 요소는 포함할 수 없습니다.

<li> 요소는 블록 요소이며 텍스트, 인라인 요소, 블록 요소를 포함할 수 있습니다.



ul(Unorder List)



비순차적 목록은 웹 문서의 주요 메뉴 등을 마크업할 때 가장 많이 쓰는 요소 중의 하나입니다.

<ul><li>항목 내용</li></ul>



다음 예제를 보시죠


image



순차적 목록은 항목의 순서가 바뀌기 어려운 반면에 비순차적 목록 항목은 순서에 크게 상관없습니다.

그리고 <ul>요소는 블록 요소이며, <li> 요소 이외의 다른 요소는 포함할 수 없습니다.

비순차적 목록이나 순차적 목록은 블록요소이기 때문에 기본적으로 세로 메뉴의 형태를 가집니다.

가로형태의 메뉴를 만들고 싶으면 CSS를 이용해야하는데 아직 배우지 않았으므로

CSS를 이용해서 만들 수 있다는 것만 알고 계시길 바랍니다!


image



작업의 순서를 보면 <ul>를 이용해서 의미 있는 마크업(메뉴목록)을 하였고

그 다음 원하는 형태의 디자인을 위해 CSS를 적용하였습니다.

이런 식으로 웹 표준 작업은 논리적이고 의미 있는 마크업을 한 후 원하는 디자인을 CSS로 처리하는 것입니다.

다음은 메뉴가 1단 구조가 아닌 2단 구조로 되있는 경우입니다.


image



dl(definition List)



순차적 목록과 비순차적 목록은 항목들을 나열하는 데 비해

정의형 목록은 ‘이것은 무엇이다’처럼 내리고자 하는 용어에 대한 정의 리스트입니다.


<dl><dt>용어</dt><dd>용어 정의</dd><dl>



예제를 봐볼까요?


image



위의 예제를 보면 <dd> 요소 항목들이 들여쓰기 되어 출력되는 것을 확인할 수 있습니다.

<dl> 요소는 블록 요소이며 <dt> 요소와 <dd> 요소 이외의 다른 요소는 포함할 수 없습니다.

<dt> 요소는 인라인 요소이며 텍스트와 인라인 요소를 포함할 수 있습니다.

<dd> 요소는 블록 요소이며 텍스트와 인라인 요소, 블록 요소를 포함할 수 있습니다.