[HTML] <li>, <ol>, <ul> 목차 tag

오늘은 목차 태그인 <li>, <ol>, <ul>에 대해 배웠다. 

 

 

목차 태그는 Ordered List (=<ol>) / Unordered List(=<ul>)로 나뉜다

 

• <li> : List의 "li"를 따온 목차 또는 목록을 나타내는 태그
• <ul> : li만 사용하면 서로 구분이 안되기 때문에, 띄어쓰기를 위해 사용하는 목차 태그, <li>의 부모 태그  (마찬가지로 <ol>도 <li와 함께 사용)

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

<li>태그만 여러번 사용할 경우에 어디서부터 어디까지가 연관된 항목인지를 구분하지 못하여 혼동할 수 있다.  

이를 방지하기 위해 부모 태그인 <ol> or <ul>이 필요하다. 

즉, <li>는 부모 태그를 가지고 <ol>, <ul>은 자식태그를 가진다. 

 

여기서 부모 태그와 자식 태그란 태그의 포함관계를 나타낸다. 포함하고 있는 태그를 부모 태그라 하고, 포함된 태그를 자식 태그라 한다. 

 

• <ol> : 순서를 명령해주는 목차 태그 

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

<ol>을 사용하면 목차의 내용이 수정 됐을 경우, 순서를 수정할 필요가 없다. 

 

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

1번 HTML을 지웠는데 CSS와 JavaScript의 목차 순서를 변경하지 않았다. 만약, <ul>을 사용하였을 경우에는 목차 수정이 필요 했다. 

 

 

참고 : 표 만들기 연습

<table border="1">
    <tr>
        <td>head</td>
        <td>98.1%</td>
    </tr>
    <tr>
        <td>body</td>
        <td>97.9%</td>
    </tr>
    <tr>
        <td>html</td>
        <td>97.9%</td>
    </tr>
</table>

• <table border ="표 테두리 두께">
• <tr> : 표 내용 입력
• <td> : 다음 칸에 입력

 

 

다음에 표를 다루는 부분을 공부하면 더 자세히 다뤄야지