10강. 캐스케이드와 상속

이번 강의의 결과물은 여러 CSS 규칙이 충돌할 때 최종 스타일이 선택되는 이유를 개발자 도구로 설명할 수 있는 페이지입니다.

?1. 이번 강의에서 해결할 문제

같은 요소에 article, .project-card, #main-project 규칙이 서로 다른 색을 지정하면 어느 값이 적용될까요? 단순히 마지막에 쓴 규칙이 항상 이기는 것은 아닙니다. CSS의 충돌 해결 과정인 캐스케이드와 부모 값을 전달하는 상속을 이해합니다.

✓학습 목표

• 같은 요소에 article, .project-card, #main-project 규칙이 서로 다른 색을 지정하면 어느 값이 적용될까요? 단순히 마지막에 쓴 규칙이 항상 이기는 것은 아닙니다. CSS의 충돌 해결 과정인 캐스케이드와 부모 값을 전달하는 상속을 이해합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

초보 단계에서는 같은 출처의 일반 CSS 규칙이 충돌할 때 다음 순서로 판단합니다.

1. !important 여부와 규칙의 출처
2. 선택자 구체성
3. 구체성까지 같으면 나중에 작성된 규칙

선택자 구체성의 기본 비교는 다음과 같습니다.

ID 선택자        #main-project  (1, 0, 0)
클래스 선택자    .project-card  (0, 1, 0)
요소 선택자      article        (0, 0, 1)

상속은 일부 속성의 계산된 값이 부모에서 자식으로 전달되는 과정입니다. color, font-family는 일반적으로 상속되지만 margin, padding, border는 기본적으로 상속되지 않습니다. W3C CSS 캐스케이드·상속 표준

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

<article id="main-project" class="project-card featured">
  <h3>게임플레이 기능 프로젝트</h3>
  <p>Unreal C++로 상호작용 기능을 구현합니다.</p>
</article>

파일명: web-basics/portfolio/css/style.css

body {
  color: #334155;
  font-family: Arial, sans-serif;
}

article {
  color: #0f766e;
}

.project-card {
  color: #1d4ed8;
  background-color: white;
}

.featured {
  border: 2px solid #f59e0b;
}

#main-project {
  color: #7c3aed;
}

.project-card {
  background-color: #eef2ff;
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 글자색은 세 선택자가 모두 지정하지만 ID 선택자의 구체성이 가장 높아 보라색이 됩니다.
2. h3과 p에 직접 color가 없으므로 부모 article의 계산된 글자색을 상속합니다.
3. 두 .project-card 배경 규칙은 구체성이 같아서 아래쪽의 #eef2ff가 적용됩니다.
4. .featured의 테두리는 다른 규칙과 같은 속성을 놓고 경쟁하지 않으므로 그대로 적용됩니다.
5. body의 글꼴은 하위 요소에 별도 값이 없으면 상속됩니다.

개발자 도구의 Styles 패널에서 패배한 선언은 취소선으로 표시되며, Computed 패널에서는 최종 계산된 값을 확인할 수 있습니다.

!5. 자주 하는 실수

• 나중에 작성하면 언제나 이전 규칙을 덮는다고 생각함
• 문제를 해결할 때마다 !important를 추가함
• 선택자를 계속 길게 만들어 구체성 경쟁을 키움
• 모든 CSS 속성이 부모에게서 상속된다고 생각함
• HTML에 인라인 스타일을 섞어 외부 CSS가 적용되지 않는 원인을 찾기 어렵게 함
• 개발자 도구의 취소선 규칙을 오류로 오해함

✎6. 짧은 실습 과제

1. 예제의 article, 클래스, ID 규칙을 적용하고 최종 글자색을 예상합니다.
2. 개발자 도구에서 실제 최종 값을 확인합니다.
3. id="main-project"를 제거해 어떤 규칙이 이기는지 확인합니다.
4. 같은 구체성의 .project-card 두 규칙의 순서를 바꿉니다.
5. body의 color와 font-family가 어느 요소까지 상속되는지 확인합니다.
6. border가 자식 요소에 상속되지 않는 것도 확인합니다.

완료 기준은 최종 스타일을 “브라우저가 마음대로 선택했다”가 아니라 구체성, 작성 순서, 상속으로 설명하는 것입니다.

?7. 이해 점검 질문 3개

1. article, .project-card, #main-project가 같은 속성을 지정하면 어느 선택자가 우선하며 그 이유는 무엇인가요?
2. 구체성이 같은 두 규칙이 충돌하면 어떤 규칙이 적용되나요?
3. color는 자식에게 전달되지만 margin은 보통 전달되지 않는 현상을 무엇이라고 하나요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.