목록과 표

목록 ul, ol, li

ol의 경우 ordered list 즉, 순위를 나타내거나 단계적으로 수행을 해야할 때 쓰는 태그(레시피 등)
ul의 경우 unordered list로 순서가 없이 아이템을 나열할 때 메뉴 등에서 많이 쓰는 태그
li의 경우 list item으로 단일 아이템의 경우 똑같이 해당 태그를 씀
ol 태그의 경우 속성을 통해서 타입을 정할 수 있음, type 속성에 따라 1, A, a, I 등 표시할 수 있는데 이에 따라서 type 기준으로 순서대로 됨(작성하지 않으면 기본적으로 숫자)
그리고 start 속성 사용 시, 시작하는 숫자를 다르게 할 수 있음(type과 병행 가능, 이때 그 타입의 속성에 따라서 변경됨)
이 때, li 태그에 value 속성을 통해 직접 그 시작값을 변경할 수도 있음, 이 때 value의 위치에 따라서 시작값이 변경됨 즉, 정한 li 기준으로 밑의 value 값이 달라짐
마지막으로 reversed 속성을 줄 경우, 순서가 반대로 나타나게 됨(기본값이 false임)
예시(ol)

    <ol type="I">
      <li>Toy Story</li>
      <li>Zootopia</li>
      <li>Inside Out</li>
    </ol>

    <ol type="A", start="8">
      <li>Toy Story</li>
      <li>Zootopia</li>
      <li>Inside Out</li>
    </ol>

    <ol>
      <li value="3">Toy Story</li>
      <li>Zootopia</li>
      <li>Inside Out</li>
    </ol>

    <ol>
      <li>Toy Story</li>
      <li>Zootopia</li>
      <li>Inside Out</li>
      <li value="100">Inside Out</li>
      <li>Inside Out</li>
      <li>Inside Out</li>
    </ol>

    <ol reversed>
      <li>Toy Story</li>
      <li>Zootopia</li>
      <li>Inside Out</li>
      <li>Inside Out</li>
      <li>Inside Out</li>
      <li>Inside Out</li>
    </ol>

ul 태그의 경우 단순히 아이템을 나열하기 때문에 위의 ol처럼 속성이 많지 않고 전역 속성만 존재함, bullet point를 사용함
그리고 중첩이 용이하고 그 경우 bullet point가 달라짐(깊이에 따라 달라짐)
예시(ul)

    <ul>
      <li>Milk</li>
      <li>Cheese
          <ul>
            <li>Blue Cheese</li>
            <li>Feta</li>
          </ul>
      </li>
    </ul>

이 때 ul, ol을 중첩해서 쓸 수 있음, 여러번, 여러개 중첩 가능함
예시(중첩구조)

    <ol>
      <li>first item</li>
      <li>
        second item
        <ul>
          <li>second item first subitem</li>
          <li>second item second subitem</li>
          <li>second item third subitem</li>
        </ul>
      </li>
      <li>third item</li>
    </ol>

정의 목록 dl, dt, dd

어떤 용어를 정의하거나 설명하는 목록임, dt에서 t는 term, dd에서 d는 description을 의미함
그래서 주로 용어사전 구현 혹은 메타데이터(키-값 쌍 목록)을 표시할 때 사용함
사용 시, dl태그로 정의 목록임을 나타내게 감싸줌, 그리고 dt-dd가 쌍을 이루어짐(아래의 예시처럼)
예시

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

아래처럼 여러 개의 용어와 하나의 정의, 하나의 용어 여러개의 정의로도 쓸 수 있음
예시

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>
  <dd>
    붉은 판다, 레서 판다, 랫서 판다, 혹은 "Firefox"는 초식성 포유류이다. 몸
    길이는 애완용 고양이보다 약간 큰 정도인 60cm다.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>

이를 div로 묶어서 아래 예시와 같이 쓸 수 있음 단, dt-dd 밑에 바로 div 태그를 형제 관계로써 같은 뎁스로 쓰면 안됨
예시

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

표 table, tr, th, td

