CSS - 테이블

웹 개발자 지망생 여러분 환영합니다! 오늘 우리는 CSS 테이블의 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 여정을 안내해 드리게 되어 기쁩니다. 테이블은 오래된 방식처럼 보일 수 있지만, 믿으세요, 현대 웹 디자인에서 여전히 매우 유용합니다. 그럼 손을 비벼서 시작해 보겠습니다!

CSS - Tables

CSS 테이블 - 테두리 모두 통합

자신의 정원에 울타리를 세우고 싶을 때, 울타리 기둥이 서로 닿기를 원하지 않나요? 그게 exactamente border-collapse가 테이블 테두리에 하는 일입니다. 셀 테두리가 분리되는지 통합되는지 결정합니다.

table {
border-collapse: collapse;
}

이 코드는 여러분의 테이블 테두리가 서로 닿게 만들어 깨끗하고 통합된 모습을 만듭니다. 테이블에 멋진 머리칼을 자르는 것과 같습니다!

CSS 테이블 - 테두리 간격

셀 사이에 공간을 두고 싶다면 border-spacing이 유용합니다. 테이블 셀의 사회적 거리두기라고 할 수 있습니다!

table {
border-spacing: 5px;
}

이렇게 하면 셀 사이에 5픽셀의 간격을 추가합니다. 수평과 수직 간격을 다르게 설정할 수도 있습니다:

table {
border-spacing: 5px 10px;
}

여기서는 수평 간격이 5픽셀, 수직 간격이 10픽셀입니다. 테이블 셀에 개인 공간을 주는 것과 같습니다!

CSS 테이블 - 제목 위치

테이블에는 제목이 있을 수 있으며, caption-side를 사용하여 제목의 위치를 제어할 수 있습니다. 책 표지에 제목을 상단에 두는지 하단에 두는지 결정하는 것과 같습니다.

caption {
caption-side: bottom;
}

이렇게 하면 테이블 제목을 하단에 배치합니다. 상단에 배치하고 싶다면 top을 사용할 수 있습니다.

CSS 테이블 - 공백 셀

테이블의 공백 셀에 대해 궁금했나요? empty-cells 속성을 사용하여 보이거나 숨길 수 있습니다.

table {
empty-cells: hide;
}

이렇게 하면 공백 셀이 보이지 않게 됩니다. 테이블 셀과 hide-and-seek을 하는 것과 같습니다!

CSS 테이블 - 테이블 레이아웃

table-layout 속성은 테이블의 셀, 행, 열이 어떻게 배치되는지 결정합니다. 엄격한 좌석배치와 자유롭게 자리 잡는 식사 파티 사이의 선택과 같습니다.

table {
table-layout: fixed;
}

이렇게 하면 고정된 테이블 레이아웃을 설정하여 대형 테이블의 렌더링 속도를 향상시킬 수 있습니다.

CSS 테이블 - 고정 레이아웃

고정 레이아웃을 사용하면 테이블의 너비는 첫 번째 행이나 지정된 너비에 의해 결정됩니다. 결혼식 식사에서 할당된 좌석과 같습니다.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

이렇게 하면 네 개의 동일한 너비를 가진 테이블을 생성합니다.

CSS 테이블 - 자동 레이아웃

자동 레이아웃은 열 너비를 콘텐츠에 따라 조정합니다. 비공식적인 식사 파티에서 손님들이 자신의 자리를 선택하는 것과 같습니다.

table {
table-layout: auto;
width: 100%;
}

이 경우 브라우저가 열 너비를 콘텐츠에 따라 조정합니다.

CSS 테이블 - 높이와 너비

테이블과 그 셀의 크기를 height와 width 속성을 사용하여 제어할 수 있습니다. 식사 테이블이 얼마나 크게 만들어야 하는지 결정하는 것과 같습니다.

table {
width: 100%;
}

td {
height: 50px;
}

이렇게 하면 테이블 너비를 컨테이너의 100%로 설정하고 각 셀 높이를 50픽셀로 설정합니다.

CSS 테이블 - 텍스트 정렬

테이블 셀 내 텍스트 정렬은 가독성에 매우 중요합니다. 식사 테이블에 음식을 어떻게 배치하는지와 같은 Presentation이 중요합니다!

td {
text-align: center;
vertical-align: middle;
}

