2024.08.12

2024 파리 올림픽에서 각 나라가 획득한 메달 수를 추적하는 Olympic Medal Tracker 만들기

 

- 필수 구현사항 

• 제출 폼 UI 구현하기: 나라 이름과 금, 은, 동 메달 수를 입력할 수 있는 폼을 만듭니다.
• 메달 집계 CRUD 구현하기
  • Create: 새로운 나라와 그 나라가 획득한 메달 수를 추가합니다.
  • Read: 나라별 메달 집계 리스트를 보여줍니다.
  • Update: 기존에 추가된 나라의 메달 수를 수정할 수 있습니다.
  • Delete: 나라 정보를 삭제할 수 있습니다.
• 정렬: 메달 집계는 금메달 수를 기준으로 내림차순 정렬되어야 합니다.

제일 만만한 <ul> & <li> 태그를 사용하여 인풋 값을 렌더링하는 것은 됐는데

예시를 확인 했더니 <ul>&<li>태그가 아닌 <table>태그라는 사실..

 

<table> 태그가 무엇일까?

https://ofcourse.kr/html-course/table-%ED%83%9C%EA%B7%B8

HTML <table> 태그 - ofcourse

 

 

<table>태그

HTML 문서에서 표를 만드는 태그입니다.

행과 열을 표현하기 위해 <tr>,<td>등의 태그와 함께 작성하게 됩니다.

 

<tr>태그는 표의 행을 나타냅니다.

<td>태그는 표의 열을 나타내며, <tr>태그 하위에 위치합니다.

 

<table>
	<tr>
		<td>섹션1</td>
		<td>섹션2</td>
	</tr>
	<tr>
		<td>섹션3</td>
		<td>섹션4</td>
	</tr>
	<tr>
		<td>섹션5</td>
		<td>섹션6</td>
	</tr>
</table>

 

출력 결과

 

 

<thead>태그

표는 제목 줄을 가지고 있는 경우가 많습니다.

<table> 태그도 제목 줄을 지원하며, <thead>, <tbody>, <th>태그를 사용하여 구현합니다.

 

<thead>태그는 표의 제목 영역을 나타냅니다. <table>하위, <tr>상위에 위치합니다.

<tbody>태그는 표의 본문 영역을 나타냅니다. <theads>와 같은 위치에 존재합니다.

<th>태그는 제목 셀을 나타냅니다. <td>태그 대신 사용됩니다.

<table>
	<thead>
		<tr>
			<th>학교</th>
			<th>창립년도</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>서울대학교</td>
			<td>1946</td>
		</tr>
		<tr>
			<td>고려대학교</td>
			<td>1905</td>
		</tr>
		<tr>
			<td>연세대학교</td>
			<td>1885</td>
		</tr>
	</tbody>
</table>

 

출력 결과

 

 

rowspan, colspan

표는 셀 병합을 통해 더 보기 좋게 만들기도 하는데,

<table>태그에서는 rowspan과 colspan이라는 속성을 통해 병합 기능을 제공합니다.

 

colspan은 <td>태그에 사용하며 열을 확장합니다. (좌우로)

rowspan은 <td>태그에 사용하며,행을 확장합니다. (상하로)

 

 

 

- colspan

<table>
	<tr>
		<td colspan="2">2x1 셀</td>
	</tr>
	<tr>
		<td>1x1 셀</td>
		<td>1x2 셀</td>
	</tr>
</table>

 

출력 결과

 

 

- rowspan

<table>
	<tr>
    		<td rowspan="2">1x2 셀</td>
        	<td>1x1 셀</td>
	</tr>
	<tr>
		<td>1x1 셀</td>
	</tr>
</table>

 

출력 결과