[HTML] 12장, 부모 자식과 목록

다음과 같이 <parent>와 <child>라는 두 개의 태그가 있다고 하자.

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

이처럼 태그가 서로 포함 관계에 있을 때 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라 한다.

HTML에 있는 여러 태그는 부모 자식 관계가 막 바뀌기도 한다. 그런데 자식이 있는 곳에 항상 부모가 있고, 부모가 있는 곳에 항상 어떤 특정한 자식 태그가 있는, 아주 사이가 좋은 태그가 있다. 그 중 목차 태그에 대해 알아보자.

 

상단에 다음과 같이 HTML, CSS, JavaScript를 추가하였다. 페이지를 새로고침한 후 결과를 보면 우리가 원하는 결과가 아니다.

목차답게 줄바꿈이 되었으면 좋겠다. 저번에 배운 태그인 <br>을 이용한다.

결과를 보면 꽤 그럴듯하게 보인다. HTML을 만든 사람들은 목차를 쓸 때 사용하라고 어떠한 태그를 고안해냈다. 이때 사용하는 태그가 바로 목차 또는 목록인데, 영어로 목록은 List이다. List에서 앞의 두 글자가 무엇인가? 바로 li이다. 즉, <li> 태그를 사용하면 된다.

 

<br> 태그를 없애고 <li>로 수정하였다. 위와 같이 코드를 작성하고 페이지를 새로고침하면 결과가 나온다.

사용자의 닉네임을 더 추가해보았다. 밑에 추가 한 세 개는 수업 참가자이고, 위의 목록은 우리 수업의 순서이다. 이런 경우 서로 구분이 안 되기 때문에 띄어쓰기를 하고 싶다. 목록 부분에 <br>을 써도 구분되겠자만 이런 경우에 쓰라고 고안된 태그가 있다. 바로 <li>의 부모 태그인 <ul> 태그이다.

 

다음과 같이 코드를 수정하면 항목들을 구분할 수 있다.

 

즉, <li> 같은 항목은 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 부모 태그가 필요하다. 그러므로 <li> 태그는 반드시 부모 태그를 가지고 있고, 부모 태그인 <ul> 태그는 반드시 자식 태그를 가지고 있다는 점을 기억해야 한다.

<ol> 태그를 이용하면 항목 앞에 자동으로 숫자가 매겨지는 것을 볼 수 있다.

 

 

 

 

 

---

 

 

출처: 생활코딩! HTML+CSS+자바스크립트, 이고잉 지음