HTML - 테이블 스타일링

안녕하세요, 미래의 웹 개발자 여러분! HTML 테이블 스타일링의 흥미로운 여정에 여러분을 안내하게 되어 매우 기쁩니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 사람으로서, 테이블 스타일링을 마스터하는 것은 그림을 그리는 것과 같다고 말할 수 있습니다. 이것은 캔버스와 도구를 이해하는 것으로 시작됩니다. 그麼, 함께 테이블을 아름답게 꾸며보겠습니다!

HTML - Table Styling

일반 HTML 테이블

테이블에 스타일을 추가하기 전에, 기본적인 HTML 테이블이 어떻게 보이는지 다시 한 번 상기해보겠습니다. 여기 간단한 예제가 있습니다:

<table>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
<tr>
<td>행 1, 셀 1</td>
<td>행 1, 셀 2</td>
</tr>
<tr>
<td>행 2, 셀 1</td>
<td>행 2, 셀 2</td>
</tr>
</table>

이 코드는 두 개의 열과 세 개의 행(헤더 행 포함)을 가진 기본적인 테이블을 생성합니다. 기능적으로는 충분하지만, 솔직히 말해서, 그림이 마르는 것을 지켜보는 것 만큼 흥미롭지는 않습니다. 이때 스타일링이 등장합니다!

HTML 테이블 스타일

이제 테이블을 스타일링할 수 있는 다양한 방법에 대해 이야기해보겠습니다. 이들은 웹 디자인 도구 상자의 붓과 색상과 같은 것입니다:

속성	설명
border	테이블과 셀 주위에 테두리를 설정합니다
border-collapse	셀 테두리가 단일 테두리로 통합되는지 여부를 결정합니다
width	테이블의 너비를 설정합니다
height	테이블의 높이를 설정합니다
text-align	셀 내의 텍스트를 정렬합니다 (왼쪽, 오른쪽, 중앙)
vertical-align	셀 내의 텍스트를 수직으로 정렬합니다 (상단, 중앙, 하단)
padding	셀 테두리와 내용 사이의 공간을 설정합니다
background-color	테이블이나 셀의 배경색을 설정합니다
color	텍스트 색상을 설정합니다
font-family	텍스트의 글꼴을 설정합니다
font-size	텍스트의 크기를 설정합니다

HTML 테이블 스타일링 예제

이제 이 속성들을 몇 가지 예제로 실제로 적용해보겠습니다. 나중에 테이블을 마스터하신다면, 프로처럼 스타일링할 수 있을 것입니다!

예제 1: 기본 테이블 스타일링

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>

이 예제에서는 기본적인 스타일을 추가했습니다. border-collapse: collapse 속성은 셀 테두리를 단일 테두리로 통합하여 깔끔한 외관을 만듭니다. 테이블 너비를 100%로 설정하고, 셀에 테두리를 추가하며, 패딩을 주고 헤더에 연한 회색 배경을 주었습니다. 테이블에 멋진 머리카락을 자르고 새 옷을 입히는 것과 같습니다!

예제 2: 족제비 그래픽

<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>

<table>
<tr>
<th>제품</th>
<th>가격</th>
</tr>
<tr>
<td>사과</td>
<td>$1.00</td>
</tr>
<tr>
<td>바나나</td>
<td>$0.75</td>
</tr>
<tr>
<td>오렌지</td>
<td>$0.90</td>
</tr>
</table>

이 예제에서는 족제비 그래픽을 소개합니다. tr:nth-child(even) 선택자는 짝수 행을 대상으로 하여 연한 회색 배경을 주습니다. 이 번갈아 가는 색상 계획은 사용자가 행을 테이블 가로로 따라가는 데 도움이 됩니다. 테이블에 멋진 핀 스트라이프 슈트를 입히는 것과 같습니다!

예제 3: 응답형 테이블

<style>
.responsive-table {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
}
tr {
margin-bottom: 15px;
}
th {
text-align: center;
}
}
</style>

<div class="responsive-table">
<table>
<tr>
<th>이름</th>
<th>직위</th>
<th>사무실</th>
<th>나이</th>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>시스템 아키텍트</td>
<td>에딩버러</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>회계사</td>
<td>도쿄</td>
<td>63</td>
</tr>
</table>
</div>

이 예제는 테이블의 응답성을 소개합니다. 더 큰 화면에서는 일반 테이블로 동작하지만, 600px 보다 작은 화면에서는 카드와 같은 레이아웃으로 전환됩니다. 각 셀을 블록으로 표시하고 행 사이에 여백을 추가합니다. 테이블이 요가를 하듯이 다양한 화면 크기에 맞춰 적응합니다!

결론

이렇게 우리는 테이블을 지루하고 흥미롭지 않은 것에서 아름답고 응답형으로 변모시켰습니다. 테이블 스타일링은 가독성과 사용자 경험을 향상시키는 것에 관한 것입니다. 물론, 예쁜 것을 만드는 것도 재미있지만요!

좋은 식사는 적절한äsentation 없이는 완벽하지 않듯이, 잘 구조화된 HTML 문서는 적절히 스타일된 테이블 없이는 완벽하지 않습니다. 그麼, 테이블을 스타일링하러 나가세요! 그리고 웹 개발의 세계에서, 실천이 완벽을 이루는 것을 기억하세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset