HTML 부모/자식과 목록

HTML 태그에서는 부모/자식 관계가 있다.

예를 들자면 부모는

또는
자식은
1. 가 존재한다고 할 수 있겠다.

   간단한 코드 예시를 보자

   <ul>
   <li>1.HTML</li>
   <li>2.CSS</li>
   <li>3.javaScript</li>
   </ul>

   위의 코드가 부모와 자식 관계 간에 있는 대표적인 태그라고 생각하면 될것이다. 물론

2. 태그 하나로도 리스트 형식을 표시 할 수 있지만..

   <li>1.HTML</li>
   <li>2.CSS</li>
   <li>3.javaScript</li>
   <li>민범기</li>
   <li>민범기</li>
   <li>민범기</li>

   위에서 부터 3번째 태그까지는 목차명, 4번째부터 6번째 까지

3. 태그가 사용자 목록을 보여준다고 가정하면 웹 브라우저 에서는..

   

   위의 이미지 처럼 표현이 된다. 만약에 저 부분을 분리시켜서 하고싶다면 어떻게 해야할까?물론
   태그를 이용해서 분리를 시킬수도 있지만 HTML 에서 사용하라고 만든 부모 관련 태그

   을 사용해보자.

   <ul>
   <li>1.HTML</li>
   <li>2.CSS</li>
   <li>3.javaScript</li>
   </ul>
   <ul>
   <li>민범기</li>
   <li>민범기</li>
   <li>민범기</li>
   </ul>

   위의 코드 처럼 HTML을 적용 시켰을때

   

   위의 이미지 처럼
   을 사용한 것 처럼 동일하게 표현이 된다.

   즉

   • 와 같은 항목들은 그 항목이 어디서 부터 어디까지가 연관된 항목 인지를 경계 짓기 위한, 그룹핑을 하기 위한 부모 태그가 필요하다.

     그래서

   • 태그는 반드시 부모 태그를 가지고 있어야 한다. 반대로
     태그는 반드시 자식 태그를 가지고 있어야 한다.
     태그도 마찬가지라는 것을 잊지 말아야 한다.