12. 부모 자식과 목록

 

부모, 자식 관계에 해당하는 태그를 살펴보겠습니다.

목차를 꾸미려고 할 때 줄 바꿈이 됐으면 좋겠습니다. 앞에서 배운 <br>태그를 각 항목 뒤에 넣습니다.

HTML <br>
CSS <br>
JavaScript <br>

 

그런데 HTML을 만든 사람들은 목차를 쓸때 사용하라고 어떠한 태그를 고안 해냈습니다. 바로 목차 또는 목록인데 , 영어로 List라 해서 앞의 두글자를 따서 <li> 태그 라고 부릅니다.

<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>

 

그러나 이런 경우 서로 구분이 안되기 때문에 띄어쓰기를 하고 싶습니다. 바로 <li>태그의 부모인 <ul>이란 태그를 씁니다 .

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ul>

 

누군가 첫번째 목록을 지워 달라고 하면 2,3번째에 있던 목록들이 1,2번째 목록이라고 바꿔서 수정해야 하는데 이럴때 쓰는 태그는 <ul> 대신 <ol>로 바꿉니다.

<ol>
<li>egoing</li>
<li>k8805</li>
<li>youbin</li>
</ol>

 

<ol> = 'Ordered List' 의 약자

<ul> = 'Unordered List'의 약자