부모 자식과 목록

<p>
    <a href="https://opentutorials.org">opentutorials</a>
</p>

여기서 p 태그는 부모 태그, a태그는 자식 태그라고 부른다.
->종속되어있는 하위 태그를 자식이라 부르고, 그 상위 태그를 부모라고 부른다.
근데 a 태그는 꼭 p태그의 자식이어야 하는것은 아니다.(반대도 마찬가지)
필요에 따라 관계가 달라질 수 있다.

그런데 몇몇 태그들은 부모-자식 관계처럼 고정된 관계인 태그들이 있다.
예시들로 살펴보자.

목차를 표시할때

1. HTML<br>
2. CSS<br>
3. JavaScript<br>

1. HTML
   
2. CSS
   
3. JavaScript
   

이렇게 표시 할 수도 있겠지만 br은 단순 줄바꿈 태그이다.
목차를 표현할 때 쓰는 태그는 따로 있다. (HTML의 중요성 글 참고)

목차list의 앞글자를 딴 "li"태그를 사용하자.

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

1. HTML

2. CSS

3. JavaScript

그리고 목차 리스트 외 참여자 리스트도 추가해보자.

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
<li>LeeHY</li>
<li>LeeSY</li>
<li>LeeMS</li>

1. HTML

2. CSS

3. JavaScript

LeeHY

LeeSY

LeeMS

목차와 참여자 목록이 구분이 힘들다.
다른 목록과 구분할 수 있도록 경계가 필요함.
->이때 "ul"태그를 사용한다.

<ul>
	<li>1. HTML</li>
	<li>2. CSS</li>
	<li>3. JavaScript</li>
</ul>
<ul>
	<li>LeeHY</li>
	<li>LeeSY</li>
	<li>LeeMS</li>
</ul>

• 1. HTML
• 2. CSS
• 3. JavaScript

• LeeHY
• LeeSY
• LeeMS

이렇게 하면 두 목록을 구분할 수 있다.

또다른 예시로 위 목록에선 일일히 1~3까지 숫자를 붙여주었다.

만약에 목록 수가 수십, 수백개라면? 도중에 하나를 지워야할 때 나머지 항목들을 일일히 다 수정해야한다. 그런 불편함을 줄이기 위한 태그가 있다.

<ol>
	<li> HTML</li>
	<li> CSS</li>
	<li> JavaScript</li>
</ol>

1. HTML
2. CSS
3. JavaScript

ul 태그를 ol 태그로 변경하면 된다.
ul은 unordered list의 약자이고,
ol은 ordered list의 약자이다.

ul은 순서 없는 목록을 작성할 때,
ol은 순서 있는 목록을 작성할 때 사용한다.