TIL 220711 <mark>, <ruby>, table 관련 html tag,

<mark>

mark태그로 묶은 부분의 배경이 노랑으로 표시된다.

현재 맥락에 관련이 깊은 텍스트를 하이라이트한 부분을 나타낸다.

형광펜을 사용해 중요 내용에 강조 표시를 하는 것이라고 생각하면 된다.

<mark>를 표시만을 위해서 사용하지 말 것!

<mark>는 연관성을 가진 부분을, <strong>은 중요도를 가진 부분을 나타낼 때 사용한다.

<p>Today is <mark>Monday</mark></p>

---

<ruby> <rt> <rp>

동아시아 글자(예:일본어의 후리가나)에 주석 표시를 할때 사용한다.

ruby태그 안에 rt태그를 사용해 주석 표시를 한다.

 

rt태그는 ruby annotation(루비 주석)의 발음이나 설명을 정의한다.

 

rp태그는 ruby태그를 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용한다. (html5에서 추가 됨)

<rt>요소를 감싸는 여는 괄호와 닫는 괄호를 각각 나타내야한다.

<ruby>松本行弘<rp>(</rp><rt>まつもとゆきひろ</rt><rp>)</rp></ruby>
<ruby>
  景 <rp>(</rp><rt>경</rt><rp>)</rp>
  福 <rp>(</rp><rt>복</rt><rp>)</rp>
  宮 <rp>(</rp><rt>궁</rt><rp>)</rp>
</ruby>

Ruby의 개발자는 마츠모토 유키히로라는 일본인이라고 한다! 서양인이 개발했을 줄 알았다...

---

<table>

표 형식의 데이터를 표현 할 때 사용한다.

<tr>

표의 열

colspan 속성 : 합칠 열의 개수

<th>

셀의 제목을 표시할 때 사용한다.

scope 속성

col : 헤더가 속한 열의 다른 셀과 관련이 있다.

row : 헤더가 속한 행의 다른 셀과 관련이 있다.

  <table>
    <caption>Color names and values</caption>
    <tbody>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">HEX</th>
        <th scope="col">HSLa</th>
        <th scope="col">RGBa</th>
      </tr>
      <tr>
        <th scope="row">Teal</th>
        <td><code>#51F6F6</code></td>
        <td><code>hsla(180, 90%, 64%, 1)</code></td>
        <td><code>rgba(81, 246, 246, 1)</code></td>
      </tr>
      <tr>
        <th scope="row">Goldenrod</th>
        <td><code>#F6BC57</code></td>
        <td><code>hsla(38, 90%, 65%, 1)</code></td>
        <td><code>rgba(246, 188, 87, 1)</code></td>
      </tr>
    </tbody>
  </table>

<td>

표의 행

rowspan 속성 : 합칠 행의 개수

  <table border="1"> 
    <colgroup>
      <col style="width: 100px;">
      <col style="width: 300px;">
      <col style="width: 100px;">
      <col style="width: 300px;">
    </colgroup>
    <tr>
      <th>이름</th>
      <td></td>
      <th>연락처</th>
      <td></td>
    </tr>
    <tr>
      <th>자기소개</th>
      <td rowspan="2" colspan="3"></td>
    </tr>
    <tr>
      <th>비고</th>
    </tr>
  </table>

---

<col>

한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용, 닫는 태그는 없다.

span속성을 사용해 여러 열을 묶을 수 있다.

  <table>
    <caption>colgroup</caption>
    <colgroup>
      <col>
      <col span="2">
      <col style="background-color: blue;">
    </colgroup>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

<colgroup>

테이블 내의 열을 묶어 스타일을 지정할 때 사용한다.

 

<caption>태그 뒤에 <tr><td> 태그 전에 사용해야 한다.

<col> 태그의 개수와 표의 열의 개수가 같아야한다.

  <table border="1"> 
    <colgroup>
      <col style="width: 100px;">
      <col style="width: 300px;">
      <col style="width: 100px;">
      <col style="width: 300px;">
    </colgroup>
    <tr>
      <th>이름</th>
      <td></td>
      <th>연락처</th>
      <td></td>
    </tr>
    <tr>
      <th>주소</th>
      <td colspan="3"></td>
    </tr>
    <tr>
      <th>자기소개</th>
      <td colspan="3"></td>
    </tr>
  </table>

---

- 표의 제목을 표시하는 방법

<caption>

테이블의 캡션이나 제목을 지정합니다.

제목이 위쪽 중앙에 표시된다.

 

<figure> <figcaption>

<figcaption>위치에 따라 표의 위나 아래에 제목이 표시된다.

<figure>태그는 표 외에도 이미지, 동영상 등 다양하게 사용할 수 있다.

---

- 표 구조를 정의하는 태그

표의 구조를 제목 부분과 실제 본문 그리고 요약 부분이 있는 부분으로 나눈다.

시각 장애인도 화면 판독기를 이용해 표의 구조를 쉽게 이해할 수 있다.

<thead>

표의 제목/셀 제목을 나타낸다.

<tbody>

표의 본문을 나타낸다.

<tfoot>

표의 요약이나 합계를 나타낸다.

---

새로운 html 태그를 많이 알게되었다.

table 관련 태그들을 한 번 정리하고 싶었는데 드디어 해치웠다.

새로운 태그들도 알게 되고 시맨틱한 표 태그들을 알게 되어서 좋았다!