웹프로그래밍 CSS(4) 구체성

📋오늘 배울 것📋

여러개의 css 규칙들이 하나의 태그를 선택할 때 어떤 규칙이 적용될까?
❓구체성에 따라 적용된다.
구체성은 선택자를 얼마나 구체적으로 선언했느냐를 수치화하는 개념으로 구체성의 값이 클 수 록 우선 적용된다.
오늘은 구체성을 자세히 알아보자

📕 구체성(명시도)

• 선택자를 얼마나 명시적으로 선언했느냐
• 태그 입장에서 어떤 규칙이 제일 명시적으로 선언했느냐(구체성)을 보고 스타일을 적용함.**

📒 구체성의 값 계산하기

0, 0, 0, 0
👉왼쪽에 있는 숫자가 클수록 높은 구체성을 가진다.

0, 1, 0, 0 : 선택자에 있는 모든 id 속성값

0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스

0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

1, 0, 0, 1 : Inline로 선언 (html의 style속성이용)

전체 선택자는 0, 0, 0, 0을 가진다.

조합자는 구체성에 영향을 주지 않는다. (>, + 등)

!important 는 가장 우선한다. 속성값 뒤에 한 칸 공백을 주고 사용한다.

p#page { color: red !important; }

✍️예시코드

1. h1 { ... } : 0,0,0,1

2. body h1 { ... } :0,0,0,2
   (👉 body h1 { ... }가 선택된다.)

3. .grape { ... } : 0,0,1,0 class의 속성값

4. *.bright { ... } : 0,0,0,1 *bright라는 요소에 의해

5. p.bright em.dark { ... }: 0,2,0,2

6. #page { ... } : 0,1,0,0

7. div#page { ... } : 0,1,0,1 : 요소와 id선택자의 조합

🔥오늘의 배운 점🔥

갑자기 어려운 내용이여서 당황했다. 쩝