생활코딩 html 목차 태그 ul ol li (부모 자식 태그)

부모 자식처럼 함께 쓰이는 태그들이 있다 

대표적으로 ul-li / ol-li가 있다 

 

https://opentutorials.org/course/3084/18408

부모 자식과 목록 - 생활코딩

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

처음 코드 

 

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

<li>egoing</li>
<li>k8805</li>
<li>sorialgi</li>

이렇게 되면 위 예시처럼

여러 list가 이어질 때 영역이 구분 안간다 

 

따라서 비슷한 맥락의 li끼리 묶는 태그가 있다 

 

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

• 1. HTML
• 2. CSS
• 3. JavaScript

• egoing
• k8805
• sorialgi

자연스럽게 둘 사이 여백도 생기고 구분이 된다 

 

근데 1. 2. 3. 을 코드가 자동으로 추가해줬으면 좋겠다 

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

1. HTML
2. CSS
3. JavaScript

이렇게 되면 1. 2. 3. 을 직접 쓰지 않아도 

순서대로 붙여준다 

 

참고로 

li -> list 

ul -> unordered list 

ol -> ordered list 

의 약자다