백엔드 프로젝트 1주차 (Learn HTML) - 2

Tables

🎯Introduction to Tables

인터넷에는 주가, 스포츠 점수, 청구서 데이터 등의 정보를 보여주는 웹사이트가 많음. 이러한 데이터들은 표로 정리되어 있으며, 이는 표(table)가 데이터를 가장 잘 보여주는 방법 중 하나라는 것을 의미함.

 

HTML의 <table> 요소는 이차원 표로 정보를 보여줌.

 

 

🎯Create a Table

데이터를 표시하기 전에, 우선  <table> 요소를 사용하여 데이터를 포함하는 표를 만들어야 함

<table>

</table>

<table> 요소는 우리가 보여지길 계획하는 모든 표로 나타나지는 데이터들을 포함할 것.

 

 

 

🎯Table Rows

표를 사용하는 많은 프로그램들에서, 표는 이미 사용자에게 정의되어 있으며, 이는 데이터를 저장할 행, 열 및 칸을 포함한다는 것을 의미함. HTML에서는 이러한 구성 요소를 모두 만들어야 함.

테이블에 데이터를 입력하는 첫 번째 단계는, 테이블 row 요소인 <tr>을 사용하여 row를 추가해주는 것

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

• 두 개의 row들이 테이블에 더해줌

 

 

🎯Table Data

테이블에 데이터를 넣어주기 위해서 row만으로 충분하지 않음. 각 셀(칸)들이 반드시 정의되어야 함. HTML에서 table data 요소인 <td>를 이용하여 데이터를 추가해줄 수 있음

<table>
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• 위 예시에서 두 데이터 포인트(73과 81)이 한 row에 들어감. 두 개의 데이터 포인트를 넣어줌으로써, 두 셀들을 생성해줄 수 있음.
• 테이블이 브라우저에 보여진다면, row 1개와 column 2개로 이루어진 테이블이 될 것. (행 1개 열 2개)

🔎<tr> 태그를 사용하여 두 개의 행(row)을 만들었음에도 불구하고 왜 화면에서는 하나밖에 보이지 않는가

▶️ <tr> 태그 내에 셀 또는 제목을 작성해야 테이블의 행을 볼 수 있음. 

 

 

 

🎯Table Headings

테이블 데이터는 이것이 무엇을 의미하는지 설명하는 제목 없이는 큰 의미를 지닐 수 없음.

row와 column에 타이틀을 추가해주기 위해 table heading 요소인 <th> 사용

table heading 요소는 relevant title을 제외하면 table data 요소와 비슷한 방식으로 사용되며, table data와 마찬가지로 table row 안에 넣어줘야 함.

<table>
  <tr>
    <th></th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
  <tr>
    <th scope="row">Temperature</th>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• 제목을 담은 세 개의 row들이 추가됨: 공백, Saturday, Sunday
• 공백 제목은 테이블의 제목들을 해당하는 데이터의 위에 정확하게 정렬하는 데 필요한 여분의 셀을 생성
• 두 번째 row에서, 한 테이블 제목에 Temperature라는 새로운 row title이 더해짐
• 이를 랜더링하면, 아래와 비슷 테이블이 생성됨

참고로 scope 속성은 다음 두 value 중 하나를 취할 수 있음(scope은 데이터 속성에 쓰지 않음, <th>에서 사용)

• row: 제목이 row(행)에 대한 것임을 명확히 할 수 있음
• col: 제목이 column(열)에 대한 것임을 명확히 할 수 있음

표(table)를 만들기 위한 html 코드는 처음에 좀 이상해 보일 수 있지만, 하나하나 분석하는 것이 코드를 더 이해하기 쉽게 만드는 데 도움이 됨.

 

🔎scope 속성이란 무엇이며, 가질 수 있는 value가 row와 col 뿐인가

▶️ scope 속성은 스크린 리더가 시각 장애 사용자의 접근성을 높이기 위해 사용함. row와 col 외에도 다음과 같은 value를 가질 수 있음

• rowgroup: 여러 행을 그룹화하는 테이블 제목에 사용됨
• colgroup: 여러 열을 그룹화하는 테이블 제목에 사용됨
• auto: 기본값

 

 

 

🎯Table Borders

지금까지 작성한 코드로 만들어진 표는 경계선(border)이 없기 때문에 가독성이 떨어짐. 오래된 버전의 HTML에서는 border 속성으로 정수를 지정하여 테이블에 경계선을 추가할 수 있었음. 이 정수는 경계선의 굵기를 결정함.

 

<table border="1">
  <tr>
    <td>73</td>
    <td>81</td>
  </tr>
</table>

• 위 예시 코드는 더 이상 사용하지 않음. 단지 다른 개발자들이 읽었을 때 이해할 수 있도록 오래 전 규칙을 설명하기 위함일 뿐.

border 속성을 사용해도 브라우저는 올바르게 코드를 해석할 수 있지만, 이것이 border 속성을 사용하라는 의미인 것은 아님.

 

