[HTML] li, ul, ol 태그

본문은 '생활코딩'님의 <WEB1 - HTML & INTERNET> 강의를 수강하고 개인 학습용으로 정리한 내용입니다.

 

안녕하세요, 오늘은 HTML의 기본 태그 <li>, <ul>, <ol> 태그에 대해 알아보겠습니다

 

위의 3개의 태그는 모두 목차를 만들 때 사용하는 태그입니다

또한, 위 태그들은 서로 부모자식 관계를 이룹니다

 

<parent>
	<child></child>
</parent>

 

부모 태그와 자식 태그를 설명하기 위해 간단한 예시 코드를 작성해보았습니다

여기서 포함하고 있는 태그(<parent>)를 부모 태그, 포함되는 태그(<child>)를 자식 태그라고 합니다

 

<li>, <ul>, <ol> 태그 간 부모자식 관계는 본문에서 각 태그의 활용과 함께 자세히 살펴보겠습니다

---

#1. <li> 태그

<li>WEB</li>
<li>Data Science</li>
<li>Motion Graphic</li>

 

0. 위의 코드와 같이 목차를 만들고 싶은 항목들을 <li> 태그로 각각 감싸줍니다

1. 그러면 아래와 같이 글머리 기호(검정색 동그라미)가 앞에 생기면서 목차가 생긴 것을 확인할 수 있습니다

 

웹브라우저에서 보았을 때

---

지난번 포스팅에서도 언급하였듯이, WEB 표준에서 "목차를 만들 때는 <li> 태그를 사용해!"라고 지정한 것이기에 목차를 만들 때는 <p> 태그가 아닌 <li> 태그를 사용합니다

---

#2. <ul> 태그 (unordered list)

<ul> 태그의 등장배경은 다음과 같습니다

하나의 웹 페이지에 목차를 여러 개 만들어야 할 경우가 있습니다
이때 <li> 태그를 연속적으로 사용해야 하는데 목차 간에는 서로 다른 '분류 기준'이 적용되기에 목차들을 구분해주어야 할 필요가 있습니다
물론 단순히 줄바꿈을 이용해 사람 눈에 구분될 수 있도록 할 수도 있지만, 여기서 말하는 '구분'의 주체는 사람이 아니라 웹 브라우저를 의미합니다
웹 표준에 맞게 태그를 적절히 사용해야 그 웹 페이지에 가치가 상승한다는 것을 잊지 말아야 합니다

 

따라서 2개 이상의 목차를 작성할 때 같은 분류기준의 목차를 부모 태그로 작용하는 <ul> 태그로 포함시켜줍니다

아래와 같이 말이죠

 

<ul>
  <li>WEB</li>
  <li>Data Science</li>
  <li>Motion Graphic</li>
</ul>

 

<ul> 태그를 추가하기 이전과 큰 차이는 없지만 전과 비교하였을 때 살짝 들여쓰기가 된 것을 확인할 수 있습니다

 

 

웹브라우저에서 보았을 때

---

#2. <ol> 태그 (Ordered list)

우리가 목차를 작성할 때 항목 앞의 글머리 기호가 아니라 번호를 매기고 싶은 경우가 있습니다

단순한 방법으로는 '내용을 입력할 때 앞의 번호를 붙이는 것'이 있습니다

아래와 같이 말이죠

 

<ul>
  <li>1. WEB</li>
  <li>2. Data Science</li>
  <li>3. Motion Graphic</li>
</ul>

 

하지만 목차의 항목을 추가할 때마다 일일이 번호를 다는 것은 매우 귀찮은 일입니다

이러한 불편함을 덜어주기 위해 기존의 부모 태그(<ul>) 대신 사용하는 태그가 바로 <ol> 태그입니다

 

<ol>
    <li>WEB</li>
    <li>Data Science</li>
    <li>Motion Graphic</li>
</ol>

 

아래와 같이 기존의 글머리기호는 사라지고 대신 오름차순으로 번호가 매겨지는 것을 확인할 수 있습니다

 

 

웹브라우저에서 보았을 때

---

오늘은 이렇게 HTML에서 목차를 만들 때 사용하는 3가지 태그

<li>, <ul>, <ol>에 대해 알아보았습니다

 

저는 그럼 HTML 기본 문법에 관한 내용으로 다시 찾아뵙겠습니다