[HTML] 6. 태그 간의 관계, 부모자식과 목록

* 본 게시글은 생활코딩 교육과정을 공부한 내용을 정리한 글입니다.

www.opentutorials.org/course/3084/18408

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

 

---

목록

HTML, CSS, JavaScript 라는 목차(목록)를 만들고 싶을 때는 어떻게 할까?

 

우선 에디터에 아래와 같이 써본 후 웹페이지를 새로고침해보자.

 

세 개의 단어가 어떠한 구분도 없이 단순히 나열된 것을 확인할 수 있다.

 

세 개의 목차를 만들기 위해서는 <li>라는 태그를 사용하면 된다.

아래와 같이 코드를 작성해본 후 다시 웹페이지를 새로고침해보자.

 

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

 

 

---

목록의 구분

만일, HTML, CSS, JavaScript 라는 목록 아래에 새로운 영역의 목차를 나열하게 되면 어떻게 될까?

 

아래에 과일 세가지를 적어서 똑같이 <li>태그를 사용해 나타내보자.

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

<li>apple</li>
<li>banana</li>
<li>grape</li>

 

나란히 줄마다 나열은 되지만, 두개의 목차가 구분되는 것처럼 보이지 않는다.

 

이렇게 서로 다른 목차들을 구분할 때 쓸 수 있는 태그가 있는데 바로 <ul>이라는 태그이다.

 

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

 

이 태그를 사용하면 아래와 같이 목차들이 서로 구분되는 것을 볼 수 있다.

---

 

<ul>와 <li>

<ul>와 <li>는 서로 부모자식간의 태그라고 할 수 있으며, 코드를 작성할 때 항상 서로가 존재해야 한다는 것을 알고 있자.

 

---

순서 표시

위의 코드에서는 임의로 1, 2, 3이라는 순서를 부여했는데, 만일 아주 많은 데이터를 입력해야 하거나 중간에 어느 한개의 데이터가 빠져서 순서가 바뀌게 된다면 어떻게 해야할까?

 

1, 2, 3이라는 순서를 빼고 <ol> 태그를 추가해서 코드를 다시 작성해보자

 

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

 

이처럼 자동으로 순서가 넘버링된 것을 확인해볼 수 있다.

 

---

태그 정리

<ul> </ul>	Unordered List	<li>의 부모태그와도 같으며, 서로 다른 목차들을 구분해주는 태그
<ol> </ol>	Ordered List	순서가 정해진 목차를 넘버링해서 보여줄 때 사용하는 태그
<li>	Line	목차를 보여줄 때 사용하는 태그