🙈[CSS] 캐스캐이딩 ( cascading )🐵

2018. 4. 8. 12:03

1. 캐스 캐이딩 ( Cascading )

HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 합니다.

이를 캐스캐이딩 이라고 하는데, CSS의 정식 명칭은 Cascading Style Sheets인 만큼 캐스캐이딩이 중요하다는 것을 알 수 있습니다.

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

이제 위의 각 항목 내에서 우선순위를 살펴보겠습니다.

2. 중요도

예를 들어, <head> 요소내에 있는 <style>이 <link>로 된 CSS 파일보다 우선순위가 높습니다.

3. 명시도

!important는 거의 우선순위 끝판왕이지만, 그렇다고 남용하는 것은 좋지 않습니다.

inline은 높은 우선순위를 갖지만, inline으로 스타일을 주지 말고, <style>이나 외부 CSS 파일로 빼는 것이 좋습니다.

4. 코드 순서

늦게 선언된 스타일이 우선 적용됩니다.

<style>
  p {
    color: red;
  }
  p {
    color:blue;
  }
</style>


<div>
  <p>Hello</p>
</div>

위와 같은 HTML이 있을 때 Hello의 글자 색은 blue입니다.

5. Specificity Calculator

HTML 요소에 같은 스타일이 적용된다면 캐스캐이딩에 의해 어떤 스타일이 적용될지 결정됩니다.

그리고 위에서 살펴본 "코드순서"에 따르면 아래의 <p> 태그의 글자 색은 어떤 색이 될까요?

<style>
  div p {
    color: red;
  }
  p {
    color:blue;
  }
</style>


<div>
  <p>Hello</p>
</div>

코드 순서에 따르면 p가 나중에 적용되었으므로 파란색이 되어야 할 것입니다.

그러나 결과는 빨간색입니다.

왜 그럴까요?

이와 관련된 개념은 Specificity Calculator 입니다.

즉, 어떤 스타일이 적용이 될지 일종의 점수를 매기는 것인데요,

1번의 경우 <div> , <p> 두 요소에 대하여 스타일이 적용되어야 하므로 2점

2번의 경우에는 <p> 요소에 대해서만 스타일이 적용되므로 1점입니다.

이런 식으로 일종의 점수를 매기는 방법인데, 선택자에 대하여 대충 점수를 아래와 같이 생각하면 좋을 것 같습니다.

정확한 점수는 아니고 그냥 저 임의대로 부여한 값입니다.

( Tag , 가상 요소 = 1점 ) < ( Class , 가상 클래스 = 10점 ) < ( ID = 100점 ) < ( inline = 1000점 )

이렇게 생각할 수 있는 근거는 이 사이트( 링크 )에 있습니다.

위 링크를 클릭하셔서 사이트에 접속해보시면 위와 같이 선택자들을 입력할 수 있고, 선택자에 따른 점수(?) 같은 것을 보여주고 있습니다.

원하는대로 CSS 스타일이 적용이 안될 때 우선순위를 고려해야 한다면, 위 사이트에서 점수를 매겨보는 것도 좋을 것 같습니다.

이상으로 캐스캐이딩에 대해 알아보았습니다.

스타일의 우선순위를 결정하는 항목에는 3가지가 있고, 또 이를 점수화 하는 Specificity Calculator가 있다는 것을 알아보았습니다.

[CSS] Flex (2) - 레이아웃 ( Holy Grail Layout ) (0)	2018.04.08
[CSS] Flex (1) - 개념 (0)	2018.04.07
[CSS] float(2) - 레이아웃 ( Holy Grail Layout ) (1)	2018.04.04
[CSS] float(1) - 개념 (0)	2018.04.04
[CSS] 포지션( Position ) 개념 (0)	2018.04.04
[CSS 활용] 로그인 form 예제 (0)	2018.04.04
[CSS 활용] 상단 탭( TAB ) 예제 (0)	2018.04.04

✌ victolee