[HTML] 리스트 태그 (ol, ul, li)

목록(리스트)을 나타내는 태그를 알아보려고 합니다.

 

<li> 태그 

list의 앞에 두 글자를 따온 <li> 태그를 통해서 목록의 각 항목을 표현할 수가 있습니다.

목록임을 알리기라도 하는 마냥 각 항목마다 왼쪽에 점이 생겼습니다. 겉으로 보기에는 <li> 태그만으로도 목록을 작성하는데 큰 문제가 없습니다. 하지만, 단독으로는 쓰이지 않습니다. 상위에 <ol> 태그나 <ul> 태그가 쓰이고 그 속에 <li> 태그가 위치하게 됩니다. 마치 부모 자식 같다고 해서 <ol> 태그, <ul> 태그는 부모 태그라고 부르고 <li> 태그는 자식 태그라고 부릅니다. 

 

---

<ol> 태그, <ul> 태그

그렇다면 상위에 부모처럼 있는 <ol> 태그와 <ul> 태그의 차이는 무엇인지 알아보겠습니다. <ol>태그는 ordered list의 약어이고 <ul> 태그는 unordered list의 약어로 만들어졌습니다. 즉, 순서의 유무가 다른 것입니다. 

<ol> 태그 (순서가 있는 리스트)

<ul> 태그 (순서가 없는 리스트)

<ol> 태그는 각 항목별로 점만 찍히는 것이 아니라 1부터 자동으로 넘버링된 것을 볼 수가 있습니다. <ul> 태그는 얼핏 보면 <li> 태그만 썼을 때와 큰 차이가 없어 보이지만 들여쓰기가 되어있다는 미묘한 차이가 있습니다. 목록이라는 의미가 보다 구체화된 탓인지는 모르겠습니다. 

 

부모태그
  <ol> 태그 → 순서가 있는 리스트
  <ul> 태그 → 순서가 없는 리스트

자식태그
  <li> 태그 → 리스트의 항목