CSS: 3 구체성, 상속, 캐스케이딩

 

 

구체성(Specificity)

---

구체성: 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것

 

구체성의 값은 네개로 이루어짐.

제일 좌측에 있는 값이 클수록 높은 구체성을 갖는다.

 

0, 0, 0, 0

• 1, 0, 0, 0 : inline 스타일
• 0, 1, 0, 0: 선택자에 있는 모든 id 속성값
• 0, 0, 1, 0: 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
• 0, 0, 0, 1: 선택자에 있는 모든 요소, 가상 요소
• 전체 선택자(*)는 0, 0, 0, 0을 갖는다
• 조합자는 구체성에 영향을 주지 않는다.(>,+)

 

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

 

 

인라인 스타일(1,0,0,0)

 

규칙들 중 제일 높은 구체성을 가짐

p#page { color: red; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p> /*inline*/

위 실행 결과 blue로 나옴

 

 

!IMPORTANT

 

모든 구체성을 무시하고 우선권을 가짐

p#page { color: red !important; }
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

important 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씀.

 

위 실행결과 red 적용 

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

 

 

 

 

상속(Inheritance)

---

 

CSS

h1 { color: gray; }

HTML

<h1>Hello, <em>CSS</em></h1>

위 코드 실행결과 Hello, CSS 모두  gray로 나타 남

=> <em>이 부모 <h1>의 속성을  상속 받음

 

모든 속성이 상속되는 건 아님.

 

❗️: [ margin, padding, background, border ]  박스 모델 속성들은 상속되지 않음

 

상속되는 것들:color, font-family, font-size, font-weight, text-align, cursor 등

안 되는 것: background-color, background-image, background-repeat, border, display 등

 

https://www.w3.org/TR/CSS21/propidx.html

 

 

상속된 값의 구체성

 

CSS

* { color: red; }/*0,0,0,0*/
h1#page { color: gray; }/*0,1,0,1*/

HTML

<h1 id="page">Hello, <em>CSS</em></h1>

실행결과 Hello, CSS 

이유: 상속은 아무런 구체성을 가지지 않음.

(0,0,0,0보다 먼저 우선권을 가지지 않는다.)

 

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

 

 

상속 여부 설정

 

p{
    color: initial;
    font-size: inherit;
    border: initial;
    width: unset;
}

• inherit: 상위요소로부터 값을 물려받겠다는 뜻
• inital: 기본값(초깃값)을 사용하겠다는 의미
• unset: 상위요소로부터 물려받을 수 있으면 물려받고, 그럴 수 없으면 기본값을 사용

위와같은 설정이외에 자식요소가 속성이 없을 경우 그대로 부모요소 적용이 되는데

자식요소 속성이 있으면 본인속성을 적용한다.

 

 

캐스케이딩(cascade)

---

구체성이 같은 두 규칙이 동일한 요소에 적용된다면?

 

CSS(선언순서)

h1 { color: red; }
h1 { color: blue; }

위 코드 실행결과 => blue로 적용 됨

 

 

캐스케이드 규칙

• 중요도(Important)&출처
• 구체성
• 선언순서

 

 

중요도&출처

• 기본적으로 !important로 선언된 모든 규칙은 그렇지 않은 규칙보다 우선한다.
• 출처는 제작자, 사용자, 사용자 에이전트(Uset Agent)로 구분한다.

 

 

우선순위(CSS)의 출처

 

5. 사용자 에이전트 스타일(브라우저 제공 CSS)

4. 사용자 스타일

3. 제작자 스타일

2. !important 제작자

1. !important 사용자

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

 

 

 

Reference

---

 

https://www.boostcourse.org/cs120/lecture/92868?isDesc=false 

비전공자를 위한 HTML/CSS

 

https://www.inflearn.com/course/%EC%9E%85%EB%AC%B8%EC%9E%90-css-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%9D%98/lecture/82032?tab=curriculum 

입문자를 위한 CSS 기초 강의 - 인프런 | 학습 페이지