🎨
EPISODE 01
선택자 · 우선순위 · 상속
CSS 기초
CSS를 HTML에 연결하는 3가지 방법, 선택자 종류, 우선순위(specificity), 상속 개념과 기본 텍스트 속성을 익힙니다.
CSS선택자우선순위상속
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 html-06
결과물
외부 CSS 파일을 연결하고 다양한 선택자로 스타일 적용
이 강의에서 배우는 것
- 1인라인/내부/외부 3가지 CSS 적용 방식의 장단점을 설명한다
- 2태그·클래스·ID·자손·자식·형제·가상 클래스 선택자를 사용한다
- 3우선순위 점수(인라인 1000, ID 100, 클래스 10, 태그 1)를 이해한다
- 4상속되는 속성과 그렇지 않은 속성을 구분한다
1. CSS 연결 방법
1-1. 인라인 (비추천)
html
<p style="color: red; font-size: 18px;">인라인 스타일</p>1-2. 내부 스타일
html
<head>
<style>
p { color: blue; }
</style>
</head>1-3. 외부 스타일 (실무 표준)
html
<head>
<link rel="stylesheet" href="style.css">
</head>여러 HTML 파일에서 동일한 CSS를 재사용. 유지보수가 가장 쉬워 실무에서 표준입니다.
2. 선택자
| 종류 | 예시 | 설명 |
|---|---|---|
| 태그 | p { } | 모든 <p> 선택 |
| 클래스 | .card { } | class="card" 요소 |
| ID | #header { } | id="header" 요소 |
| 자손 | div p { } | div 안의 모든 p |
| 자식 | ul > li { } | ul의 직계 자식 li |
| 형제 | h1 + p { } | h1 바로 다음 p |
| 전체 | * { } | 모든 요소 |
가상 클래스
css
a:hover { color: red; }
a:visited { color: purple; }
li:first-child { color: blue; }
li:last-child { color: green; }
li:nth-child(2) { color: orange; }3. 우선순위 (Specificity)
text
인라인 > ID > 클래스 > 태그| 선택자 | 점수 |
|---|---|
| 인라인 (style="") | 1000 |
| ID (#id) | 100 |
| 클래스 (.class), 가상 클래스 (:hover) | 10 |
| 태그 (p, div) | 1 |
css
/* 같은 <p id="title" class="text">에 모두 적용될 때 */
p { color: black; } /* 1점 */
.text { color: blue; } /* 10점 */
#title { color: red; } /* 100점 → 적용됨 */⚠️
!important는 모든 우선순위를 무시하지만 남용하면 유지보수가 어려워집니다.
4. 상속
css
body {
font-family: 'Arial', sans-serif; /* 모든 자식에게 상속 */
color: #333;
}- 상속됨: color, font-family, font-size, line-height, text-align …
- 상속 안 됨: margin, padding, border, background, width …
5. 기본 텍스트 속성
css
p {
color: #333333;
font-size: 16px;
font-weight: bold; /* normal, bold, 100~900 */
text-align: center; /* left, center, right, justify */
text-decoration: none; /* 링크 밑줄 제거 */
line-height: 1.6;
}