HTML 문서에 스타일을 추가하기 위해 CSS를 사용하여 웹페이지의 구조를 페이지가 어떻게 보이는지 결정하는 요소와 분리되도록 함. 테이블에 경계선을 추가하는 것은 아래와 같은 CSS를 사용하여 수행할 수 있음.

table, td {
  border: 1px solid black;
}

🔎테이블에서 경계선을 표시할 때 왜 HTML이 아닌 CSS를 사용해야 하는가

▶️ 소프트웨어 엔지니어링에서, "관계의 분리"라는 설계 원리가 존재하며, 이는 확장 가능하고 더욱 쉽게 유지할 수 있는 코드 구조를 만드는 것을 목표로 함. 웹 개발자들에게 이 원칙은 구조(HTML)와 보여지는 것(CSS)를 분리하도록 함.

 

 

 

🎯Spanning Columns

다수의 열(column)에 걸친 데이터를 보유한 테이블은 어떻게 만들어야 하는가

예를 들어, 개인의 달력은 여러 시간, 여러 날 동안 지속되는 일정이 있을 수 있음.

데이터의 경우, colspan 속성을 이용하여 여러 열들을 걸칠 수 있음. 해당 속성은 1보다 크거나 같은 정수를 받으며 이는 몇 개의 열에 걸친 데이터인지를 나타내 줌.

 

<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>

• 위 예시에서 Out of Town 데이터는 Monday와 Tuesday 테이블 제목에 걸쳐지며 colspan은 2(두 개의 열에 걸치므로)라고 표시함.
• Back in Town 데이터는 Wednesday 제목 밑에만 표시.

 

🔎colspan="2"는 어떤 모양인가

▶️ HTML 코드를 실행하면 다음과 같은 테이블이 페이지에 나타남

 

🔎colspan 속성은 <td> 태그 내에서만 사용할 수 있는가

▶️ 그렇지 않음. colspan 속성은 <th> 태그에서도 사용 가능함. 접근성 향상을 위해 여러 열에 걸쳐 있는 테이블 제목을 작성할 때,  scope="colgroup" 속성도 오프닝 <th> 태그에 넣어줘야 함.

 

 

 

🎯Spanning Rows

데이터는 또한 rowspan 속성을 이용해 여러 행들에 걸쳐질 수 있음.

rowspan 속성은 여러 시간 또는 날짜에 걸쳐 진행되는 일정과 같이, 여러 행들에 걸쳐진 데이터를 다룰 때 사용함.

1보다 크거나 같은 정수를 받아 데이터가 몇 개의 행을 걸치는지 나타냄

<table>
  <tr> <!-- Row 1 -->
    <th></th>
    <th>Saturday</th>
    <th>Sunday</th>
  </tr>
  <tr> <!-- Row 2 -->
    <th>Morning</th>
    <td rowspan="2">Work</td>
    <td rowspan="3">Relax</td>
  </tr>
  <tr> <!-- Row 3 -->
    <th>Afternoon</th>
  </tr>
  <tr> <!-- Row 4 -->
    <th>Evening</th>
    <td>Dinner</td>
  </tr>
</table>

• 위 예시 코드에는 4개의 행(row)들이 존재
• 두 번째 행은 Morning이라는 제목을 가지며, Saturday 아래에 두 행에 걸친 Work와, Sunday 열 아래에 세 행에 걸친 Relax를 지님.
• 세 번째 행은 Aternoon 제목 행만 보유
• 네 번째 행은 Dinner entry 항목만 보유하고 있는데, 이는 Relax가 옆 행까지 걸쳐져 있기 때문.

🔎rowspan 속성은 <td> 태그 내에서만 사용할 수 있는가

▶️ 그렇지 않음. rowspan 속성은 <th> 태그에서도 사용 가능함. 접근성 향상을 위해 여러 행에 걸쳐 있는 테이블 제목을 작성할 때,  scope="rowgroup" 속성도 오프닝 <th> 태그에 넣어줘야 함.

 

 

 

🎯Table Body

시간이 지남에 따라 표(table)가 증가하여 많은 데이터를 포함할 수 있게 되었으며, 매우 길어질 수 있게 되었음. 이렇게 되면 보다 쉬운 관리를 위해 테이블을 분할할 수 있음.

 

긴 테이블들은 table body element인 <tbody>를 이용하여 분할할 수 있음.

<tbody> 요소는 제목까지 포함한 테이블의 모든 데이터들을 보유할 수 있음.

 

<table>
  <tbody>
    <tr>
      <th></th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <th>Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th>Afternoon</th>
    </tr>
    <tr>
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

• 위 예시에서, 모든 테이블 데이터는 table body 요소에 포함되어 있음
• 제목들(heading) 또한 table body에 포함되어 있음 >> 추후에 바꿔줘야 함

🔎테이블은 왜 <tbody> 태그로 분할되어야 하는가

▶️ <thead>와 <tfoot> 태그와 함께, <tbody> 태그는 테이블에게 의미를 부여함. 이 태그들은 사용자 환경을 여러 가지 방법으로 개선할 수 있음.

