31일차//[html] list / ol, ul / 순서 있는 목록, 순서 없는 목록

순서 없는 목록

순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙는다.

순서 없는 목록은 ul로, 목록의 내용은 li로 만든다

 

<ul>
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

 

<ul style="list-style-type: circle">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

<ul style="list-style-type: square">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

<ul style="list-style-type: none">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

 

---

 

순서 있는 목록

순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다.

순서 있는 목록은 ol로, 목록의 내용은 li로 만든다.

<ol><!-- ordered list 순서있는 목록 -->
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>


</ol>

 

3부터 순서 붙는다.

<ol start="3">  <!-- html 5 -->
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>


</ol>

a 부터 순서가 시작된다.

<ol type="a">  <!-- html 4 -->  <!-- <ol type="1"> -->
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>


</ol>

로마 숫자부터 시작한다.

<ol type="I"> 
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>


</ol>

<ul>
	<li>coffee
		<ol>
		
			<li>black</li>
			<li>milk</li>
		</ol>
	
	</li>
	<li>tea</li>
	<li>milk</li>


</ul>