이렇게 하면 각 셀 내 텍스트를 수평과 수직으로 중앙에 정렬합니다.

CSS 테이블 - 테두리

테두리는 테이블을 시각적으로 더 매력적이고 가독성을 높이는 데 도움이 됩니다. 정보를 정리하기 위해 종이에 선을 그리는 것과 같습니다.

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

이렇게 하면 테이블과 모든 셀에 1픽셀 두께의 실선 테두리를 추가합니다.

CSS 테이블 - 배경 색상

배경 색상을 추가하면 테이블을 시각적으로 더 매력적이고 테이블의 다른 부분을 구분하는 데 도움이 됩니다. 집의 방을 다른 색상으로 칠하는 것과 같습니다.

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

이렇게 하면 테이블에 연회색 배경을 설정하고 헤더 셀에 녹색 배경과 白色 텍스트를 설정합니다.

CSS 테이블 - 폰트 스타일

테이블 내 텍스트 스타일을 변경하면 가독성을 크게 향상시킬 수 있습니다. 책에 적절한 폰트를 선택하는 것과 같은 차이를 만들 수 있습니다.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

이렇게 하면 전체 테이블에 Arial 폰트를 설정하고 헤더 텍스트를 볼드체로 하고 셀 텍스트 크기를 14픽셀로 설정합니다.

CSS 테이블 - 기타 스타일

테이블에 적용할 수 있는 다양한 스타일이 있습니다. 다음은 빠른 개요입니다:

속성	설명	예제
`padding`	셀 내 공간	`td { padding: 10px; }`
`border-radius`	둥근 모서리	`table { border-radius: 5px; }`
`box-shadow`	그림자 효과	`table { box-shadow: 2px 2px 5px grey; }`
`opacity`	투명도	`table { opacity: 0.8; }`

CSS 테이블 - 여백

여백은 테이블이 페이지의 다른 요소들로부터 공간을 확보하는 데 도움이 됩니다. 벽에 걸린 그림 틀 주변에 공간을 남기는 것과 같습니다.

table {
margin: 20px auto;
}

이렇게 하면 테이블 상단과 하단에 20픽셀의 여백을 추가하고 수평 중앙에 배치합니다.

CSS 테이블 - 수직/수평 분리선

테이블에 분리선을 추가하여 열이나 행을 구분할 수 있습니다. 노트북에 직선을 그리는 것과 같습니다.

td, th {
border-right: 1px solid black;
}

tr {
border-bottom: 1px solid black;
}

이렇게 하면 열 사이에 수직선과 행 사이에 수평선을 추가합니다.

CSS 테이블 - 줄무늬 테이블

줄무늬 테이블은 데이터 행을 읽기 쉽게 만들 수 있습니다. 책에서 번갈아 가면서 줄을 강조하는 것과 같습니다.

tr:nth-child(even) {
background-color: #f2f2f2;
}

이렇게 하면 테이블에 번갈아 가면서 하얀색과 연회색 행을 생성합니다.

CSS 테이블 - 반응형 테이블

테이블을 반응형으로 만들면 모든 기기에서 잘 보일 수 있습니다. 식사 테이블이 손님 수에 따라 확장하거나 수축하는 것과 같습니다.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

이 코드는 작은 화면에서 테이블을 목록 형식으로 변환하여 모바일 기기에서 더 쉽게 읽을 수 있게 합니다.

CSS 테이블 - 관련 속성

테이블을 작업할 때 유용할 수 있는 관련 CSS 속성 목록입니다:

속성	설명
`border-collapse`	셀 테두리가 분리되는지 통합되는지 결정
`border-spacing`	셀 테두리 간격 설정
`caption-side`	테이블 제목의 위치 지정
`empty-cells`	공백 셀 테두리 표시 여부 설정
`table-layout`	테이블 셀, 행, 열 배치 알고리즘 설정
`vertical-align`	셀 내 텍스트 수직 정렬 설정
`text-align`	셀 내 텍스트 수평 정렬 설정

이제 CSS로 테이블을 만들고 스타일링하는 방법을 잘 알고 계신 것입니다. 연습이 완벽을 만드는 법을 기억하시고, 이 속성들을 실험해 보세요. 즐거운 코딩을!

Credits: Image by storyset