css

CSS의 Cascading

인재재 2024. 5. 20. 23:08

캐스케이드 (Cascade)

폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어로, 한국어로 "종속"이라고 번역합니다.

HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야합니다. 이를 Cascading이라고 합니다.

 

 

캐스캐이딩 (cascading)은 다음 3가지에 의해 결정 됩니다.

  1. CSS가 어디에 선언되어있는지 (중요도)
  2. 대상을 명확하게 지정할수록 (명시도)
  3. 코드 순서

중요도

CSS의 선언 위치에 따라서 우선순위가 결정되는데, 

기본적으로 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 똑같은 선택자를 쓰고 있다면 우리가 작성한 코드보다 우선순위가 낮습니다. 브라우저 기본 CSS가 써져 있어도 우리가 style.css 파일에서 쓰면, 작성한 스타일시트(Author Stylesheet)의 우선순위가 더 높기에 바뀌어 적용됩니다. 정리된 순서로 표시하자면, 

    1. <head>의 <style> 
    2. <head>의 <style>내의 @import (다른 스타일 시트에서 스타일 규칙을 가져올 때)
    3. <link>로 연결된 CSS 파일
    4. <link>로 연결된 CSS 파일 내의 @import 
    5. 브라우저의 기본 CSS

크게 보자면 우선순위가

[ 프로그래머 CSS > 사용자 CSS > 브라우저 CSS ] 

이렇게 됩니다

 

명시도

선택자에 따라 우선순위가 달라지는 것입니다. 단어에 뜻에 맞게 선택자의 의미가 정확해 질수록 높은 우선순위를 갖습니다.

명시도에 따른 우선순서를 표시하자면,

  1. !important
  2. 인라인 스타일
  3. 아이디 선택자
  4. 클래스  선택자
  5. 태그 선택자
<body>
	<h1>태그 셀럭터</h1>
    <h1 class="C1">클래스 셀럭터</h1>
    <h1 id="C2">아이디 셀럭터</h1>
    <h1 style="color:green">인라인 셀럭터</h1>
</body>

 

!important를 적용시키면 우선순위가 높지만 남용하게되면 cascading을 깨트려 디버깅을 어렵게 하기에 함부로 쓰지 않는 것이 좋습니다.

* !important 적용방법 : 끌어올리고자하는 속성 뒤에 !important만 붙여주면 됨

셀렉터 {
  속성: 속성값 !important;
}

 

 

* 명시도 계산법

!important (10000) > inline-style(1000) > id(100) > class(10) > tag(1) > * (0)

 

ex)

 

하나하나 계산해보기는 어려우니

specificity calculator 를 검색하면 명시도 계산을 해주는 사이트가 많으니 참고하는 것이 좋습니다.

 

코드 순서

늦게 선언된 스타일이 최우선으로 적용되는 경우입니다.

예시로 같은 태그 선택자에 빨강, 파랑을 순서대로 적용시켰을 때, 실질적으로 적용되는 것은 나중에 적용시킨 파랑입니다.

h2 {
    background-color: red;
}

h2 {
    background-color: blue;
    /*
    * 동일 태그 스타일에서는 나중에 오는 스타일이 적용
    */
}

 

* 스타일 상속 원칙

태그들의 포함 관계로 스타일을 적용하는 원칙입니다. 바깥에 있는 태그가 부모 요소, 그 안에 포함된 태그들을 자식 요소라고 하는데, 일반적으로 부모 요소의 스타일을 자식 요소들이 받아서 갖게 됩니다. 이것을 상속이라고 하며, 부모 요소의 스타일을 자식 요소가 그대로 받는것이 스타일 상속 원칙입니다.

 

  <div style='background-color: violet;'>
      부모 요소
      <div>자식 요소</div>
  </div>
  /*
  * 배경색 violet은 부모요소 div뿐 아니라 자식요소에게도 적용이 됨 
  */