1. HTML&CSS의 기초 (4) CSS 이해하기_3
4. 구체성(명시도)
- 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에
구체성
을 부여하고 판단하여 우선으로 적용할 것을 선택한다.
만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면??
h1 { color: red; }
body h1 { color: green; }
구체성
을 부여하고 판단하여 우선으로 적용할 것을 선택한다.만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면??
h1 { color: red; }
body h1 { color: green; }
두 규칙은 모두
<h1>
을 선택하는데 두 규칙이 지정하는 스타일은 다르다.
어떻게 표현될지 궁금해지는데,
이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다.
0, 0, 0, 0
위와 같이 구체성은 4개의 숫자 값으로 이루어져 있다.
- 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
- 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
- 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
- 전체 선택자는 0, 0, 0, 0을 가진다.
- 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
- !important는 모든 구체성을 무시. 이게 먼저다.
중요도
!important > inline > id > class > 선택자 > 전체선택자, 조합자(+, >) 영향 x
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 */
5. 상속
- 부모가 자식에서 상속한다는 말처럼
어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것
을 말한다.
- 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다.
margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다!
* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>
em에는
어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것
을 말한다.margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다!
* { color: red; }
h1#page { color: gray; }
<h1 id="page">Hello, <em>CSS</em></h1>
color:red (O)
color:gray (X)
=> 상속된 속성은 아무런 구체성을 가지지 못하기 때문이다!
6. 캐스케이딩(cascading)
- 스타일 규칙들이
어떠한 기준으로
요소에 적용되는지를 정한 규칙이다.
만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면??
1) cascading 규칙
- 중요도(!important)와 출처
- 구체성
- 선언 순서
- 모든 스타일은 아래의 규칙에 따라 단계적으로 적용된다.
- 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
- 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
- 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
- 스타일 규칙들을 출처에 따라 분류합니다.
- 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
- 스타일 규칙들을 구체성에 따라 분류합니다.
- 구체성이 높은 규칙들이 우선합니다.
- 스타일 규칙들을 선언 순서에 따라 분류합니다.
- 뒤에 선언된 규칙일수록 우선합니다.
<p id="bright">Hello, CSS</p>
p#bright { color: silver; }
p { color: red; }
어떠한 기준으로
요소에 적용되는지를 정한 규칙이다.만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면??
- 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
- 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
- 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
- 구체성이 높은 규칙들이 우선합니다.
- 뒤에 선언된 규칙일수록 우선합니다.
<p id="bright">Hello, CSS</p>
p#bright { color: silver; }
p { color: red; }
위의 경우에는 구체성에 따라 color: silver가 적용된다.
p { color: silver; }
p { color: red; }
위의 경우에는 선언 순서에 따라 color: red가 적용된다.
Author And Source
이 문제에 관하여(1. HTML&CSS의 기초 (4) CSS 이해하기_3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@imyourgenie/1.-HTMLCSS의-기초-4-CSS-이해하기3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)