HTML 학생 정보 테이블 — 외부 CSS 연결 완전 정리

 

 

Web Development · HTML + CSS

HTML 학생 정보 테이블 —
외부 CSS 연결 완전 정리

link 태그로 CSS 분리 + 표 구조의 첫걸음

시작 오늘 분석할 코드

가장 단순한 학생 정보 표 — HTML은 구조만 담당하고 스타일은 외부 student1.css 파일로 분리한다. 두 파일이 어떻게 연결되는지가 핵심.

<link rel="stylesheet" href="student1.css"/> <table> <tr> <th>전공</th> <th>이름</th> <th>나이</th> <th>성별</th> </tr> <tr> <td>컴퓨터학과</td> <td>홍길동</td> <td>25세</td> <td>남</td> // 원본 오타: <td 닫는 태그 빠짐 </tr> … </table>

/* student1.css */ th { background-color: silver; }

실제 출력 미리보기

전공	이름	나이	성별
컴퓨터학과	홍길동	25세	남
철학과	홍리라	21세	여

---

용어 핵심 키워드

<link rel="stylesheet">외부 CSS 파일 연결 — head 안에

<table>표 컨테이너

<tr>한 행 (table row)

<th>제목 셀 (table header) — 굵고 가운데

<td>데이터 셀 (table data)

th { ... }CSS 태그 선택자 — 모든 th 일괄

---

1 외부 CSS의 의미

CSS를 HTML 안에 직접 쓰면(<style>) 한 페이지만 적용된다. 외부 파일로 분리하면 다음 장점이 있다.

• 여러 페이지가 같은 스타일 — 하나의 .css만 수정하면 모든 페이지 적용
• HTML이 깔끔 — 구조와 디자인 분리
• 브라우저 캐시 — 한 번 다운받은 CSS는 다른 페이지에서 재사용
• 유지보수 유리 — 디자이너와 개발자 협업 분리

---

2 link 태그의 위치와 속성

<link rel="stylesheet" href="student1.css"/>

• head 안에 둔다 — body가 그려지기 전에 스타일이 적용되어야 한다
• rel="stylesheet" — 이 link가 CSS임을 알림
• href="..." — CSS 파일 경로 (상대 또는 절대)
• 닫는 태그 없음 — self-closing

⚠ body에 두면? — body 그려진 다음 CSS 적용 → 잠깐 스타일 없는 화면이 보였다 사라진다(FOUC, Flash of Unstyled Content).

---

반응형

3 table 구조의 4가지 태그

태그	역할	실제 의미
<table>	표 컨테이너	"여기는 표입니다"
<tr>	한 행	"한 줄"
<th>	제목 셀	"열의 이름"
<td>	데이터 셀	"값"

⚙ 구조의 시각화 — table 안에 tr들이 쌓이고, 각 tr 안에 th 또는 td가 있다. tr이 행, th/td가 셀 단위.

---

4 th와 td의 시각적 차이

둘은 의미적으로 다르다. th는 "제목", td는 "값". 브라우저는 기본으로 th를 굵고 가운데 정렬한다.

본 코드에선 CSS로 th { background-color: silver; }를 추가해 회색 배경까지 입혀 더 눈에 띄게 만든다.

---

5 본 코드의 오류

2개 행에서 마지막 td의 닫는 태그가 잘못됐다.

// 잘못된 코드 (원본) <td>남<td> // ⭐ 닫는 태그가 </td>가 아니라 <td> // 정상 코드 <td>남</td>

⚠ 브라우저는 자동 보정 — 다행히 모던 브라우저는 어느 정도 알아서 수정한다. 하지만 W3C 검증을 통과하지 못하고, 다른 브라우저에선 깨질 수 있다.

---

6 CSS의 태그 선택자

th { background-color: silver; }

이건 CSS의 가장 단순한 선택자 — "모든 th 태그"에 회색 배경을 입힌다. CSS의 다른 선택자도 같은 패턴이다.

• p — 모든 p 태그
• .box — class="box"인 모든 요소
• #main — id="main"인 요소
• th, td — 둘 다 (콤마)
• tr td — tr 안의 td (자손)

---

7 자주 하는 실수

실수	증상	해결
link href 경로 오류	스타일 적용 안 됨	같은 폴더면 그냥 파일명, 아니면 상대경로
head 밖에 link 둠	FOUC 발생	head 안에 두기
td 닫는 태그 오타	표 구조 깨짐	</td> 정확히
tr 안에 직접 텍스트	td 없는 텍스트는 무시됨	td/th로 감싸기
table 외부 스타일이 깨짐	table은 기본 border-collapse: separate	border-collapse: collapse 명시

---

8 현대식 — semantic table

오늘날엔 의미적으로 thead·tbody·tfoot까지 사용한다.

<table> <thead> <tr><th>전공</th><th>이름</th> ... </tr> </thead> <tbody> <tr><td>컴퓨터학과</td> ... </tr> </tbody> </table>

이러면 스크린리더, 검색엔진, CSS가 제목과 본문을 명확히 구분할 수 있다.

---

핵심 한 줄 요약

<link rel="stylesheet">외부 CSS 연결 — head 안에

table / tr / th / td표 / 행 / 제목셀 / 데이터셀

th vs td의미 다름 — 굵기/정렬 다름

CSS 태그 선택자th { ... } — 모든 th 일괄

분리의 장점유지보수·캐시·일관성

현대식thead/tbody로 의미 분리