HTML - 목록을 만드는 요소

목록을 만드는 태그에는 몇 가지 태그를 사용할 수 있습니다.

<ul> 태그는 순서가 필요없는 목록을 만들 때, <ol>태그는 순서가 필요한 목록을 만들 때, 그리고 <dt>태그는 설명 목록을 만들 때 사용합니다.

<ul>태그

<ul>태그는 각 항목 앞에 작은 원이 붙는 게 특징입니다.

속 성	설 명
type	다음 중 하나를 지정할 수 있습니다. l  disc:  꽉 찬 작은 원이 붙음 ¡  circle: 속이 빈 작은 원이 붙음 n  square: 꽉 찬 작은 사각형이 붙음

작은 원을 다른 모양으로 바꾸고 싶다면 type 속성을 사용하세요.

<ul type="circle">
  <li>내용 1 </li>
  <li>내용 2 </li>
  <li>내용 3 </li>
  <li>내용 4 </li>
</ul>

<menu>태그

<menu>태그는 짧은 문자열 목록을 만들 때 사용합니다. <ul> 태그와 차이점이 있다면 들여쓰기가 <ul> 태그보다 안으로 더 들어가는 게 특징입니다.

속 성	설 명
type	다음 중 하나를 지정할 수 있습니다. l  disc:  꽉 찬 작은 원이 붙음 ¡  circle: 속이 빈 작은 원이 붙음 n  square: 꽉 찬 작은 사각형이 붙음

<menu type="disc">
  <li>내용 1 </li>
  <li>내용 2 </li>
  <li>내용 3 </li>
  <li>내용 4 </li>
</menu>

<dir>태그

<dir>태그는 파일의 경로를 리스트로 나타내고자 할 때 사용됩니다. 마찬가지로 아래 type 속성을 사용할 수 있습니다.

속 성	설 명
type	다음 중 하나를 지정할 수 있습니다. l  disc:  꽉 찬 작은 원이 붙음 ¡  circle: 속이 빈 작은 원이 붙음 n  square: 꽉 찬 작은 사각형이 붙음

<dir type="disc">
  <li>내용 1 </li>
  <li>내용 2 </li>
  <li>내용 3 </li>
  <li>내용 4 </li>
</dir>

<ol>태그

<ul>태그와는 달리 몇 가지 속성을 정의할 수 있습니다. 속성을 지정하면 원이 아닌 숫자나 영문자 등을 표기할 수 있습니다.

속 성	설 명
type	아래 값 중 하나를 지정하면 숫자가 아닌 값을 표기함. 1: 숫자 (기본 값)  a: 영문 소문자 A: 영문 대문자  i: 로마 숫자 (소문자)  I: 로마 숫자 (대문자)
start	시작위치. 0 부터 시작
value	항목 번호를 변경할 때 사용. 0이나 음수도 지정 가능.
reversed	항목을 내림차순으로 정렬함.

<ol>
  <li>내용 1 </li>
  <li>내용 2 </li>
  <li>내용 3 </li>
  <li>내용 4 </li>
</ol>

value 속성의 예

value 속성에 변경하고자 하는 정수 값을 입력하면 원하는 순번부터 시작합니다.

<ol>
  <li>내용 1 </li>
  <li>내용 2 </li>
  <!-- 0 번 부터 카운터합니다. -->
  <li value="0">내용 3 </li>
  <li>내용 4 </li>
</ol>

start 속성의 예

start 에 3을 지정했으니 3번째 문자인 C부터 출력됩니다.

<ol type="A" start="3">
  <li>내용 1 </li>
  <li>내용 2 </li>
  <li>내용 3 </li>
  <li>내용 4 </li>
</ol>

<dl>태그

<dl>태그는 제목과 설명이 붙는 설명 목록을 만들 수 있습니다. 예를 들어 질의응답이나 설문지 등을 만들지요.

태 그	설 명
<dl>	목록을 만들 때
<dt>	제목을 넣을 때
<dd>	설명을 넣을 때

<dl>
  <dt>설문 제목 1 </dt>
  <dd>내용 1</dd>
  <dd>내용 2</dd>
  <dt>설문 제목 2 </dt>
  <dd>내용 1</dd>
  <dd>내용 2</dd>
</dl>