li 태그, ul 태그, ol태그로 순서대로 목차 만들기

<li> </li> 태그로 목차 만들기

목록을 의미하는 List에서 앞 두 글자 Li를 따와서 리스트 태그를 사용할 수 있습니다.

 

1.OrderA

2.OrderB

3.OrderC 

위와 같이 텍스트를 작성해보았습니다. 이 상태에서 Ctrl 키를 누릅니다. 그리고 커서를 1, 2, 3등 숫자 앞에 차례대로 두고 마우스 왼쪽 버튼을 클릭합니다. 이렇게 하면 동시에 여러 개의 태그를 편집할 수 있도록 영역이 지정됩니다. 매우 편리한 기능이므로 잘 기억해두면 좋습니다. 이렇게 지정된 상태에서 <li> 태그를 입력해줍니다. </li>로 태그를 종결할 때도 과정은 동일합니다. Ctrl 키를 누르고 A, B, C뒤에 마우스 커서를 이동하여 영역을 지정한 후에 마무리를 합니다.

 

<Li>1. OrderA </Li>

<Li>2. OrderB </Li>

<Li>3. OrderC </Li>

<ul></ul> 태그로 목차 덩어리 만들기

ul태그는 unordered list의 약어입니다. <li> </li> 태그로 만든 리스트들의 값을 하나의 <ul> </ul> 태그에 포함시켜 리스트 덩어리를 구분할 수 있습니다. <ul>로 태그를 열고 아래 <li> </li> 태그들을 선택한 후 tab키를 누르고 가장 아래 부분을 </ul>로 종결합니다. 이때, 목차의 값들은 <ul> </ul> 태그에 종속됩니다. 아래와 같이 작성 후 따로 <br>로 줄 바꿈을 하지 않더라도 각 <ul> <ul/> 태그는 별도의 문단으로 묶이는 것과 같이 1줄을 두고 떨어져 있게 됩니다. 이때 다른 값들을 포함하는 <ul> </ul>과 같은 태그를 parent tag라고 합니다. 반대로 <li> </li>와 같이 종속되는 태그를 child tag라고 합니다. 특히 <ul> </ul> 태그와 <li> </li> 태그는 함께 사용해야 하는 태그 조합입니다.

 

<ul>

  <li> car </li>

  <li> train </li>

  <li> bus </li>

</ul>

<ul>

  <li> egg </li>

  <li> banana </li>

  <li> apple </li>

</ul>

<ol> </ol> 태그로 자동으로 숫자가 채워지는 목차 만들기

ol태그는 ul태그와는 달리 자동으로 숫자 순서를 지정해주는 태그입니다. ordered list의 약어의 앞 두 글자를 따와서 만든 태그입니다. 아래와 같이 작성하면 자동으로 숫자 순서가 작성됩니다. 순서대로 숫자가 부여되는 것입니다. 대량의 데이터를 순서대로 작성해야 할 때, 순서의 이동 편집이 필요할 때 유용하게 사용할 수 있습니다. <ol> </ol> 태그 역시 parent tag로서 child tag인 <li> </li> 태그들을 포함해야 합니다. 

 

<ol>

  <li> CSS <li>

  <li> JavaScript <li>

  <li> Cording <li>

</ol>

 

parent tag와 child tag의 관계를 기반으로 tag의 결합을 통해 표를 만드는 등 다양한 표현을 할 수 있습니다.