far

[CSS] 캐스케이딩(Cascading)과 상속 본문

HTML, CSS

[CSS] 캐스케이딩(Cascading)과 상속

Eater 2023. 3. 24. 03:44

1. CSS Cascading

HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에 여러개의 스타일이 중복 적용될 수 있다. 만약 부모 엘리먼트와 자식 엘리먼트에 각기 다른 스타일을 지정할 경우 어떻게 작동 되는걸까?

이 문제를 해결하기 위해 CSS는 어떤 스타일을 적용 받는지에 대해 우선순위를 결정하는 Cascading을 채택했다.

<div class="one">
    <p class="two">Cascade</p>
</div>

2. Cascading의 우선순위

우선순위는 다음 3가지 요소를 통해 결정된다.

  1. 중요도
  2. 명시도
  3. 코드순서

2.1. 중요도

중요도는 스타일이 선언된 위치에 따라 우선순위를 매긴다.

  1. 작성자 스타일 시트 (작성자의 CSS파일)
  2. 사용자 스타일 시트
  3. 사용자 도구 스타일 시트 (브라우저 CSS 등) 

하지만 예외적으로 CSS속성을 줄 때 !important키워드를 뒤에 붙이면 중요도를 최우선으로 끌어올릴 수 있다.

.one {
  background-color: red !important;
}

최종적으로 중요도를 정리하자면 다음과 같다.

  1. 작성자 스타일 시트 + !important
  2. 사용자 스타일 시트 + !important
  3. 작성자 스타일 시트 (작성자의 CSS파일)
  4. 사용자 스타일 시트
  5. 사용자 도구 스타일 시트 (브라우저 CSS 등) 
<body>
    <div class="one">
        <p class="two">Cascade</p>
    </div>
</body>

<style>
    .one {
        background-color: purple !important;
    }
    .two {
        background-color: black;
        color: yellow; 
    }
</style>

Cascade

2.2. 명시도

명시도는 셀렉터가 얼마나 명확하게 엘리먼트에 접근하고 있는지를 측정해 우선순위를 높게 주는 것이다. 아래의 순서대로 높은 명시도를 가진다.

  1. 인라인 스타일
  2. id
  3. class
  4. tag
<body>
    <p id='id-example' class='class-example' style='background-color: pink'>인라인</p>
    <p id='id-example' class='class-example'>아이디</p>
    <p class='class-example'>클래스</p>
    <p>태그</p>
</body>

<style>
    #id-example {
        background-color: green;
    }
    
    .class-example {
        background-color: red;
    }
    
    p {
        background-color: aqua;
    }
</style>

인라인

아이디

클래스

태그

2.3. 코드 순서

마지막에 나온 스타일이 최우선적으로 적용된다.

<body>
    <p>코드 순서</p>
</body>

<style>
    p {
        background-color: black;
    }
    
    p {
        background-color: lavender;
    }
</style>

코드 순서

3. 스타일 상속

부모 엘리먼트에 설정한 스타일을 자식 엘리먼트가 적용받는 경우를 스타일 상속이라고 한다.

<div style='background-color: bisque;'>
    부모 엘리먼트
    <p>자식 엘리먼트</p>
</div>

부모 엘리먼트

자식 엘리먼트

 

'HTML, CSS' 카테고리의 다른 글

[UI] 레이아웃 시프트(Layout Shift)에 대해서  (0) 2024.08.19
[CSS] pre태그 텍스트 영역 초과 현상 해결하기  (0) 2023.04.06
[CSS] 다크 모드 적용하기  (0) 2023.04.05
[TailwindCSS] Tailwind의 커스터마이징  (0) 2023.03.17
[HTML] 시맨틱 태그와 사용하는 이유  (0) 2023.03.13
'HTML, CSS' Related Articles more
Comments