[CSS] 케스케이딩 스타일 시트 알아보기

 

CSS란 Cascading Style Sheet의 약어로, 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미 입니다.

CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다.

Cascading(케스케이딩)은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념 입니다.

 

스타일 우선 순위

위로 갈 수록 중요도가 더 높습니다.

1. 사용자 스타일	컴퓨터 사용자가 지정한 스타일
2. 제작자 스타일	웹 문서를 제작한 제작자의 스타일
3. 브라우저 기본 스타일	웹 브라우저가 기본으로 정해 놓은 스타일

 

중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다.

1. !important

2. 인라인 스타일

3. id 스타일

4. 클래스 스타일

5. 타입 스타일

 

스타일 시트에서 중요도와 적용 범위가 같다면 그 다음은 스타일을 정의한 소스 순서로 우선순위가 정해집니다.

소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씁니다.

<!-- 생략 -->
<style>
  p {
    color: black;
  }
  
  h1 {
    color: brown !important;
  }
  
  p {
    color: blue;
  }
</style>

...

<h1 style="color: green;">레드향</h1> // brown 적용
<p style="color: red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p> // red 적용
<p>레드향은 한라봉과 귤을 교배한 것으로</p> // blue 적용

 

 

스타일 상속

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있습니다.

이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다.

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식요소로 전달되는데, 이것을 스타일 상속 이라고 합니다.

배경색과 배경 이미지는 스타일 상속 되지 않습니다.