[HTML/CSS] 목록을 만드는 태그 (List Tag)
목록 태그 - 리스트
문서에서 항목을 나열하는 목록을 생성 시 사용하는 태그
HTML에 리스트 관련 태그 종류
- 순서가 있는 리스트 (Ordered List)
- 순서가 없는 리스트 (Unordered List)
- 리스트 항목 (List)
- 정의형 리스트 (Description List)
- 정의형 리스트에서 용어 또는 이름 (Description Term)
- 정의형 리스트에서 해당 용어의 정의 (Description Details)
HTML에 리스트 태그 종류
1. 순서가 있는 리스트 (Ordered List) - ol, li
순서가 있는 리스트의 태그는 <ol> 로 정의
리스트의 항목을 <li> 로 정의
리스트 요소 앞에 숫자, 영문 등 순서를 알 수 있는 마커가 삽입됨
기본값 예시
<ol>
<li>리스트기본001</li>
<li>리스트기본002</li>
<li>리스트기본003</li>
</ol>1. 리스트기본001
2. 리스트기본002
3. 리스트기본003
커스텀
<ol>의 기본 마커는 아라비안 숫자
시작하는 숫자 지정
<ol start=" "> 는 리스트의 시작 번호를 변경할 수 있음
<li value=" "> 는 리스트에서 해당 항목부터 번호를 변경할 수 있음
<ol start="4">
<li>리스트 type 004</li>
<li value="1">리스트 type 001</li>
<li>리스트 type 002</li>
</ol>4. 리스트 start 003
1. 리스트 start 001
2. 리스트 start 002
순서를 역순으로 설정
<ol reversed> 는 순서를 역순으로 변경
<ol reversed>
<li>리스트역순003</li>
<li>리스트역순002</li>
<li>리스트역순001</li>
</ol>3. 리스트역순003
2. 리스트역순002
1. 리스트역순001
마커 변경
<ol type=" "> 은 1 | a | A | i | I 중에서 마커를 변경할 수 있음
CSS에서 변경 방법
| 속성 | 속성값 | 보이는 값 |
| list-style-type |
decimal | 숫자 (기본설정) |
| upper-alpha | 영문 대문자 | |
| lower-alpha | 영문 소문자 | |
| upper-roman | 로마 숫자 대문자 | |
| lower-roman | 로마 숫자 소문자 |
2. 순서가 없는 리스트 (Unordered List) - ul, li
순서가 있는 리스트의 태그는 <ul> 로 정의
리스트의 항목을 <li> 로 정의
리스트 요소 앞에 네모, 동그라미등의 마커가 삽입됨
기본값 예시
<ul>
<li>리스트기본001</li>
<li>리스트기본002</li>
<li>리스트기본003</li>
</ul>● 리스트기본001
● 리스트기본002
● 리스트기본003
커스텀
<ul>의 기본 마커는 ●
ul 이 중첩되어 문단 수준이 하나씩 내려가면 마커가 ● > ○ > ■ 순으로 변경됨
마커변경
<ul type=" "> 로 disc, circle, square 중에서 마커를 변경할 수 있음
<ul type="disc">
<li>disc</li>
</ul>
<ul type="circle">
<li>circle</li>
</ul>
<ul type="square">
<li>square</li>
</ul>● disc
○ circle
■ square
CSS에서 변경 방법
| 속성 | 속성값 | 보이는 값 |
| list-style-type |
disc | ● (기본설정) |
| circle | ○ | |
| square | ■ |
3. 정의형 리스트 (Definition List) - dl, dt, dd
정의형 리스트는 <dl> 로 정의
리스트의 용어, 제목은 <dt> 로 정의
용어에 대한 정의, 설명은 <dd> 로 정의
정의형 리스트는 용어와 정의가 한 쌍을 이루는 리스트를 생성 시 사용됨
기본값 예시
<dl>
<dt>정의형 제목</dt>
<dd>정의형 설명1</dd>
<dd>정의형 설명2</dd>
<dd>정의형 설명3</dd>
</dl>정의형 제목
정의형 설명1
정의형 설명2
정의형 설명3
리스트 중첩
리스트 태그들은 중첩하여 사용 가능
ol>li>ul>li, ol>li>ol>li>, ul>li>ol>li 등
TIP! 리스트 중첩을 할 경우에는 큰 덩어리부터 차례대로 만들어야 안 헷갈림
<ul>
<li>과일
<ol>
<li>사과</li>
<li>바나나</li>
</ol>
</li>
<li>채소
<ol>
<li>오이</li>
<li>가지</li>
</ol>
</li>
<li>육류
<ol>
<li>돼지고기</li>
<li>소고기</li>
</ol>
</li>
</ul>● 과일
1. 사과
2. 바나나
● 채소
1. 오이
2. 가지
● 육류
1. 돼지고기
2. 소고기
참고자료
https://www.w3schools.com/html/html_lists.asp
http://tcpschool.com/html/html_basic_lists