HTML 부모태그와 자식태그

<table> 과 <tr>,<th>,<td>로 예시를 들어봅시다.

<div>
  <table>
  <tr>
    <th>name</th>
      <td> minseo </td>
      <td> sunset </td>
 </tr>
  <tr>
    <th>hi</th>
    <td> good </td>
    <td> soso </td>
  </tr>
  </table>
</div>

<table> 테이블의 시작과 끝을 알리는 부모태그이다.

<tr> 하나의 행(row)의 시작과 끝을 알리는 부모태그이다.

<th> 셀의 헤더를 의미하는 자식 태그이다. 굵은 글씨로 나타남

<td> 셀의 값(data)을 표현할때 사용하는 자식태그.

 

결과

name	minseo	sunset
hi	good	soso

 

 

<ul>/<ol>, <li>로는

<ul>
  <li>bank</li>
  <li>home</li>
  <li>shop</li>
  <li>market</li>
</ul>

<ol>
  <li>bank</li>
  <li>home</li>
  <li>shop</li>
  <li>market</li>
</ol>

<ul> unordered list

<ol> ordered list

<li> list 어디서부터 어디까지가 연관된 항목인지를 구분하기 위한 *부모 태그가 필요함 *

         반드시 부모 태그<ul>/<ol>를 가져야하며 부모태그도반드시 자식태그를 가져야함

 

결과

• bank
• home
• shop
• market

1. bank
2. home
3. shop
4. market

 

부모,자식 태그를 활용하여 웹 페이지의 구성을 쉽게 파악하고 코드의 가독성을 높일 수 있다.