HTML CSS

CSS 우선순위와 상속 - 22

mynote6676 2025. 6. 7. 16:42

CSS는 Cascading Style Sheets의 약자로, "Cascading(계단식)"이라는 이름처럼

스타일이 여러 규칙에 따라 적용됩니다. CSS에서 스타일이 어떤 순서로 적용되는지

(우선순위)와, 부모 요소의 스타일이 자식 요소로 어떻게 전달되는지(상속)에 대해

배워보습니다.

 

1.CSS 상속(inheritance) 이해하기

CSS에서 상속이란 부모 요소에 적용된 스타일이 자식요소로 자동으로

전달되는 것을 말합니다. 하지만 모든  CSS속성이 상속되는 건 아닙니다.

상속되는 속성과 상속되지 않는 속성을 구분하는게 중요합니다.

 

(1) 상속되는 속성

일부 CSS 속성은 기본적으로 자식 요소로 상속됩니다. 예를 들어:

- color: 텍스트 색상

- font-family, font-size: 글꼴 관련 속성

- text-align, line-height: 텍스트 정렬 및 줄 간격

 

|실습 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    div {
      color: #2E8B57; /* 시그린 색상 */
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div>
    부모 div
    <p>자식 p 태그</p>
  </div>
</body>
</html>

 

(2) 상속되지 않는 속성

반면, 일부 속성은 상속되지 않습니다.

- border, margin, padding :  테투리 , 여백 관련 속성

- width, height : 크기 관련 속성

- background-color: 배경 색상

 

| 실습 예제 2

 

상속되지 않는 속성 확인

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    div {
      border: 2px solid #FF4500; /* 오렌지 레드 색상 */
      background-color: #FFD700; /* 골드 색상 */
    }
  </style>
</head>
<body>
  <div>
    부모 div
    <p>자식 p 태그</p>
  </div>
</body>
</html>

 

(3) 상속 강재하기 : inherit 키워드

상속되지 않는 속성을 강제로 상속받고 싶을 때는 inherit 키워드를 사용할 

수 있습니다.

 

| 실습 예제 

 

inherit 사용

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    div {
      border: 2px solid #4682B4; /* 스틸 블루 색상 */
    }
    p {
      border: inherit; /* 부모의 border 속성을 상속 */
    }
  </style>
</head>
<body>
  <div>
    부모 div
    <p>자식 p 태그</p>
  </div>
</body>
</html>

 

설명 : border는 원래 상속되지 않지만, p 태그에서 border: inherit;를 사용해

부모 div 의 태그도 스틸 블루 색상의  테투리를 가지게 됩니다.

 

2. CSS 우선순위(Cascading) 이해하기 

CSS에서 우선순위는 여러 스타일이 같은 요소에 적용될 때, 어떤 스타일이 최종적으로

반영될지를 결정하는 규칙입니다. 이를 Cascading Order(계단식 순서)라고 부릅니다.

 

(1) 우선순위 규칙

 

CSS 우선순위는 다음과 같은 순서롤 결정됩니다.

1. !important: 가장 높은 우선순위를 가집니다.

2. 인라인 스타일(lnline Style): HTML 태그 안에 직접 작성된 style속성.

3. id 선택자 : #id로 지정된 스타일

4.  class 선택자 : .class로 지정된 스타일.

5. 태그 선택자 : div, p같은 태그 이름으로 지정된 스타일.

 

간단한 규칙: important > 인라인 스타일 > id > class > 태그

 

|  실습 예제 4

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <style>
    p {
      color: #808080; /* 그레이 색상 (태그 선택자) */
    }
    .highlight {
      color: #32CD32; /* 라임 그린 색상 (class 선택자) */
    }
    #special {
      color: #FF4500; /* 오렌지 레드 색상 (id 선택자) */
    }
    p[style] {
      color: #4682B4 !important; /* 스틸 블루 색상 (!important) */
    }
  </style>
</head>
<body>
  <p id="special" class="highlight" style="color: #FFD700;">텍스트</p> <!-- 골드 색상 (인라인 스타일) -->
</body>
</html>

 

결과 분석: 

- 태그 선택자(p) : 그레이 색상 -> 우선순위가 가장 낮음.

- class 선택자(.highlight): 라임 그린 색상 -> 태그보다 높음.

- id 선택자(#special): 오렌지 레드 색상 -> 태그보다 높음.

- 인라인 스타일(style): 골드 색상 -> id보다 높음.

- !important: 스틸 블루 색상 -> 가장 높음.

 

| 정리

CSS에서 상속은 부모 요소의 스타일이 자식 요소로 전달되는 규칙이고,

우선순위는 !important > 인라인 스타일 > id > class > 태그 순으로 결정됩니다.

728x90