[HTML] 6. 목록과 표

in HTML on Html



6. 목록과 표

1. 목록 - ul, ol, li

ol

  • ordered list
  • 정렬된 목록
  • 보통 숫자로 표현
  • type : 기본 1, A, I, i
  • start 속성 : 시작값 변경
  • start 대신 li value 도 가능! 중간li는 앞에 li 는 바뀌지 않는다
  • reversed 속성
<h2>Ordered List</h2>

    <ol type = "A" start="8">
        <li value="3">kim</li>
        <li>lee</li>
        <li>park</li>
    </ol>

    <ol reversed>
        <li value="3">kim</li>
        <li>lee</li>
        <li>park</li>
    </ol>

ul

  • unordered list
  • 별도의 속성이 없다.
  • ul 계층 사용시 색깔,모양이 다르게 된다
  • ol, ul 중첩해서 사용 가능
<h2>Ordered List</h2>

    <ul>
        <li value="3">kim</li>
        <li>lee</li>
        <li>park</li>
    </ul>



2. 정의 목록 - dl, dt, dd

  • 용어를 정의하거나 설명할 때 (용어-설명 쌍)
  • 하나의 용어와 하나의 정의 (dt-dd)
  • 여러 개의 용어와 하나의 정의 (dt-dt-dt-dd)
  • 하나의 용어와 여러개의 정의 (dt-dd-dd-dd)
  • dd : 들여쓰기가 기본으로 들어감
  • dt, dd의 형제는 dt, dd 만 가능 (div 안돼)
<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>



3. 표 - table, tr, th, td

  • table tag 로 웹페이지 구역을 나누는 건 no!
  • tr : 행
  • th : 열 - 열의 대표
  • td : 열 - 단순 데이터
  • scope : 무엇을 대표하는지 (col/row) (th 만 지정 가능! 변경되는 건 없음)
  • colspan : 확장 (td)
<table>
        <tr>
            <th scope="col">The table header</th>
        </tr>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
        <tr>
            <td colspan="2">The table body</td>
        </tr>
</table>



4. thread, tbody, tfoot

  • table 도 header, footer 처럼 구역 나눠서 마크업 가능
  • header : thead
  • footer : tfoot
  • body : tbody
  • table 바로 아래 thead
  • thead의 형제에 tr이 올 수 없다 - tbody 여야한다
  • tbody는 여러개 사용 가능
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>



5. caption

  • table을 설명하기 위한 표 설명 요소
  • figcaption 은 img나 모든 가능했다!
  • 반드시 table 요소의 첫번째 자식이어야 한다.
  • 다른 곳으로 옮기고 싶다면 그건 css 로
  • if table이 figure로 감싸있다면, caption대신 figcaption 사용!
<table>
    <caption>He-Man and Skeletor facts</caption>
    <tr>
        <td> </td>
        <th scope="col" class="heman">He-Man</th>
        <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
        <th scope="row">Role</th>
        <td>Hero</td>
        <td>Villain</td>
    </tr>
    <tr>
        <th scope="row">Weapon</th>
        <td>Power Sword</td>
        <td>Havoc Staff</td>
    </tr>
    <tr>
        <th scope="row">Dark secret</th>
        <td>Expert florist</td>
        <td>Cries at romcoms</td>
    </tr>
</table>



나의 회고 🤫

웹을 만들면서 table을 활용해볼 기회가 많지 않았어서 table 관련 태그로 이렇게 다양한 종류가 있다는 것을 처음 알았다.
시멘틱 웹과 마찬가지로 태그 기능이 들어나도록 태그를 설정하는 것(theader)이 table에서도 중요한 것을 보고 앞으로 더더욱! 시멘틱 웹을 만들도록 지향해야겠다고 생각했다
th, td의 차이점을 오늘에서야 알았다는건…안비밀🤪