7) HTML 목록(List)

순서가 없는 리스트

목록을 각 항목을 나열할 때 순서를 나타내지 않는 기호를 붙여서 표시한다. 

<ul> 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작한다. 

<ul>
    <li> 항목내용 1</li>
    <li> 항목내용 2</li>
    <li> 항목내용 3</li>
</ul>

각각의 요소 앞에 표시되는 기호의 모양은 기복적으로 disc(●) 이며, CSS의 list-style-type 속성을 사용하여 기호의 모양을 변경할 수 있다. 

 

- none : 기호를 표시하지 않음

- disc : 검정색 작은 원 모양(기본)

- circle : 흰색 작은 원 모양

- square: 사각형 모양

 

---

순서가 있는 리스트

나열되는 각 항목 앞에 순서를 나타내는 기호(숫자, 알파벳 등)를 붙여서 표시한다. 

<ol> 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작한다.

<ol>
    <li> 항목내용 1</li>
    <li> 항목내용 2</li>
    <li> 항목내용 3</li>
</ol>

각각의 요소 앞에 표시되는 기호는 기본적으로 아라비아 숫자이다.

CSS의 list-style-type 속성 또는 <ol>, <li> 태그의 속성으로 기호의 모양을 변경할 수 있다.

 

CSS의 list-style-type 속성

- decimal : 숫자 (기본설정)

- upper-alpha : 영문 대문자

- lower-alpha : 영문 소문자

- upper-roman : 로마 숫자 대문자

- lower-roman : 로마 숫자 소문자

 

<ol>, <li> 태그 속성

속성	속성값	설명
<ol type="속성값">	1	기호의 유형을 지정	숫자(1, 2, 3 ~ )(기본값)
	a		영어 소문자(a, b, c ~)
	A		영어 대문자(A, B, C ~)
	i		로마 숫자 소문자(i, ii, iii ~)
	I		로마 숫자 대문자(I, II, III ~)
<ol start="숫자">	숫자	시작할 항목 번호를 임의로 지정
<ol reversed>	없음	항목의 번호를 역순으로 지정
<li calue="숫자">	숫자	항목 번호를 중간에 바꾸는 경우에 사용

---

정의 리스트

정의 리스트은 용어나 이름을 정의하고, 정의된 용어/이름에 대한 설명을 제목하는 형태의 리스트이다.

<dl> 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 용어의 이름을 정의하는 <dt>태그, 해당 용어 대한 정의하는 <dd> 태그가 들어간다. 

<dl>
    <dt>사과</dt>
    <dd>사과나무의 열매</dd>
    <dt>귤</dt>
    <dd>귤나무의 열매</dd>
</dl>