CSS - Cascading

Cascading의 뜻

   -  Css는 Cascadin Style Sheet의 줄임말. 

   - Cascading이란 "위에서 아래로 흐르는", "상속 또는 종속하다"의 의미.

   -  스타일 적용 우선 순위에 따라 스타일이 적용되는 규칙

   -  모든 스타일 규칙들은 Cascading의 단계적인규칙에 따라 요소에 적용한다

---

 

1. 스타일 우선순위

   - 스타일 요소는 각각 우선순위를 가지고 우선순위가 가장 높은 스타일이 적용.

 

스타일 우선순위의 3가지 요소 

 1-1. 중요도와 출처

• - !important로 선언된 모든 규칙을 우선시한다.
• - 출처는 제작자 (개발자가 작성한 css) / 사용자 (웹페이지를 방문한 일반 사용자가 작성한 css) / 사용자 에이전트 (user-Agent 일반 사용자의 환경, 브라우저에 내장된 css) 로 구분한다
• 우선순위
  1. 사용자의 !important 스타일
  2. 제작자의 !important 스타일
  3. 제작자 스타일
  4. 사용자 스타일
  5. 사용자 에이전트 스타일

1-2. 구체성 (명시도)

• CSS에서는 선택자의 종류나 개수의 따라 명시도(Specificity)를 가진다.
  
  
• 한 요소의 스타일 선택자가 여러 개 라면 명시도가 높은 선택자의 스타일이 적용된다.
  
  
• 명시도가 같으면 더 나중에 작성된 선택자의 스타일이 적용된다. 
  
  
• 우선순위
  1. 속성 값 뒤에 !important를 붙인 속성
  2. html에서 style을 직접 지정한 속성
  3. id선택자로 지정한 속성
  4. class선택자 / 속성 선택자 / 의사 클래스 선택자
  5. 태그 이름으로 지정한 속성
  6. 부모 요소에 의해 상속된 속성
  
  
• 구체성은 숫자로 비교할 수 있고 윗쪽에 있는 숫자일수록, 숫자가 클수록 높은 구체성을 갖는다. 
  -https://specificity.keegan.st/ (명시도 비교 사이트)

1-3. 코드순서

• 가장 마지막에 등장한 속성을 최우선으로 적용

<h1>Cascading</h1>
  <style>
    h1 {
        color: red;
    }

    h1 {
        color: blue;
    }
  </style>
  
  -> blue 컬러 적용

---

2. 스타일 상속

   - 태그들이 어떻게 포함되었는지에 따라서 스타일을 적용할지 결정하는 요소

   - 바깥쪽 태그가 부모요소, 내부 태그가 자식요소

 

<div>   //부모태그
    <div> //자식태그
    <div>
</div>

 

   - 부모요의 스타일을 자식요소가 따라간다.