[코드잇 스프린트] 1주차 위클리 페이퍼

 

 

 

 

1주차에는 HTML/CSS에 대한 전반적인 내용을 배웠다.

각 주차가 끝나고 과제가 주어지는데 이번 주차는 CSS의 Cascading에 설명하라는 과제를 받았다.

 

 

 

Cascading

---

우선 Cascade는 '종속'이라는 의미이다.

사전적인 의미는 이렇지만 "위에서 아래로 내려오는 또는 단계적인"의 의미를 내포하고 있다.

 

따라서 CSS(Cascading StyleSheet)에서 쓰이는 cascading이란 여러 CSS 규칙이 적용될 때 순서에 따라 합쳐지는 것이다. 

 

그럼 이때 합쳐지는 순서는 어떻게 정해질까?

 

 

 

Cascade 순서

---

여러가지 기준이 있지만 가장 핵심적인 3가지에 대해 알아보자.

 

1. 스타일시트의 종류

크롬 개발자도구(F12)를 보면 브라우저에 기본 CSS가 있다.

이걸 user agent stylesheet라고 하는데 style.css보다 우선 순위가 낮다.

 

따라서 user agent stylesheet(브라우저 기본 스타일)을 우리가 덮어 쓸 수 있다.

 

추가로, HTML에 직접 스타일을 작성하는 것을 인라인 스타일 이라고 하는데 인라인 스타일은 캐스케이드에서 가장 우선순위가 높다.

 

2. 코드상의 순서

똑같은 선택자를 쓰는 경우 나중에 쓸 수록 우선순위가 높다.

.description {
  color: #b1b1b1;
}

.description {
  color: #abcabc;
}

 

위와 같이 작성할 경우 .description의 color는 #abcabc로 적용된다.

 

 

3. 선택자의 명시도

.description {
  color: #b1b1b1;
}

.delay.description {
  color: #abcabc;
}

 

위 코드를 작성하고 개발자 도구를 열어보면 .description보다.delay.description가 우선순위가 높게 표시된다.

이유는 선택자의 명시도가 높아서인데, 선택자가 복잡할 수록 명시도가 높아서 우선적으로 캐스케이드한다.