이번 편의 결과물: 로고 텍스트에 브랜드 색이 적용되고, DevTools에서 그 규칙이 어떻게 이겼는지 확인합니다. 다루는 개념: 기본 선택자(타입·클래스·id), 결합자 개요, 캐스케이드·명시도 최소 계산, DevTools Styles 패널
01편에서 스타일시트를 연결했지만 아직 규칙은 하나도 없습니다. 이번 편은 규칙 두세 개만 써 보면서 “브라우저가 여러 규칙 중 무엇을 고르는가”를 감으로 익힙니다.
이 편에서 만드는 파일
web-practice/portfolio/
└── css/
└── styles.css ~ (.logo 등 선택자 규칙 추가)개념 정리
선택자는 스타일을 적용할 요소를 고르는 문법입니다.
| 선택자 | 문법 | 예시 | 의미 |
|---|---|---|---|
| 타입 | 태그명 | a | 모든 <a> 요소 |
| 클래스 | .클래스명 | .logo | class="logo"를 가진 요소 |
| id | #아이디 | #mobile-menu | id="mobile-menu"를 가진 요소 |
| 후손 결합자 | A B | header a | header 안에 있는 모든 a |
같은 요소를 여러 규칙이 동시에 가리키면 브라우저는 캐스케이드(cascade) 순서로 하나를 고릅니다. 순서는 이렇습니다.
- 명시도(specificity)가 더 높은 규칙이 이긴다.
- 명시도가 같으면 스타일시트에서 나중에 나온 규칙이 이긴다.
명시도는 (id 개수, 클래스 개수, 타입 개수) 세 자리 숫자로 비교합니다. 왼쪽 자리가 하나라도 크면 무조건 이깁니다.
| 선택자 | 명시도 (id, class, type) |
|---|---|
a | (0, 0, 1) |
header a | (0, 0, 2) |
.logo | (0, 1, 0) |
#mobile-menu | (1, 0, 0) |
.logo(0,1,0)는 header a(0,0,2)보다 클래스 자리가 크므로 항상 이깁니다. !important는 이 계산을 무시하고 강제로 이기지만, 남발하면 나중에 어떤 규칙도 덮어쓸 수 없게 되므로 이 과목에서는 쓰지 않습니다.
명시도가 완전히 같은 두 규칙이 부딪히면 캐스케이드는 소스 순서로 판단합니다. 즉 .logo { color: blue; }와 .logo { color: green; }가 같은 파일에 둘 다 있으면, 나중에 나온 green이 적용됩니다. 그래서 같은 대상을 가리키는 규칙을 여러 번 흩어 쓰지 않고, 한 선택자에 필요한 선언을 모아 한 번만 쓰는 습관이 유지보수에 유리합니다.
실습
1. styles.css 열기
web-practice/portfolio/css/styles.css를 엽니다. 01편 실습에서 넣었던 임시 background: red;는 지운 상태여야 합니다.
2. 규칙 작성
지금까지 쌓인 styles.css 전체는 다음과 같습니다.
/* web-practice/portfolio/css/styles.css */
/* 헤더 링크는 기본 검정 계열, 로고만 브랜드 색으로 덮어쓴다 */
header a {
color: #1f2328;
text-decoration: none;
}
.logo {
color: #0969da;
font-weight: 700;
}header a는 헤더 안의 모든 링크(로고 포함, 내비 링크 포함)를 어두운 색으로 먼저 정합니다. .logo는 로고 링크에만 브랜드 색을 덮어씁니다. .logo의 명시도 (0,1,0)가 header a의 (0,0,2)보다 크므로, 로고는 파란 브랜드 색이 되고 나머지 내비 링크는 어두운 색 그대로 남습니다.
3. 실행
index.html을 브라우저로 열거나 새로고침합니다.
4. 확인
- 로고 텍스트(“Zeno Kim”)가 파란색(
#0969da)으로 보입니다. - 내비 링크(소개·프로젝트·연락)는 여전히 어두운 색입니다.
- DevTools에서 로고 요소를 우클릭 → 검사(Inspect)로 선택한 뒤 Styles 패널을 봅니다.
.logo와header a규칙이 함께 나열되고,header a의color: #1f2328;줄에 취소선이 그어져 있습니다. 이 취소선이 “이 선언은 캐스케이드에서 졌다”는 표시입니다.
직접 해보기
.logo규칙 대신 header .logo 규칙을 추가하면 명시도가 어떻게 바뀌는지 계산해 보고, DevTools로 실제 적용 순서가 맞는지 확인해 보세요.
확인 방법
header .logo의 명시도는 (0, 1, 1)입니다. .logo의 (0, 1, 0)보다 타입 자리가 하나 크므로 header .logo가 이깁니다. 두 규칙을 함께 두고 값을 다르게 주면 DevTools Styles 패널에서 어느 쪽이 취소선 없이 남는지로 확인할 수 있습니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 로고 색이 안 바뀐다 | 클래스 선택자 앞 마침표(.)를 빠뜨림 | .logo처럼 마침표로 시작하는지 확인 |
| 로고는 바뀌는데 다른 링크도 같이 바뀐다 | header a가 아니라 a 하나로만 규칙을 씀 | 범위를 좁히는 header a 형태의 결합자 사용 |
| 나중에 쓴 규칙이 안 먹는다 | 먼저 쓴 규칙의 명시도가 더 높음 | DevTools 취소선을 보고 명시도 표로 다시 계산 |
!important로 강제로 해결하려 한다 | 명시도 계산을 건너뛰려는 습관 | 선택자를 더 구체적으로 바꿔 해결(이 과목에서는 !important 사용 안 함) |