부트스트랩 - 테이블: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 테이블의 fascinante 세계로 뛰어들어 보겠습니다. 초보자라도 걱정하지 마세요 - 이 여정에서 여러분의 친절한 가이드로서 저와 함께 단계별로 진행하겠습니다. 이 튜토리얼의 끝을 맺을 때까지, 프로처럼 아름답고 반응형 테이블을 만드는 법을 배울 것입니다!

부트스트랩 테이블이란?

가서 보겠습니다, 부트스트랩 테이블이 무엇인지에 대해 이야기해 보겠습니다. 당신이 사랑하는 책들을 책장에 정리하는 상상해 보세요. 부트스트랩 테이블은 그 책장과 같은 역할을 합니다. 그러나 웹사이트에서 그 역할을 합니다! 정보를 깔끔하고 정리된 방식으로 제시하여 방문자들이 쉽게 읽고 이해할 수 있도록 도와줍니다.

기본 테이블

기본적인 것부터 시작해 보겠습니다. 간단한 부트스트랩 테이블을 만드는 방법은 다음과 같습니다:

<table class="table">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>도시</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

이 코드는 이름, 나이, 도시 세 개의 열을 가진 테이블을 만듭니다. <thead> 섹션은 테이블 헤더를 정의하며, <tbody>는 실제 데이터를 포함합니다. class="table"는 부트스트랩의 마법을 부여합니다!

테이블 변형

부트스트랩은 테이블에 다양한 스타일을 제공합니다. 데이터에 다양한 옷을 입히는 것과 같습니다! 다음은 몇 가지 변형입니다:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

이러한 클래스를 <table> 태그에 추가하면 테이블의 전반적인 외관을 변경할 수 있습니다. 그렇게 간단합니다!

강조된 테이블

특정 행이나 셀을 강조하고 싶다면, 부트스트랩이 도와줍니다:

<table class="table">
<thead>
<tr>
<th>열 1</th>
<th>열 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>활성 행</td>
<td>강조됨</td>
</tr>
<tr>
<td>일반 행</td>
<td class="table-primary">강조된 셀</td>
</tr>
</tbody>
</table>

table-active 클래스는 전체 행을 강조하며, table-primary과 같은 클래스는 개별 셀에 사용할 수 있습니다.

줄무늬 행과 열

학교에서 사용했던 줄무늬 노트북처럼 테이블에 줄무늬를 추가할 수 있습니다!

줄무늬 행을 위해:

<table class="table table-striped">
...
</table>

줄무늬 열을 위해:

<table class="table table-striped-columns">
...
</table>

호버 가능한 행

테이블을 상호작용적으로 만들고 싶다면, 호버할 때 행이 밝게 빛나도록 할 수 있습니다:

<table class="table table-hover">
...
</table>

마법 같아요 - 시험해 보세요!

테두리 있는 테이블과 테두리 없는 테이블

테이블에 테두리를 추가할 수 있습니다:

<table class="table table-bordered">
...
</table>

또는 테두리를 완전히 제거할 수 있습니다:

<table class="table table-borderless">
...
</table>

작은 테이블

보다紧凑한 모양을 원한다면 table-sm 클래스를 사용하세요:

<table class="table table-sm">
...
</table>

데이터를 많이 담아야 할 때에 적합합니다!

테이블 그룹 분리자

데이터를 그룹화하고 싶다면 table-group-divider 클래스를 사용하세요:

<table class="table">
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>데이터 3</td>
<td>데이터 4</td>
</tr>
</tbody>
</table>

이는 테이블 본문 그룹 사이에 시각적인 분리자를 추가합니다.

수직 정렬

셀 내에서 내용의 수직 정렬을 제어할 수 있습니다:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>이 셀과 이웃 셀은 하단 정렬됩니다</td>
<td>하단</td>
<td class="align-top">이 셀은 상단 정렬됩니다</td>
</tr>
</tbody>
</table>

align-middle을 사용하면 중간 정렬이 되고, align-top은 상단 정렬이 됩니다.

반응형 테이블

모든 기기에서 테이블이 잘 보이도록 하려면 table-responsive 클래스를 사용하세요:

<div class="table-responsive">
<table class="table">
...
</table>
</div>

이렇게 하면 테이블이 작은 화면에서 수평 스크롤로 나타납니다. 테이블이 슈퍼맨처럼 모든 화면 크기에 맞게 변형됩니다!

巢穴

테이블 내부에 다른 테이블을 넣을 수도 있습니다! 다음은 방법입니다:

<table class="table table-striped">
<thead>
<tr>
<th>이름</th>
<th>상세정보</th>
</tr>
</thead>
<tbody>
<tr>
<td>부모 행</td>
<td>
<table class="table table-sm">
<tr>
<td>巢穴 행 1</td>
</tr>
<tr>
<td>巢穴 행 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

러시아 인형처럼 테이블 안에 테이블을 넣을 수 있습니다!

테이블의 해부학

테이블의 부분을 분해해 보겠습니다:

테이블 머리

<table class="table">
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
</thead>
...
</table>

<thead>는 테이블 헤더를 정의합니다.

테이블 발

<table class="table">
...
<tfoot>
<tr>
<td>foo터 1</td>
<td>foo터 2</td>
</tr>
</tfoot>
</table>

<tfoot>를 사용하여 테이블 푸터를 정의할 수 있습니다. 요약이나 총계에 적합합니다.

제목

테이블에 제목을 추가하려면 <caption>을 사용하세요:

<table class="table">
<caption>사용자 목록</caption>
...
</table>

테이블에 이름 태그를 달아줍니다!

결론

이제 여러분은 부트스트랩을 사용하여 테이블을 만들고 스타일링하는 방법을 배웠습니다. 연습이 완벽을 만들어 줍니다, 그래서 다양한 클래스 조합을 실험해 두시오. 얼마 지나지 않아, 효과적으로 데이터를 정리하고 아름다운 테이블을 만드는 데 능숙해질 것입니다!

기쁜 코딩을 기원하며, 여러분의 테이블이 항상 아름답게 부트스트랩되기를 바랍니다!

기능	클래스	설명
기본 테이블	table	기본 부트스트랩 테이블
변형	table-primary, table-secondary, 등	다양한 색상 스키마
강조된 테이블	table-active, table-primary, 등	특정 행이나 셀 강조
줄무늬 행	table-striped	번갈아 가면서 줄무늬 행 색상
줄무늬 열	table-striped-columns	번갈아 가면서 줄무늬 열 색상
호버 가능한 행	table-hover	행에 호버할 때 강조
테두리 있는 테이블	table-bordered	테이블과 셀 모두에 테두리 추가
테두리 없는 테이블	table-borderless	모든 테두리 제거
작은 테이블	table-sm	테이블을 더 작게 만들기
테이블 그룹 분리자	table-group-divider	테이블 본문 그룹 사이에 시각적 분리자 추가
수직 정렬	align-top, align-middle, align-bottom	셀 내에서 내용의 수직 정렬 제어
반응형 테이블	table-responsive	작은 화면에서 수평 스크롤로 테이블 보기
巢穴	N/A	테이블 셀 내에 테이블巢穴
테이블 머리	<thead>	테이블 헤더 정의
테이블 발	<tfoot>	테이블 푸터 정의
제목	<caption>	테이블에 제목 추가

Credits: Image by storyset