목록태그
목록 태그는 나열되는 목록을 작성할 때 사용합니다.
가장 일반적인 리스트는 물론, 메뉴같은 반복되는 형식을 작성하는데 유용합니다.
li태그 (list tag)
li태그는 실제 목록의 컨텐츠를 담는 태그입니다.
목록 태그의 본체라고 할 수 있습니다.
li태그는 단독으로 쓰이면 안됩니다. 반드시 ul, ol, dl 등의 목록 태그로 감싸서 사용해야 합니다.
작성예시
<li>목록 내용</li>결과
목록 내용
ol태그 (Ordered-List)
ol은 ordered-list의 약자입니다.
순서가 중요한 목록은 ol태그로 감싸서 나타내야 합니다.
자식으로 반드시 li만 가질 수 있습니다.
작성 예시
<ol>
<li>list01</li>
<li>list02</li>
<li>list03</li>
</ol>결과
- list01
- list02
- list03
요리 레시피, 조립 순서, 작동 방법처럼 순서가 중요한 목록은 ol을 사용해서 감싸주면 됩니다.
기본 스타일로 숫자가 앞에 붙습니다,
ul태그 (Unordered-List)
ul은 unordered-list의 약자로, ol과 반대로 순서가 중요하지 않은(또는 없는) 목록에 사용합니다.
일반적인 메뉴, 카테고리, 비슷한 구조의 반복 등에 사용하면 됩니다.
ol과 마찬가지로 반드시 li만 자식으로 가질 수 있습니다.
작성 예시
<ul>
<li>list01</li>
<li>list02</li>
<li>list03</li>
</ul>결과
- list01
- list02
- list03
기본 스타일로, disc(꽉찬 원)이 앞에 붙습니다.
list-style
목록 태그는 기본 스타일이 부여되어 있습니다.
이 스타일들은 list-style속성으로 제어할 수 있습니다.
속성값 목록 (/로 구분)
ul {list-style: disc / circle / square / none;}
ol {list-style: decimal / lower-alpha / lower-roman / upper-alpha / upper-roman / decimal-leading-zero;}
위에서 none 속성 값은 css 초기화에 자주 쓰입니다.
초기화를 해야하는 이유와 방법은 다른 포스팅에서 설명하겠습니다.
dl, dt, dd (설명/정의 목록 태그)
위에 설명한 ol과 ul 말고도 목록 태그의 범주에 들어가는 태그가 있습니다.
바로 dl, dt, dd입니다.
dl태그는 description-list의 약자로, 어떤 용어에 관한 정의, 설명을 다는데 사용합니다. dl태그는 자식으로 반드시 한 개 이상의 dt,dd를 가져야 합니다.
그리고 웹 접근성을 고려했을 때, dt와 dd가 한 쌍을 이룰 수 있을 때가 가장 이상적이라고 할 수 있습니다.
dt는 description-term의 약자로, 용어(이름)를 나타냅니다.
dd는 description-data의 약자로, 용어에 관한 설명이 들어가는 부분입니다.
작성 예시
<dl>
<dt>astonish</dt>
<dd>깜짝 놀라게 하다</dd>
</dl>결과
astonish -깜짝 놀라게 하다
dd를 사용하면 자동으로 들여쓰기 속성이 부여됩니다.
dl, dt, dd는 용어를 정의하는 의미로 사용되어야 하므로, 일반적인 목록을 정의하는데는 ol 또는 ul을 사용하는 것이 바람직합니다.
둘 중에서도 특히 범용적인 사용을 위해서는 순서가 상관없는 ul을 사용하는 것을 권장합니다.
