Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

캐스케이드

Andy Bell

CSS는 Cascading Stylesheets의 약자입니다. 캐스케이드는 여러 CSS 규칙이 HTML 요소에 적용되는 충돌을 해결하기 위한 알고리즘입니다. 다음 CSS로 스타일이 지정된 버튼의 텍스트가 파란색이 되는 이유입니다.

button {
  color: red;
}

button {
  color: blue;
}

캐스케이드 알고리즘을 이해하면 브라우저가 이와 같은 충돌을 해결하는 방법을 이해하는 데 도움이 됩니다. 캐스케이드 알고리즘은 4단계로 나뉩니다.

위치 및 표시 순서: CSS 규칙이 표시되는 순서
특이성: 가장 일치하는 CSS 선택자를 결정하는 알고리즘
오리진: CSS가 나타나는 순서와 출처, 브라우저 스타일인지, 브라우저 확장 프로그램의 CSS인지, 작성한 CSS인지 여부
중요도: 몇몇 CSS 규칙은 특히 !important 규칙 유형의 경우 다른 규칙보다 가중치가 더 높습니다.

등장의 위치와 순서

CSS 규칙이 표시되는 순서와 표시 방법은 충돌 해결을 계산하는 동안 캐스케이드에서 고려됩니다.

이 강의 시작 부분에 있는 데모는 위치의 가장 간단한 예입니다. 동일한 특이성의 선택자를 갖는 두 가지 규칙이 있으므로 선언된 마지막 규칙이 이깁니다.

<link> 태그, 임베드된 <style> 태그, style 속성에 정의된 인라인 CSS와 같은 HTML 페이지의 다양한 소스에서 가져올 수 있습니다.

HTML 페이지 상단에 CSS를 포함하는 <link>가 있는 경우 페이지 하단에 CSS를 포함하는 다른 <link>: 하위 <link>가 가장 구체적입니다. 임베드된 {style} 요소에서도 동일한 현상이 발생합니다. 페이지 아래쪽으로 갈수록 구체화됩니다.

버튼의 배경은 <link /> 요소에 의해 포함된 CSS에서 정의된 파란색입니다. 어둡게 설정하는 CSS 규칙은 두 번째 연결된 스타일시트에 있으며 이후 위치 때문에 적용됩니다.

이 순서는 포함된 <style> 요소에도 적용됩니다. <link> 전에 선언된 경우 연결된 스타일시트의 CSS가 가장 구체적입니다.

<style> 요소는 <head>에 선언되고 요소는 <code><body>에 선언됩니다. <style> 요소보다 더 구체적임을 의미합니다.

CSS가 선언된 인라인 style 속성은 선언에 !important가 정의되어 있지 않은 한 위치에 관계없이 다른 모든 CSS를 재정의합니다.

위치는 CSS 규칙의 순서로도 적용됩니다. background: purple이 마지막으로 선언되었기 때문에 요소의 배경이 보라색입니다. 녹색 배경은 보라색 배경보다 먼저 선언되었으므로 이제 브라우저에서 무시됩니다.

.my-element {
  background: green;
  background: purple;
}

동일한 속성에 대해 두 개의 값을 지정할 수 있다는 것은 특정 값을 지원하지 않는 브라우저에 대한 대체를 생성하는 간단한 방법이 될 수 있습니다. 다음 예에서는 font-size가 두 번 선언됩니다. clamp()가 지원되면 이전 font-size 선언이 삭제됩니다. clamp()를 지원하지 않으면 초기 선언이 적용되고 font-size는 1.5rem이 됩니다.

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
}

Check your understanding

Test your knowledge of the cascade

If you have the following HTML on your page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

Inside styles.css, is the following CSS rule:

button {
  background: yellow;
}

What color is the button's background?

pink

The embedded <style> origin is further down the page than the <link> tag, so while the specificity of button is the same, the position of the style rule makes it win.

yellow

To the HTML document, the yellow button background may have been read first, but a newer rule of the same specificity was discovered later, making this rule not apply to the button.

특이성

특정성은 가중치 또는 점수 시스템을 사용하여 계산을 수행하여 어떤 CSS 선택기가 가장 구체적인지를 결정하는 알고리즘입니다. 규칙을 보다 구체적으로 만들면 선택자와 일치하는 다른 CSS가 나중에 CSS에 나타나는 경우에도 규칙이 적용되도록 할 수 있습니다.

다음 레슨에서는 특이성이 계산되는 방법에 대한 세부 정보를 배울 수 있지만 몇 가지 사항을 염두에 두면 너무 많은 특이성 문제를 방지하는 데 도움이 됩니다.

요소의 클래스를 대상으로 하는 CSS는 해당 규칙을 보다 구체적으로 만들므로 요소만 대상으로 하는 CSS보다 적용하는 것이 더 중요합니다. 즉, 다음 CSS에서는 두 규칙이 모두 일치하고 h1 선택자에 대한 규칙이 스타일시트의 뒷부분에 나타나더라도 h1이 빨간색으로 바뀝니다.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

id는 CSS를 더욱 구체적으로 만들므로 ID에 적용된 스타일은 다른 많은 방법으로 적용된 스타일을 재정의합니다. id에 스타일을 추가하는 것이 좋지 않은 이유 중 하나입니다. 해당 스타일을 다른 것으로 덮어쓰기가 어려울 수 있습니다.

