[HTML+CSS][CSS 기초] 03 - 캐스케이딩 스타일 시트 (CSS)

 

[HTML+CSS][CSS 기초] 02 - 주요 선택자

 

우리가 지금 배우고 있는 CSS에서 

C의 약자인 캐스케이딩에 대해서

이해해보는 시간을 가져보도록 하자

 

 

---

 

 

CSS에서 'C'는 캐스케이딩의 약자로

'위에서 아래로 흐르는 스타일시트'

라는 뜻이다.

 

캐스케이딩은 선택자에 적용된 많은 스타일 중에 

어떤 스타일을 나타낼지를 결정한다는 뜻이다.

 

이때 캐스케이딩에서 두 가지 원칙을 살펴보고 확인해보도록 하자.

 

 

---

 

 

스타일 우선순위

 

캐스케이딩에서 가장 중요하며

어떤 스타일을 먼저 적용할 것인지를 결정하는 순서라고 보면 된다.

 

 

스타일 우선순위는 총 3개의 개념으로 나뉘는데

얼마나 중요한지(Importance),

적용 범위가 어디까지 인지(Specificity),

소스에서의 순서 (Source Order)

에 따라서 결정된다.

 

 

- 얼마나 중요한가? (Importance) -

스타일이 어디서 선언되었는가에 따라 달라진다.

 

① 사용자 스타일 시트

저 시력자나 색 약자 등과 같이 특별한 조건이 필요한 사용자가

그들에 맞게 구성해 놓은 스타일 시트

 

② 제작자가 만든 스타일 중 '!important'가 붙은 스타일

사이트를 제작하면서 만든 스타일 시트로

'!important'가 붙은 중요 스타일은 다른 어떤 스타일보다 우선한다.

 

③ 제작자가 만든 일반 스타일

사이트를 제작하면서 만든 스타일

 

④ 기본적인 브라우저 스타일 시트

브라우저들마다 기본적으로 지정하고 있는 스타일

 

 

 

 

- 적용 범위가 어디까지 인가? (Specificity) -

필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다.

 

① 인라인 스타일

태그 안에 style속성을 사용해

해당 태그에만 스타일 적용

 

② id 스타일

지정한 부분에만 적용되는 스타일이지만 한 문서 안에 한 번만 적용

 

③ 클래스 스타일

웹 문서에서 지정한 부분에만 적용되는 스타일

 

④ 태그 스타일

웹 문서에 사용된 특정 태그에 똑같이 적용되는 스타일

 

 

- 소스에서의 순서 (Source Order) -

소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

 

 

---

 

 

스타일 상속

 

자식 요소에서 별도로 스타일을 지정하지 않으면

부모 요소에 있는 스타일 속성들이 자식 요소로 전달되는 것이다.

 

단, 부모 요소에 배경 이미지나 배경색 같은 경우에는 자식 요소에 상속되지 않는다.

 

 

---

 

 

우선시하는 스타일에 대해 암기하고

나중에 두 번 일 하지 않도록 잘 사용해야겠다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※