CSS 외부 스타일시트 — th { background-color } 완전 정리

 

 

Web Development · CSS

CSS 외부 스타일시트 —
th { background-color } 완전 정리

단 한 줄 — CSS 규칙의 가장 단순한 모양

시작 오늘 분석할 코드

student.html에 연결된 외부 CSS의 전체 내용이다 — 한 줄짜리 규칙 하나. CSS의 기본 문법과 외부 파일 작동 방식을 익히는 가장 작은 예다.

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

실제 출력 미리보기

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

---

용어 핵심 키워드

선택자(selector)"누구한테 적용할지"

선언(declaration)"무엇을 어떻게 할지"

속성(property)바꿀 항목 이름

값(value)속성에 줄 새 값

중괄호 { }선언 묶음 — 여러 개 가능

세미콜론 ;선언 끝 — 여러 개일 때 구분

---

1 CSS 규칙의 해부

한 줄 코드의 각 부분을 잘라보면 4개의 의미가 있다.

전체th { background-color: silver; }

selectorth→ 모든 th 태그

propertybackground-color→ 배경색 속성

valuesilver→ 회색

읽으면 "모든 th 태그의 배경색을 silver(회색)로 설정"이라는 뜻이다.

---

2 외부 파일이 작동하는 흐름

• HTML의 <link href="student1.css">가 외부 파일을 요청한다
• 브라우저가 student1.css를 다운로드
• 파일 안의 규칙들이 전체 페이지에 적용
• th 태그가 만들어질 때마다 자동으로 회색 배경

💡 확장성 — 이 한 줄에 다음 줄들을 추가하기만 하면, 모든 페이지의 모든 th에 적용된다. 변경은 한 곳에서만.

---

3 여러 선언 묶기

{ } 안에 여러 선언을 두 개, 세 개 넣을 수 있다.

th { background-color: silver; color: white; font-weight: bold; padding: 8px 12px; }

각 선언은 ;(세미콜론)으로 끝난다. 마지막 선언은 생략 가능하지만 항상 붙이는 게 표준이다 (나중에 줄 추가 시 실수 방지).

---

반응형

4 색을 표현하는 4가지 방법

방식	예	설명
이름	silver, red, blue	140개 정도의 미리 정의된 이름
HEX	#c0c0c0	6자리 16진수 (정밀)
rgb	rgb(192,192,192)	R/G/B 값 0~255
rgba	rgba(192,192,192,0.5)	+ 투명도 0~1

본 코드의 silver는 첫 번째 방식. 빠르게 쓰기 좋지만, 실무에서는 정확한 디자인을 위해 HEX 또는 rgb를 더 많이 쓴다.

---

5 background 단축 속성

background-color는 단일 속성이고, background는 여러 background 관련 속성을 한 번에 쓸 수 있다.

/* 분리된 형태 */ th { background-color: silver; background-image: url(bg.png); background-repeat: no-repeat; } /* 단축 (shorthand) */ th { background: silver url(bg.png) no-repeat; }

---

6 주석

/* 한 줄 주석 */ /* 여러 줄도 가능하다 */

CSS 주석은 /* */ 형태. HTML 주석(<!-- -->)이나 JS 주석(//)과 다르니 혼동 주의.

---

7 자주 하는 실수

실수	증상	해결
속성명 오타 (backgroud-color)	적용 안 됨, 에러 없음	철자 정확히
색 이름 오타 (silvr)	기본값으로 무시	이름 정확히 또는 HEX 사용
: 없이 = 사용	구문 오류	property: value
중괄호 누락	파일 전체 적용 실패	{ } 짝 맞추기
// 주석 사용	다음 줄까지 무시되어 깨짐	/* */ 사용

---

8 CSS의 우선순위 (특이성)

여러 규칙이 같은 속성을 두고 충돌하면 더 구체적인 선택자가 이긴다.

• th — 1점 (태그)
• .special — 10점 (클래스)
• #header — 100점 (id)
• style="..." 인라인 — 1000점
• !important — 모두 무효 (남용 X)

---

핵심 한 줄 요약

selector { prop: val; }CSS 규칙의 기본 문법

th태그 선택자 — 모든 th 일괄

background-color배경색 속성

silver색 이름 — 미리 정의된 140개 중 하나

한 줄로 충분최소 단위 CSS — 확장은 줄 추가

주석/* */ — // 아님