[Html] 부모와 자식 관계 / 목록화

부모와 자식 관계 : li와 ul/ol

일반적으로 문서에서 목록을 작성할 때 -, 1), * 등의 기호들을 하나씩 붙여주거나 목록화 시켜주는 도구를 사용해야 한다. HTML에서는 'li'와 'ul' 하나로 해결할 수 있다.

'li' 와 'ul'은 마치 부모와 자식 관계처럼 항상 묶여서 쓰인다. (영어에서 'a cup of' + 'tea' 처럼)

Example: 컵에 물이 채워지는 순서

• 1. 컵을 꺼낸다.
• 2. 물이 담긴 주전자를 가져온다.
• 3. 주전자를 컵에 기울인다.
• 4. 컵에 물이 다 차면 주전자를 내려놓는다.

<ul>
  <li>1. 컵을 꺼낸다.</li>
  <Li>2. 물이 담긴 주전자를 가져온다.</li>
  <li>3. 주전자를 컵에 기울인다.</li>
  <Li>4. 컵에 물이 다 차면 주전자를 내려놓는다.</li>
</ul>

그런데 만약 순서가 매우 복잡하게 되어 있는데 중간에 수정해야 한다면? ul은 자유도가 높은 대신 순서/차례 구조일 때는 적잘하지 않다. 이때 대신 사용하는 것이 바로 ol이다.

ul = undorered list
ol = ordered list

1. 컵을 꺼낸다.
2. 물이 담긴 주전자를 가져온다.
3. 주전자를 컵에 기울인다.
4. 컵에 물이 다 차면 주전자를 내려놓는다.

<ol>
  <li>컵을 꺼낸다.</li>
  <li>물이 담긴 주전자를 가져온다.</li>
  <li>주전자를 컵에 기울인다.</li>
  <li>컵에 물이 다 차면 주전자를 내려놓는다.</li>
</ol>