CSS의 상속과 우선순위

CSS를 사용하다 보면 같은 요소에 여러 스타일이 적용될 때가 있습니다. 이때 어떤 스타일이 적용될지 결정하는 것이 CSS의 상속과 우선순위입니다. 이번 글에서는 CSS의 상속과 우선순위에 대해 알아보겠습니다.

 

• 상속(Inheritance): CSS에서는 부모 요소에 적용된 스타일이 자식 요소에 자동으로 적용되는 경우가 있습니다.
  • 예를 들어, 부모 요소에 color 속성을 설정하면 자식 요소들도 그 색상을 상속받습니다.

    div {
      color: blue;
    }
    

     

    <div>
      이 텍스트는 파란색입니다.
      <p>이 텍스트도 파란색입니다.</p>
    </div>
    

• 우선순위(Specificity): 여러 스타일 규칙이 같은 요소에 적용될 때, 어떤 규칙이 우선되는지를 결정하는 것이 우선순위입니다.
  • 우선순위 계산 방법:
    1. 인라인 스타일: 가장 높은 우선순위를 가집니다.
    2. 아이디 선택자: 그 다음으로 높은 우선순위를 가집니다.
    3. 클래스, 속성 선택자: 그 다음 우선순위를 가집니다.
    4. 태그 선택자: 가장 낮은 우선순위를 가집니다.
  • 우선순위 예시:

    p {
      color: green; /* 우선순위 1 */
    }
    .my-class {
      color: blue; /* 우선순위 2 */
    }
    #my-id {
      color: red; /* 우선순위 3 */
    }
    

     

    <p id="my-id" class="my-class">이 텍스트는 빨간색입니다.</p>
    

결론

CSS의 상속과 우선순위를 이해하면 스타일 적용이 더 명확해지고, 원하는 디자인을 더 쉽게 구현할 수 있습니다. 다음 글에서는 CSS 박스 모델(Box Model)에 대해 알아보겠습니다.