특이성은 누적됨

다음 강의에서 알 수 있듯이 각 선택기 유형에는 특정 요소를 대상으로 하는 데 사용한 모든 선택기에 대한 점수가 함께 추가되어 구체적인 정도를 나타내는 점수가 부여됩니다. a.my-class.another-class[href]:hover와 같은 선택기 목록이 있는 요소를 대상으로 지정하면 다른 CSS로 덮어쓰기가 상당히 어려운 항목을 얻게 됩니다. 이러한 이유로 CSS를 보다 쉽게 재사용할 수 있도록 선택기를 가능한 한 단순하게 유지하는 것이 좋습니다. 필요할 때 요소를 가져오기 위한 도구로 특이성을 사용하지만 가능하면 항상 길고 구체적인 선택기 목록을 리팩토링하는 것을 고려하십시오.

오리진

작성한 CSS가 페이지에 적용된 유일한 CSS는 아닙니다. 캐스케이드는 CSS의 출처를 고려합니다. 이 출처에는 브라우저의 내부 스타일시트, 브라우저 확장 또는 운영 체제에 의해 추가된 스타일, 작성한 CSS가 포함됩니다. 이러한 기원의 특이성 순서는 가장 덜 구체적인 것에서 가장 구체적인 것 순으로 다음과 같습니다.

사용자 에이전트 기본 스타일. 브라우저가 기본적으로 HTML 요소에 적용하는 스타일입니다.
로컬 사용자 스타일. 이는 기본 글꼴 크기 또는 감소된 동작 기본 설정과 같은 운영 체제 수준에서 올 수 있습니다. 또한 사용자가 웹 페이지에 대한 사용자 정의 CSS를 작성할 수 있도록 하는 브라우저 확장과 같은 브라우저 확장에서 가져올 수도 있습니다.
작성된 CSS. 작성하는 CSS입니다.
작성된 !important. 작성한 선언에 추가하는 모든 !important.
로컬 사용자 스타일 !important. 운영 체제 수준 또는 브라우저 확장 수준 CSS에서 가져온 모든 !important.
사용자 에이전트 !important. 브라우저에서 제공하는 기본 CSS에 정의된 모든 !important.

사용자가 작성한 CSS에 !important 규칙 유형이 있고 사용자가 사용자 지정 CSS에 !important 규칙 유형이 있는 경우 누구의 CSS가 승리합니까?

Check your understanding

Test your knowledge of cascade origins

Test your knowledge of cascade origins, consider the following style rules from various origins:

User-agent style

h1 { margin-block-start: 0.83em; }

Bootstrap

h1 { margin-block-start: 20px; }

Page Author styles

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

User custom style

h1 { margin-block-start: 2rem !important; }

Then, given the following HTML:

<h1>Lorem ipsum</h1>

What is the final margin-block-start of the h1?

20px

Bootstrap is part of the authored origin, which loses to the important local user style.

0.83em

The user agent style origin loses to the important local user style.

2rem

This !important user custom style has the most specific origin.

2ch

This author style is part of the authored origin, which loses to the important local user style.

1ch

This author style is part of the authored origin, which loses to the important local user style.

중요성

모든 CSS 규칙이 서로 동일하게 계산되거나 서로 동일한 특이성이 부여되는 것은 아닙니다.

중요성의 순서는 가장 덜 중요한 것부터 가장 중요한 것 순으로 다음과 같습니다.

font-size , background 또는 color와 같은 일반 규칙 유형
animation 규칙 유형
!important 규칙 유형(원점과 동일한 순서를 따름)
transition 규칙 유형

활성 애니메이션 및 전환 규칙 유형은 일반 규칙보다 중요합니다. 전환의 경우 !important 규칙 유형보다 중요합니다. 애니메이션이나 전환이 활성화되면 예상되는 동작이 시각적 상태를 변경하기 때문입니다.

DevTools를 사용하여 일부 CSS가 적용되지 않는 이유 알아보기

브라우저 DevTools는 일반적으로 요소와 일치할 수 있는 모든 CSS를 표시하고 사용되지 않는 CSS는 긋습니다.

적용할 것으로 예상한 CSS가 전혀 나타나지 않으면 요소와 일치하지 않는 것입니다. 이 경우 클래스나 요소 이름의 오타나 잘못된 CSS 등 다른 곳을 찾아야 합니다.

Check your understanding

Test your knowledge of the cascade

The Cascade can be used for...

Resolving conflicts when multiple styles apply to an element.

This is one of its primary goals, conflict resolution.

Ensuring there's only one style value for each property at draw time.

The text can only be one color, and The Cascade is a way of determining which it should be.

Scoring and weighting style rules.

Scoring and weighting are part of the sorting phase of The Cascade.

Sorting and filtering style attributes.

Sorting and filtering are phases of The Cascade to help understand aspects of conflict resolution.

캐스케이드

등장의 위치와 순서

Check your understanding

특이성

특이성은 누적됨

오리진

Check your understanding

User-agent style

Bootstrap

Page Author styles

User custom style

중요성

DevTools를 사용하여 일부 CSS가 적용되지 않는 이유 알아보기

Check your understanding

참고자료