4. 목록 태그

<ul>

순서가 없는 목록을 표현할 때 사용합니다.

 

 

<ol>

순서가 있는 목록을 표현할 때 사용합니다. type 속성으로 글머리 기호를 변경할 수 있습니다.

 

 

<li>

목록하위 항목으로 사용되며, <ul>태그 또는 <ol>태그의 하위에 위치합니다.

 

 

<dl>

Definition List(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.

예) A는 B이다. 와 같은 Key = Value로 사용할 때 유용합니다.

 

 

<dt> 

Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.

 

 

<dd>

Definition Description(정의 설명)의 약자로, 용어를 설명하는 데 사용합니다.

 

 

---

실습

<h1>김치볶음밥 레시피</h1>
<ul>
  <li>밥 200g</li>
  <li>신김치 100g</li>
  <li>캔참치 50g</li>
  <li>계란 1개</li>
  <li>설탕 2/3스푼</li>
  <li>다시다 2/3스푼</li>
  <li>물엿 1스푼</li>
  <li>식용유 1.5스푼</li>
</ul>
<ol>
  <li>팬에 식용유 두르고 김치를 볶아줍니다.</li>
  <li>김치가 볶아지면 설탕, 다시다, 물엿을 넣어줍니다.</li>
  <li>참치를 넣어서 볶아줍니다.</li>
  <li>불을 줄여주고 밥을 넣어 섞어줍니다.</li>
  <li>완성된 김치볶음밥을 그릇에 담아줍니다.</li>
  <li>계란후라이를 해서 올려줍니다.</li>
  <li>완성</li>
</ol>