Cascading란 무엇일까

오늘은 취업 동아리에서 후배가 질문하는 것을 우연히 들었는데

 

이 부분은 왜 스타일이 적용되지 않는 걸까요?

라는 질문을 하는 것을 보고 더 자세한 이유가 궁금해져 Cascading에 대해서 이렇게 글을 쓰게 되었습니다

---

Cascading이란?

CSS의 약자는 Cascading Style Sheets입니다

오늘은 제일 앞에 있는 Cascading에 대해서 알아보려 하는데 뜻은 스타일 규칙이 계단식으로 적용되는 방식을 말합니다

 

일반적으로 여러 개의스타일이 한 html 요소에 적용될 수 있는데, 이 때 어떤 스타일을 우선으로 할지 결정해야 합니다

이게 바로 Cascading에 개념인데 규칙이 구체적일수록 우선순위가 높아진다고 합니다

---

Origin, Context

먼저 origin에 대해서 알아볼 것인데 출처라는 뜻으로 이 출처에 따라서 우선순위가 달라질 수 있습니다

• 브라우저 기본 스타일: 가장 낮은 우선순위를 가집니다
• 사용자 정의 스타일 
• 작성자 스타일

그 다음은 context인데 상황이나 상속을 의미합니다

• 몇몇 스타일을 부모에게 상속 받습니다
• 직접 스타일링 한 것 보다는 낮은 우선순위를 갖습니다
• 모든 스타일이 상속되는 것은 아닙니다

---

Cascading의 3가지 원칙

계단식 이라는 이름처럼 3가지 원칙을 따릅니다

중요도

!important가 선언된 스타일은 다른 모든 스타일보다 가장 높은 우선순위를 가지게 됩니다

div {
  color: red !important;
}

div {
  color: blue;
}

이렇게 된 코드가 있다면 !important가 붙은 red가 적용됩니다

명시성

선택자의 정확도에 따라서 우선순위가 결정됩니다

점수가 높을수록 우선순위가 높아집니다 점수는 이렇게 됩니다

 

• 인라인 스타일: 1000점
• ID 선택자: 100점
• 클래스, 속성, 가상 클래스: 10점
• 태그, 가상 요소: 1점

인라인 스타일, ID 선택자, (클래스, 속성 선택자, 가상 클래스), (태그, 가상 요소) 순서대로 우선순위를 가지고 있습니다

p {
  color: blue;
}

.이상혁 {
  color: green;
}

#배경진 {
  color: red;
}

결과 #배경진이 명시성이 제일 높기 때문에 빨강색이 됩니다

소스 순서

위의 모든 조건이 같은 경우에 나중에 작성된 css가 적용된다고 합니다

div {
  color: blue;
}

div {
  color: green;
}

결과 green이 적용됩니다

---

글을 마치며

오늘은 이렇게 Cascading에 대해서 알아보았는데 예전엔 모호하게 알고 있었다면 지금은 좀 더 개념이 정확해진거 같습니다

글을 읽어주셔서 감사합니다