1. 오늘의 학습 목표
학습 목표: HTML 문서에서 원하는 요소를 정확히 선택하는 CSS 선택자의 종류와 사용법을 배웁니다. 여러 스타일 규칙이 충돌할 때 어떤 규칙이 우선 적용되는지를 결정하는 명시도의 원리를 이해합니다.
핵심 요약: 선택자는 스타일을 적용할 대상을 지정하는 도구이며, 명시도는 스타일 간의 힘겨루기에서 승자를 가리는 규칙입니다.
2. 핵심 개념 파헤치기
2.1. CSS 선택자(Selector)란 무엇인가?
CSS 선택자는 스타일을 적용하고자 하는 HTML 요소를 찾아내기 위한 패턴입니다. Day 6에서 만든 HTML 구조에서 특정 부분, 예를 들어 제목(<h1>)이나 내비게이션 링크(<a>)에만 색상이나 크기를 바꾸고 싶을 때 선택자를 사용합니다.
기본 선택자
- 전체 선택자 (*): 모든 요소를 선택합니다.
- 유형 선택자 (h1, p): 특정 태그 이름을 가진 모든 요소를 선택합니다.
- 클래스 선택자 (.classname): 특정 class 속성을 가진 요소를 선택합니다.
- ID 선택자 (#idname): 특정 id 속성을 가진 요소를 선택합니다. (ID는 페이지 내에서 고유해야 합니다.)
2.2. 명시도(Specificity)란 무엇인가?
하나의 요소에 여러 CSS 규칙이 동시에 적용될 때, 브라우저는 어떤 스타일을 최종적으로 적용할지 결정해야 합니다. 이때 사용되는 것이 바로 명시도라는 우선순위 점수입니다. 명시도 점수가 높을수록 우선순위가 높습니다.
명시도 규칙 (낮은 순서 → 높은 순서):
- 유형 선택자 (예: h1, div)
- 클래스 선택자 (예: .header), 속성 선택자 (예: [type="text"]), 가상 클래스 (예: :hover)
- ID 선택자 (예: #logo)
- 인라인 스타일 (HTML style 속성)
- !important 키워드 (가장 강력하지만, 꼭 필요할 때만 사용해야 합니다)
일반적으로 ID > 클래스 > 유형 순으로 기억하면 쉽습니다
3. 코드로 배우기
3.1. 구현 목표
하나의 <h1> 요소에 유형, 클래스, ID 선택자를 이용해 각각 다른 색상을 지정하고, 명시도 규칙에 따라 어떤 색상이 최종적으로 적용되는지 확인합니다
3.2. [1단계: 스타일 충돌을 위한 HTML/CSS 준비]
id와 class를 모두 가진 <h1> 요소를 만듭니다. 그리고 각기 다른 선택자를 사용해 스타일을 적용합니다
<head>
<style>
/*1. 유형 선택자 (명시도 낮음) */
h1 {
color: blue;
}
/*2. 클래스 선택자 (명시도 중간) */
.main-title {
color: green;
}
/* 3. ID 선택자 (명시도 높음) */
#page-title {
color: red;
}
</style>
</head>
<body>
<h1 id="page-title" class="main-title">Specificity Test</h1>
</body>
3.3. [2단계: 결과 확인 및 인라인 스타일 추가]
위 코드를 브라우저에서 열면 <h1> 요소의 글자색은 명시도가 가장 높은 ID 선택자의 red가 됩니다. 여기에 인라인 스타일을 추가하면 어떻게 될까요? 인라인 스타일은 ID 선택자보다 명시도가 더 높습니다.
<!--인라인 스타일은 ID 선택자보다 우선순위가 높음 -->
<h1 id="page-title" class="main-title" style="color: purple;">
Specificity Test
</h1>이제 글자색은 purple로 변경됩니다.
4. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Specificity</title>
<style>
h1 {
color: blue !important;
}
.main-title {
color: green;
}
#page-title {
color: red;
}
</style>
</head>
<body>
<!--
아래 요소에는 3개의 CSS 규칙과 1개의 인라인 스타일이 충돌합니다
1. 인라인 스타일(purple) vs ID(red) -> 인라인 스타일 승!
2. 하지만 유형 선택자에 !important가 붙었으므로 최종 승자는 blue가 됩니다
-->
<h1 id="page-title" class="main-title" style="color: purple;">
Specificity Test
</h1>
</body>
</html>'개발 > 웹 개발' 카테고리의 다른 글
| Day 9: CSS Flexbox (1) | 2024.08.07 |
|---|---|
| Day 8: CSS 박스 모델과 레이아웃 기초 (0) | 2024.08.05 |
| Day 6: HTML과 시맨틱 웹 (1) | 2024.08.02 |
| Day 5: CORS (Cross-Origin Resource Sharing) (1) | 2024.08.01 |
| Day 4: 동기 vs 비동기 (2) | 2024.07.31 |
