코딩/CSS

CSS의 상속과 우선순위

tomsdaily 2024. 6. 25. 22:42
반응형

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)에 대해 알아보겠습니다.

 
반응형
댓글수0