table의 경우 복잡한 형태의 데이터를 행렬의 모양으로 나타낼 수 있는 태그임
예전엔 table 태그로 레이아웃을 잡았지만 현재는 시맨틱 태그들도 있기에 그 방식은 지양하고 데이터를 담는 형태로써 태그를 활용해야함
tr 태그는 table row 하나의 행(가로줄)을 나타내고, 그 개수에 맞게 열이 생성됨.
th 태그는 굵은 글씨 즉, table head 행이나 열을 대표하는 통칭을 나타냄, td 태그는 table data로 테이블의 단순 데이터를 나타냄.
th의 경우 scope 속성을 통해서 어떤 행이나 열을 대표하는지 나타낼 수 있음, 뷰가 변경되는 것은 아니지만 접근성 측면에서 좋음
그리고 만약 예시처럼 합계를 나타내기 위해서 기존의 셀 개수와 다르게 하려면 td의 colspan 속성을 통해서 쓸 수 있음(해당 셀만큼 차지한다는 의미, 영역을 넓혀서 표시)
예시

    <table>
      
      <tr>
        <th scope="col">나라이름</th>
        <th scope="col">수도</th>
        <th scope="col">인구</th>
      </tr>

      <tr>
        <th scope="row">한국</th>
        <td>서울</td>
        <td>5000만</td>
      </tr>

      <tr>
        <th scope="row">미국</th>
        <td>워싱턴</td>
        <td>3억</td>
      </tr>

      <tr>
        <th scope="row">일본</th>
        <td>도쿄</td>
        <td>1억</td>
      </tr>

      <tr>
        <td colspan="2">합계</td>
        <td>4억 5000만</td>
      </tr>

    </table>

thead, tbody, tfoot

table 역시 구획을 나눠서 표시할 수 있음, head, body, foot으로 나눠서 사용 가능
여기서 주의할점은 thead를 쓸 때 형제 태그로 tr 태그를 사용하면 안됨
당연히 외관상으로는 바뀐 것은 없지만 구획을 구분함으로써 추후 스타일링 하는데 용이함
예시

    <table>
      <thead>
        <tr>
          <th scope="col">품목</th>
          <th scope="col">지출</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">대파</th>
          <td>3,000</td>
        </tr>
        <tr>
          <th scope="row">달걀</th>
          <td>4,000</td>
        </tr>
        <tr>
          <th scope="row">고양이간식</th>
          <td>12,000</td>
        </tr>
        <tr>
          <th scope="row">종이봉투</th>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Totals</th>
          <td>19,300</td>
        </tr>
      </tfoot>
    </table>

이 때 tbody의 경우 여러개를 중첩해서 쓸 수 있음, 마치 카테고리별로 구분해서 처리할 수 있고 스타일링도 다르게 할 수 있음
예시

    <table>
      <thead>
        <tr>
          <th scope="col">품목</th>
          <th scope="col">지출</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th colspan="2">식재료</th>
        </tr>
        <tr>
          <th scope="row">대파</th>
          <td>3,000</td>
        </tr>
        <tr>
          <th scope="row">달걀</th>
          <td>4,000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <th colspan="2">기타품목</th>
        </tr>
        <tr>
          <th scope="row">고양이간식</th>
          <td>12,000</td>
        </tr>
        <tr>
          <th scope="row">종이봉투</th>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Totals</th>
          <td>19,300</td>
        </tr>
      </tfoot>
    </table>

caption

caption 태그는 표의 전체를 아우르는 설명이나 부가 설명을 붙이고 싶을 때 쓰는 태그임
마치 figure에서의 figcaption과 유사하다고 볼 수 있음, 하지만 테이블을 설명하기 위함임 핵심임
이 때 caption 태그를 쓸려면 table 요소의 첫 번째 자식이어야 함, thead 앞쪽에 넣어야 함
만약 뒤쪽에 넣고 싶다면? css를 통해 스타일링을 해야함
그리고 만약 table 요소가 figure로 감싸진 것이라면 figcaption을 사용하는 것을 권장함
예시

<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>

참고자료

gang_shik

측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다

목록과 표

목록 ul, ol, li

정의 목록 dl, dt, dd

표 table, tr, th, td

thead, tbody, tfoot

caption

구조를 나타내는 요소들

임베디드 요소

0개의 댓글

관련 채용 정보