CSS Cascading

CSS Cascading

출처 : [CSS] Cascading

!https://static.velog.io/favicons/favicon-16x16.png

Cascading(이하 캐스케이딩)은 폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어입니다. 그리고 이 캐스케이딩은 CSS에서 가장 중요한 스타일 적용 규칙이기도 합니다.

캐스케이딩은 다음과 같은 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정합니다.

1. 스타일 우선순위
2. 스타일 상속

스타일 우선순위

스타일 우선순위는 다음 3가지 요소를 통해 우선순위를 결정합니다.

1. 중요도
2. 명시도
3. 코드 순서

중요도는 스타일이 선언된 위치(사람)에 따라서 우선순위를 매기는 것입니다. 스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉩니다. 이 중에서 가장 중요도가 높은 것은 작성자의 CSS파일입니다. 각 스타일 시트의 우선순위를 나누면 다음과 같은 순서로 적용됩니다.

작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트

중요도를 끌어올리는 방법

!important키워드를 사용하면 된다. 이 키워드를 붙이면 중요도가 최우선으로 끌어올려진다.

셀렉터 {
  속성: 속성값!important;
}

!important 작성자 스타일 시트 > !important 사용자 스타일 시트

작성자 스타일 시트 > 사용자 스타일 시트 > 사용자 도구 스타일 시트

/* 예시 1 */

h2 {
    background-color: red;
}

h2 {
    background-color: blue;
}

/* 예시 2 */
h2 {
    background-color: red!important;
}

h2 {
    background-color: blue;
}

예시 1번 코드의 경우 배경색이 파란색으로 지정이된다.

하지만 !important를 사용하게 될 경우 중요도가 바뀌게되어 배경색은 빨간색으로 지정이된다.

명시도 Specificity

우선순위를 결정하는 두 번째 요소는 명시도입니다. 명시도는 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미합니다.

명시도에 따른 우선순위

인라인 > id > class > 태그

• 인라인은 하나의 태그 내에서만 적용되므로 높은 우선순위를 갖습니다.
• id는 문서 내에서 한 번만 등장하므로 비교적 좁은 범위를 가지게됩니다.
• class는 여러번 쓰일 수 있기에 id보다는 넒은 범위를 갖습니다.
• 태그는 문서 내 모든 태그를 가리키므로 범위가 제일 넒습니다.

예시

  <h2>태그 셀렉터</h2>
  <h2 class='cls'>클래스 셀렉터</h2>
  <h2 id='i' class='cls'>아이디 셀렉터</h2>
  <h2 class='cls' style='background-color: green'>인라인 셀렉터</h2>

h2 {
    background-color: red;
}

.cls {
    background-color: blue;
}

#i {
    background-color: violet;
}

태그 셀렉터를 통해 h2에 속성을 적용시켜놨는데, 우선순위에따라서 속성이 바뀌는 걸 볼 수 있다.

코드 순서 Source Order

코드 순서는 코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다는 것 입니다.

h2 {
    color: red;
}

h2 {
    color: green;
}

color 는 마지막에 등장한 속성인 초록색으로 적용이 된다.