[HTML #3] 태그 중첩 조합 li, ul, ol

HTML에서는 태그를 중첩해서 사용하는 경우도 빈번한데 이번에는 왜 태그를 중첩해서 사용해야 하는지 알아보도록 하겠습니다. 

HTML 중첩 태그

대표적으로 중첩 태그를 흔하게 사용하는 것은 바로 리스트입니다. <li> 태그를 사용해 보면서 중첩 태그란 무엇인가에 대해 알아보죠.

<li>

리스트형식인 텍스트를 정렬하고 싶을 때는 <li> 태그를 사용하여 쉽게 정렬해줄 수 있습니다.

<li>서근</li>
<li>미진</li>
<li>희진</li>
<li>유진</li>

<ul>

만약 섹션이 있는 리스트를 만들고 싶다면 태그를 중첩 사용해야 합니다. 예를 들어 아래와 같이 단순히 공백만 준다고 해도 HTML에서는 이를 인식하지 않고 그대로 나열된 상태로 출력하게 됩니다.

<li>서근</li>
<li>미진</li>
<li>희진</li>
<li>유진</li>

<li>HTML</li>
<li>CSS</li>
<li>JS</li>

이를 해결하기 위해서는 <ul> 태그를 중첩 사용 하면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

<ol>

<ul> 태그는 순서가 정해져있지 않은 태그입니다. <ul>은 Unordered list(순서가 없는)의 약자이고, <ol>은 ordered list(순서가 있는)의 약자입니다. 

 

만약, 리스트에 순서를 정해주고 싶다면 위의 코드에서 <ul> 태그 대신 <ol> 태그로 대체해준다면 순서가 있는 리스트를 출력할 수 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

---

오늘은 이렇게 HTML에서 태그를 중첩해서 사용하는 방법에 대해 알아보았습니다.

 

 

읽어주셔서 감사합니다🤟