[css] 스타일 적용 우선 순위, Cascading

이 글을 부스트코스 강의를 기반으로 작성하였습니다.

cascading

cascading은 css 스타일 적용 우선 순위에 따라 스타일이 적용되는 규칙을 말한다.

cascading에는 다음과 같이 3가지 규칙이 있다.

1. 중요도(!important)와 출처

   1) 사용자 !important 스타일

   2) 제작자(개발자) !important 스타일

   3) 제작자(개발자) 스타일

   4) 사용자 스타일

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

   위에서 아래 순서로 스타일이 우선 적용된다.

   (사용자 스타일은 잘 사용되지 않으므로 무시해도 무방)

2. 구체성

3. 선언 순서

구체성

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

0, 0, 0, 0

구체성은 4개의 숫자 값으로 이루어져 있다.

값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖는다.

구체성은 아래의 규칙대로 계산된다.

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

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

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

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

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

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

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다. 최대한 사용을 지양하자.

속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 사용한다

예시

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 */

/* 인라인 스타일 */
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

/* important */
p#page { color: red !important; }

구체성으로 본 우선순위

CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데,
CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있다.

우선순위는 아래와 같다.

1. 속성 값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.

상속

h1 { color: gray; }

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

위 코드에서 <em>은 부모인 <h1>의 color: gray를 상속받는다.

단, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다.

상속된 속성은 아무런 구체성을 가지지 않는다.