[HTML] HTML 리스트(List)

HTML 리스트(List)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.

HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공한다.

• 순서가 없는 리스트(unordered list)
• 순서가 있는 리스트(ordered list)
• 정의 리스트(definition list)

순서가 없는 리스트

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

각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치한다.

<h1>순서가 없는 리스트</h1>
<ul>
	<li>검정색</li>
	<li>노랑색</li>
	<li>흰색</li>
</ul>

출력 화면

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

• disc : 검정색 작은 원 모양 (기본설정)
• circle : 흰색 작은 원 모양
• square : 사각형 모양

<h1>순서가 없는 리스트</h1>
<p>검정색 작은 원 모양 (기본설정)</p>
<ul>
	<li>구름</li>
	<li>천둥</li>
	<li>번개</li>
</ul>

<p>흰색 작은 원 모양</p>
<ul style="list-style-type: circle">
	<li>바람</li>
	<li>햇빛</li>
	<li>소나기</li>
</ul>

<p>검정색 사각형 모양</p>
<ul style="list-style-type: square">
	<li>눈</li>
	<li>비</li>
	<li>우박</li>
</ul>

출력 화면

순서가 있는 리스트

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

각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치한다.

<ol>
    <li>소나기</li>
    <li>비</li>
    <li>눈</li>
</ol>

출력 화면

CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

• decimal : 숫자 (기본설정)
• upper-alpha : 영문 대문자
• lower-alpha : 영문 소문자
• upper-roman : 로마 숫자 대문자
• lower-roman : 로마 숫자 소문자

<p>숫자 (기본설정)</p>
	<ol>
		<li>고양이</li>
		<li>강아지</li>
		<li>햄스터</li>
	</ol>

<p>영어 대문자</p>
	<ol style="list-style-type: upper-alpha">
		<li>고슴도치</li>
		<li>말</li>
		<li>족제비</li>
	</ol>

<p>영어 소문자</p>
	<ol style="list-style-type: lower-alpha">
		<li>소</li>
		<li>닭</li>
		<li>양</li>
	</ol>

<p>로마자 대문자</p>
	<ol style="list-style-type: upper-roman">
		<li>참새</li>
		<li>딱따구리</li>
		<li>제비</li>
	</ol>
		
<p>로마자 소문자</p>
	<ol style="list-style-type: lower-roman">
		<li>까치</li>
		<li>비둘기</li>
		<li>뱁새</li>
	</ol>

출력 화면

정의 리스트(description list)

정의 리스트(description list)는 용어와 그에 대한 정의를 모아놓은 리스트로 <dl>태그로 시작한다.

<dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

<h1>정의 리스트</h1>
<dl>
	<dt>월</dt>
	<dd>1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월</dd>
	<dt>요일</dt>
	<dd>월요일 화요일 수요일 목요일 금요일 토요일 월요일</dd>
</dl>

출력 화면