스타트업트랙 프론트엔드 개발과정 2 - (6)

HTML 중첩되는 태그

다른 태그들을 포함하거나 다른 태그에 포함되어 사용되는 태그

목록 태그

ul > li
ol > li

• ul : unordered(순서가 없는) list
  disc(기본), square, circle...

• ol : ordered(순서가 있는) list

• li : list item - 목록의 요소
  다른 태그들(또 다른 목록 등)을 포함할 수 있음

실습코드

<h1>샌드위치 만들기</h1>
  <h2>준비물</h2>

  <ul>
    <li>식빵</li>
    <li>잼</li>
    <li>계란</li>
  </ul>

  <h2>순서</h2>

  <ol>
    <li>식빵에 잼을 바른다.</li>
      <ol>
        <li>식빵 두 장을 꺼낸다.</li>
        <li>한 장의 위쪽 면에 잼을 펴 바른다.</li>
      </ol>
    <li>그 위에 계란을 얹는다.</li>
    <li>다른 식빵으로 덮는다.</li>
  </ol>

테이블 태그

table > tr > th, td
table > caption

• table : table - 표

• tr : table row - 표의 한 열

• th : table header - 각 열, 행의 머리
  scope) 무엇(행/열)의 머리인지 표시

• td : table data - 표의 각 칸
  

• caption : 표의 제목

실습코드

<table>
     <caption>오늘의 식단</caption>
     <tr>
       <td></td>
       <th scope="col">아침</th>
       <th scope="col">점심</th>
       <th scope="col">저녁</th>
     </tr>
     <tr>
      <th scope="col">밥</th>
      <td>현미밥</td>
      <td rowspan="2">호박죽</td>
      <td>흰쌀밥</td>
    </tr>
    <tr>
      <th scope="col">국</th>
      <td>콩나물국</td>
      <td>갈비탕</td>
    </tr>
    <tr>
      <th scope="col">반찬</th>
      <td colspan="3">배추김치</td>
    </tr>
   </table>