오늘의 목표. 분실물 공유 테이블 페이지
이번주는 학교 내에서 학생들이 발견한 분실물을 제보하고, 반대로 분실물을 찾아달라고 제보하는 페이지를 Vue에서 React로 마이그레이션하는것이 목표이다.
CSS 에서 styled component로 컴포넌트 스타일링 방식을 옮기는 과정이 필요했기 때문에 오래된 코드들을 새로 고치는 과정에서 CSS를 수정하고 싶었다.
가장 먼저 만들 분실물 리스트 페이지를 구상해보며 그냥 grid로 제작하려 했는데, 기존 Vue로 제작된 페이지가 Table 태그들을 사용하길래 이참에 Table태그들을 공부해보며 사용한 것들을 정리하려고 한다.
아무래도 grid나 flex만으로 제작하는것보단 table태그들을 써보며 의미론적인 웹에 조금이라도 가까워지지 않았나 싶기도 하다.
<table>
최상단 태그로 테이블 전체를 묶는 요소이다.
<thead>
table의 header들을 모아두는 태그. 테이블 내의 데이터 구성이 한종류인 지금 의미는 없지만, 한 열의 header들을 구분할 필요가 생긴다면, 그럴 때 쓸만 할 것 같다.
<tbody>
thead와 마찬가지로 한 열의 데이터를 두 가지 이상의 header의 묶음로 구분해야할 필요가 생긴다면 필요해질 태그이다.
혹은 같은 행 내에서도 데이터의 구분이 필요하다면 직관적이게 구분할 수도 있다.
table의 data들을 모아두는 태그.
<tr>
table row
테이블의 한 열을 일컫는다.
헤더 열이던, 데이터 열이던, 전부 tr 태그로 구성된다.
<th>
table header
테이블의 header 하나를 일컫는다.
th가 모여 하나의 tr을 만들 것이고, 그 tr은 의미론적이게 thead로 묶일 것이다.
<td>
table data
테이블의 데이터 하나를 일컫는다.
td들이 모여 thead가 아닌 tbody에서의 table row를 구성한다.
이렇게 구성된 테이블이 있다면 1개의 tbody내에 3개의 tr, tr마다 7개의 td로 이루어진 테이블이라고 볼 수 있다.
확실히 테이블 태그들은 사용한다고 해서 구성에 큰 도움을 주지는 않았다.
오히려 grid 등을 사용하는 것이 더 편할 수도 있었다.
하지만 테이블을 만든 것이 header부분을 구분하는 데에 편리했으며, tr과 td를 통한 레이아웃 배치는 편리한 편이었다.
테이블 태그를 활용해 페이지 전체 레이아웃을 짤 수도 있을 것 같았지만, 역시 display속성들이 아직은 편한 것 같고, 테이블을 제작할 때 만큼은 잘 두고두고 사용할 수 있을 것 같다.