• 시각 장애인을 위한 향상된 크게 소리내어 읽기 기능
• 인쇄를 위해 각 페이지에 <thead>와 <tfoot>정보 표시
• 조금의 CSS를 이용하여, <thead>와 <tfood> 정보 열람 가능

 

 

🎯Table Head

위 코드에서는 테이블의 제목까지 table body 요소 안에 포함되어있음. table body가 분할되었을 때, 이는 또한 <thead> 요소를 사용하여 테이블의 행 제목을 분할하기도 함.

 

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr>
     <th scope="row">Afternoon</th>
    </tr>
    <tr>
      <th scope="row">Evening</th>
      <td>Dinner</td>
    </tr>
  </tbody>
</table>

• 위 예시에서, 새로운 요소는 <thead> 뿐임. 테이블의 제목들은 해당 요소 안에 포함되어 있음
• table's head는 여전히 제목을 보유하기 위해 row를 필요로 함.

column 제목마니 <thead> 요소의 안으로 들어감. <th> 요소에서 scope 속성을 사용하여 <th> 요소가 row 제목에서 사용되는지 아니면 col 제목에서 사용되는지 그 여부를 나타내줌.

 

🔎thead와 th의 차이는 무엇인가

▶️ thead는 테이블의 제목을 보유하기 위한 필수적인 상자이며, 테이블 전체(header, body, footer)를 구성하기 위해 tbody, tfoot와 함께 사용됨. 반면, th는 단일 heading 요소임.

 

🔎<thead> 요소를 사용해서 table headings를 분할해도 화면에 나타나지 않는데, 왜 table headings 분할에 영향을 준다고 말하는가

▶️ <thead>, <tbody>, <tfoot> 태그들은 테이블이 어떻게 보여지는지에는 영향을 주지 않지만, 다양한 방법으로 사용자의 경험을 향상시켜주는 것에 의미있는 영향을 줄 수 있음. 예를 들어, 약간의 CSS만 있다면 <thead> 태그는 개발자가 테이블 제목을 보다 쉽게 타겟화하고 긴 테이블을 스크롤하며 정보를 볼 수 있도록 스타일을 지정할 수 있음.

 

 

 

 

🎯Table Footer

긴 테이블의 마지막 바닥은 또한 <tfoot> 요소를 사용하여 분할할 수 있음.

<table>
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Revenue</th>
      <th>Costs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Q1</th>
      <td>$10M</td>
      <td>$7.5M</td>
    </tr>
    <tr>
      <th>Q2</th>
      <td>$12M</td>
      <td>$5M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>$22M</td>
      <td>$12.5M</td>
    </tr>
  </tfoot>
</table>

• 위 예시에서, footer(꼬리 부분)는 테이블의 전체 데이터를 보유함. Footer는 데이터의 합계, 차이, 그 외에 다른 데이터 계산 결과들을 담기 위해 사용되곤 함.

🔎합계, 평균과 같은 데이터 결과 계산을 테이블 마지막 줄에 나타낼 때, <tfoot> 태그 대신 <tr> 태그를 사용할 수 있나

▶️ 가능함. <tr> 태그를 사용하고 <tfoot>태그를 아예 생략할 수 있음. 브라우저에서 이를 잘못된 것으로 여기진 않겠지만, 의미있는 <tfoot> 태그를 포함하면 페이지의 접근성과 페이지 사용자의 경험이 향상된다는 것을 인지하는 것이 중요함.

표에 footer 정보가 있는 경우, <tfoot> 태그로 해당 정보를 포함시키는 연습을 하는 것이 가장 좋음.

 

 

 

 

🎯Styling with CSS

기본 테이블은 매우 단조로움. 경계선도 없고, 글씨의 색깔도 검정색이며, 활자도 다른 html 요소들과 동일함.

Cascading Style Sheets의 약자인 CSS는, 개발자들이 웹페이지의 HTML 요소를 꾸미기 위해 사용하는 언어임. 테이블을 꾸미기 위해 CSS를 사용할 수 있으며, 특히 앞서 언급한 다양한 측면들(경계선, 글씨 색, 활자 등)을 꾸밀 수 있음

table, th, td {
  border: 1px solid black;
  font-family: Arial, sans-serif;
  text-align: center;
}

• 위 예시의 코드는 테이블 꾸미기의 다양한 측면(경계선, 글씨 색, 활자)을 보여줌

 

 

 

🎯Review

🌐<table>: 표 생성 요소

🌐<tr>: 표에 행(row) 생성

🌐<td>: 표에 데이터 추가

🌐<th>: 표에 제목 추가. 데이터의 의미를 담고 있음.

🌐colspan 속성: 열(column)에 걸친 데이터를 나타낼 때 사용

🌐rowspan 속성: 행(row)에 걸친 데이터를 나타낼 때 사용

🌐표는 head, body, footer 세 영역으로 분할할 수 있음

• <thead>: 테이블의 head 영역 생성
• <tbody>: 테이블의 body 영역 생성
• <tfoot>: 테이블의 footer 영역 생성