📝 HTML table: 시간표로 배우는 테이블 만들기

데이터를 행과 열로 정리할 때 사용하는 table 태그.
기본 구조부터 hover 효과까지, 시간표 예제로 한 번에 정리해보자!

---

1. table 태그 구조

태그	역할
<table>	테이블 전체를 감싸는 컨테이너
<thead>	테이블 헤더 영역 (제목 행)
<tbody>	테이블 본문 영역 (데이터 행)
<tr>	테이블의 한 행 (Table Row)
<th>	헤더 셀 — 굵게 + 가운데 정렬이 기본값
<td>	데이터 셀 (Table Data)

🔍 구조 한눈에 보기

<table>
  ├── <thead>
  │     └── <tr>
  │           ├── <th> 교시/요일
  │           ├── <th> 월
  │           └── <th> 화 ...
  └── <tbody>
        ├── <tr>
        │     ├── <th> 1교시
        │     ├── <td> 수학
        │     └── <td> 영어 ...
        └── <tr> ...

---

2. 실습 예제: 시간표 만들기

📝 HTML 구조

<div class="con">
    <table class="table-1">
        <thead>
            <tr>
                <th>교시/요일</th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1교시</th>
                <td>수학</td>
                <td>영어</td>
                <td>국사</td>
                <td>한문</td>
                <td>체육</td>
            </tr>
            <tr>
                <th>2교시</th>
                <td>수학</td>
                <td>영어</td>
                <td>국사</td>
                <td>한문</td>
                <td>체육</td>
            </tr>
            <tr>
                <th>3교시</th>
                <td>수학</td>
                <td>영어</td>
                <td>국사</td>
                <td>한문</td>
                <td>체육</td>
            </tr>
            <tr>
                <th>4교시</th>
                <td>수학</td>
                <td>영어</td>
                <td>국사</td>
                <td>한문</td>
                <td>체육</td>
            </tr>
            <tr>
                <th>5교시</th>
                <td>수학</td>
                <td>영어</td>
                <td>국사</td>
                <td>한문</td>
                <td>체육</td>
            </tr>
        </tbody>
    </table>
</div>

🎨 CSS 스타일링

.con {
    width: 1000px;
    margin: 0 auto;
}

.table-1 {
    width: 100%;
    /* 인접한 외곽선을 겹치도록 */
    border-collapse: collapse;
}

.table-1 th, .table-1 td {
    border: 1px solid black;
    text-align: center;
    padding: 10px;
}

/* 행에 마우스를 올리면 전체 행 배경 변경 */
.table-1 tbody > tr:hover {
    background-color: #cfcfcf;
}

/* 셀에 마우스를 올리면 해당 셀만 더 진하게 */
.table-1 tbody > tr > td:hover {
    background-color: #afafaf;
}

---

3.💡 중요 학습 포인트

🔍 border-collapse란?

테이블은 기본적으로 th, td마다 각자 테두리를 그립니다.
그러면 셀 사이의 선이 두 겹으로 겹쳐 두껍게 보입니다.

/* 적용 전 — 테두리가 두 겹으로 겹침 */
border-collapse: separate; /* 기본값 */

/* 적용 후 — 인접한 테두리를 하나로 합침 */
border-collapse: collapse;

separate (기본값):        collapse 적용:
┌──┐ ┌──┐ ┌──┐           ┌──┬──┬──┐
│  │ │  │ │  │    →       │  │  │  │
└──┘ └──┘ └──┘           └──┴──┴──┘
  ↑ 테두리가 두 겹          ↑ 테두리가 하나로

🔍 hover 선택자 겹침 원리

/* 1단계: 행 전체에 hover 효과 */
.table-1 tbody > tr:hover {
    background-color: #cfcfcf; /* 연한 회색 */
}

/* 2단계: 셀에 hover 효과 (행보다 더 진하게) */
.table-1 tbody > tr > td:hover {
    background-color: #afafaf; /* 더 진한 회색 */
}

마우스를 셀 위에 올렸을 때:
┌──────┬──────┬──────┐
│ 1교시 │[수학]│ 영어 │  ← 행 전체: #cfcfcf (연한 회색)
└──────┴──────┴──────┘         ↑
                        해당 셀만: #afafaf (더 진한 회색)

💡 선택자 읽는 법
tbody > tr:hover = tbody의 직계 자식인 tr에 hover
tbody > tr > td:hover = tbody > tr의 직계 자식인 td에 hover

⚠️ thead는 hover 제외한 이유

/* tbody에만 hover를 걸었기 때문에 헤더 행은 효과 없음 */
.table-1 tbody > tr:hover { ... }

/* thead까지 적용하려면 */
.table-1 tr:hover { ... } /* tbody, thead 모두 적용 */

---

4. 📖 핵심 요약

포인트	내용
🔲 border-collapse: collapse	인접한 테두리를 하나로 합쳐 깔끔하게
🖱️ tr:hover	행 전체에 hover 효과
🖱️ td:hover	개별 셀에 hover 효과 (행 hover보다 우선)
📌 thead vs tbody	헤더와 본문을 분리해 hover 등 스타일 따로 제어 가능