CSS에서의 상속과 우선순위 이해하기

이번 포스팅에서는 CSS에서 스타일이 어떻게 상속되고 우선순위가 결정되는지에 대해 알아보겠습니다.

1. 상속(Inheritance)
상속은 부모 요소에서 자식 요소로 스타일이 전달되는 과정을 말합니다. 모든 속성이 상속되는 것은 아니며, 각 속성마다 상속 여부가 정의되어 있습니다. 일반적으로 텍스트 관련 속성(예: font-family, color, font-size)은 상속됩니다.

.parent {
  font-family: 'Arial', sans-serif;
  color: blue;
}

.child {
  /* font-family은 상속됨 */
}

.another-child {
  /* color는 상속됨 */
}

 

2. 우선순위(Priority)
스타일 우선순위는 여러 규칙이 충돌할 때 어떤 규칙이 적용되는지를 결정합니다. 아래는 일반적인 스타일 우선순위입니다.

• 인라인 스타일(Inline Styles): HTML 요소에 직접 적용된 스타일로 가장 높은 우선순위를 가집니다.
• 아이디(ID) 선택자: 아이디 선택자는 한 페이지에 하나만 존재해야 하므로 높은 우선순위를 가집니다.
• 클래스(Class) 선택자 및 속성 선택자: 클래스와 속성 선택자는 여러 요소에 적용될 수 있으며, 아이디보다는 우선순위가 낮습니다.
• 요소(태그) 선택자: 요소 선택자는 가장 낮은 우선순위를 가집니다.

/* 아이디 선택자 */
#uniqueId {
  color: red; /* 우선순위: 100 */
}

/* 클래스 선택자 */
.someClass {
  color: blue; /* 우선순위: 10 */
}

/* 요소 선택자 */
p {
  color: green; /* 우선순위: 1 */
}

 

3. !important 규칙
!important 규칙은 스타일을 강제로 우선시하는데 사용됩니다. 그러나 남용하면 유지보수가 어려워질 수 있으므로 주의해서 사용해야 합니다.

.priority {
  color: purple !important;
}

 

4. 속성값 중요도
속성값 중요도는 속성 값에 따라 우선순위가 결정됩니다. 값이 지정되지 않았거나 상속된 경우보다 직접 지정된 값이 더 높은 중요도를 가집니다.

.priority {
  color: orange; /* 중요도: 0 (일반 값) */
}

.priority {
  color: orange !important; /* 중요도: 1 (important 적용) */
}

CSS에서의 상속과 우선순위를 이해하면 원하는 디자인을 더 쉽게 구현할 수 있습니다.