본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇♂️
1. 테이블 스타일링
- 복잡한 정보를 효과적으로 사용자에게 보여주고자 할 때 테이블 스타일링을 사용한다.
- 테이블은 복잡한 정보를 제공하기에 특히 접근성을 고려해서 디자인을 해야 한다.
2. 웹 브라우저 테이블 기본 스타일링
- 테이블 기본 스타일링은 공간이 협소하고, 각 행(row)와 열(columns) 간 구분이 명확하지 않다.
3. 시각 디자인에서 자취를 감춘 테이블 요소
- 테이블 디자인 시, 접근성을 고려하여 작성된 테이블 제목(caption) 또는 테이블 요약(summary)을 시각 디자인 과정에서 그리지 않기도 한다.
- 시각 디자인 상에서 그려지지 않았다 하더라도, 프론트엔드 개발자는 모든 사용자를 고려하여 테이블 요약 내용을 구조화 해야 한다.
- 디자인의 본질은 “사람"이고, 사람을 위한 디자인이 우리의 목표이기 때문이다.
4. 테이블 스타일링 방법 정리
- 테이블, 셀(제목/내용)의 테두리(border_를 디자인할 수 있다.
- 테이블 셀 사이 간격을 접거나(collapse), 나눌(separate)수 있다.
- 테이블 테두리 사이 간격을 설정할 수 있다.
- border-collapse: separate; 설정 필요
- 테이블 캡션 위치(top, bottom)를 설정할 수 있다.
- 테이블 레이아웃(auto, fixed) 설정을 통해 콘텐츠의 양에 따라 셀의 크기를 변경하거나, 고정할 수 있다.
- 테이블 셀은 패딩(padding) 설정이 가능하나, 마진(margin)은 설정되지 않는다.
- 빈 셀(empty cells)의 표시(show hide) 설정이 가능하다.
- hide 설정 시 빈 셀은 화면에 그려지지 않는다.