CSS

캐스캐이딩(Cascading)과 상속(Inheritance)

캐스케이딩(Cascading)

캐스케이딩은 여러 CSS 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선하는지를 결정하는 과정이다. 캐스케이딩은 다음과 같은 기준에 의해 우선순위를 결정한다.

1. 명시적 중요도

  • !important를 사용하면 해당 스타일이 가장 우선시된다. 예를 들어, color: red !important;는 다른 모든 규칙보다 우선한다.

2. 선택자의 구체성

  • 선택자가 구체적일수록 우선순위가 높다. 구체성은 다음과 같이 계산된다
    • ID 선택자 (#id): 100점
    • 클래스 선택자 (.class), 속성 선택자 ([attribute]), 가상 클래스 선택자 (:hover): 10점
    • 요소 선택자 (div, p), 가상 요소 선택자 (::before): 1점

3. 선언 순서

  • 동일한 중요도와 구체성을 가지는 규칙이 여러 개 있을 경우, 나중에 선언된 규칙이 우선한다.

예시

/* 기본 스타일 */
p {
  color: blue;
}

/* 클래스 선택자 */
.highlight {
  color: red;
}

/* 중요한 스타일 */
p.special {
  color: green !important;
}
위 예시에서 p.special은 color: green이 적용된다. highlight 클래스는 color: red가 적용되며, p 요소는 기본적으로 color: blue가 적용된다.

상속(Inheritance)

상속은 부모 요소의 스타일이 자식 요소에 자동으로 적용되는 방식이다. CSS 속성 중 일부는 기본적으로 상속되며, 일부는 상속되지 않는다.

상속되는 속성

  • color, font-family, line-height 등 텍스트 관련 속성은 기본적으로 상속된다.

상속되지 않는 속성

  • margin, padding, border 등 레이아웃 관련 속성은 기본적으로 상속되지 않는다.

명시적 상속

  • inherit 키워드를 사용하여 특정 속성이 상속되도록 강제할 수 있다.
p {
  font-size: 16px;
}

span {
  font-size: inherit; /* 부모의 font-size를 상속받음 */
}

캐스케이딩과 상속의 차이점

  • 캐스케이딩: 동일한 요소에 여러 규칙이 적용될 때 우선순위를 결정하는 방식이다. 규칙의 중요도, 구체성, 선언 순서에 따라 결정된다.
  • 상속: 부모 요소의 스타일이 자식 요소에 적용되는 방식이다. 상속되는 속성과 상속되지 않는 속성이 있으며, 필요에 따라 inherit 키워드를 사용할 수 있다.
캐스케이딩과 상속은 CSS의 핵심 개념으로, 이를 이해하면 스타일 시트 작성 시 스타일 적용의 우선순위와 상속 관계를 효과적으로 관리할 수 있다. 캐스케이딩은 규칙의 우선순위를 결정하고, 상속은 부모 요소의 스타일을 자식 요소로 전달한다. 이 두 개념을 적절히 활용하면 웹 페이지의 스타일을 더욱 효율적으로 관리할 수 있다.