css 스타일이 적용되는 규칙 CSS cascading

 

cascading은 CSS의 스타일 규칙들이 적용되는 단계적인 규칙을 뜻한다.

폭포처럼 단계적으로 적용되는 규칙에 대해 알아보자.

 

cascading 규칙은 3가지이다.

1. 중요도와 출처 2. 구체성 3. 선언 순서

 

1. 중요도와 출처

중요도는 !important의 선언 여부로 판단된다.

div { width: 100px !important; }

가장 먼저 이 중요도를 체크하고, !important가 선언된 스타일끼리는 출처, 구체성, 선언 순서의 순서로 규칙을 체크하여 적용된다.

출처는 제작자, 사용자, 사용자 에이전트로 구분된다.

제작자는 사이트를 제작한 개발자가 직접 작성한 CSS,

사용자는 웹 페이지를 방문하는 사용자들이 작성한 CSS,

사용자 에이전트는 일반 사용자의 브라우저에 내장된 CSS를 의미한다.

제작자의 스타일 규칙이 가장 우선시되며, 그다음은 사용자 에이전트 스타일 규칙이다.

사용자 스타일 규칙은 브라우저에서 지원하지 않는 추세이다.

 

2. 구체성

그 다음으로 구체성이 높은 규칙들이 우선시 되는데, 구체성이란 해당 요소에 대한 스타일이 얼마나 명시적으로 선언되었냐를 나타내는 값이다.

구체성을 계산하는 방법은 다음과 같다.

먼저, 구체성은 4가지 숫자 값으로 이루어져 있다. 0,0,0,0

왼쪽부터 오른쪽 순으로, 왼쪽의 숫자가 높을수록 높은 구체성을 갖는다.

 

• 0,0,0,1: 요소들, 가상 요소

h1 {...} /* 0,0,0,1 */
body h1 {...} /* 0,0,0,2 */

 

• 0,0,1,0: class 속성값, 기타 속성, 가상 클래스

.test-class {...} /* 0,0,1,0 */
*.test-class {...} /* 0,0,1,0 */
p.test-class span.test-class {...} /* 0,0,2,2 */

 

• 0,1,0,0: id 속성값

#test-id {...} /* 0,1,0,0 */
div#test-id {...} /* 0,1,0,1 */

 

• 1,0,0,0: 인라인 스타일 

<div style="width:100px;"></div>

 

전체 선택자는 0,0,0,0의 구체성을 가지며, >, + 같은 조합자는 구체성에 영향을 주지 않는다.

 

+) 스타일 속성은 부모의 속성이 상속이 되는데, 상속된 속성은 아무런 구체성을 가지지 못한다.

* {color: red;}
h1#page {color: gray;}

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

전체 선택자는 구체성이 0,0,0,0이고, h1#page는 0,1,0,1이지만 em 태그에 적용되는 color는 red이다. em의 부모 속성인 h1에 적용되는 h1#page 스타일은 em에게 상속되지만, 상속된 속성은 아무런 구체성이 없으므로, 구체성이 0,0,0,0인 전체선택자 * {color: red}가 적용된 것이다.

 

 

3. 선언 순서

선언 순서는 말 그대로 선언 순서에 따라 스타일이 적용된다.

중요도, 출처, 구체성까지 같을 땐 더 아래 선언된 스타일이 적용된다.

 

 

 

 

스타일 적용 규칙을 이용해, 원하는 스타일이 잘 적용될 수 있도록 스타일을 만들자.

 

출처)

edwith 부스트코스 웹UI개발 - 캐스케이딩, 구체성, 상속