내가 몰랐던 부분만 정리
mdn, web.dev 참고
Cascade
CSS는 Cascading Stylesheets의 약자입니다.
캐스케이드는 여러 CSS 규칙이 HTML 요소에 적용되는 충돌을 해결하기 위한 알고리즘입니다.
1. Cascade Algorithm
1️⃣ 위치 및 표시 순서: CSS 규칙이 표시되는 순서
2️⃣ 특이성: 가장 일치하는 CSS 선택자를 결정하는 알고리즘
3️⃣ 오리진: CSS가 나타나는 순서와 출처
예를들어 브라우저 스타일인지, 브라우저 확장 프로그램의 CSS인지, 작성한 CSS인지 여부
4️⃣ 중요도: 몇몇 CSS 규칙은 특히 !important 규칙 유형의 경우 다른 규칙보다 가중치가 더 높습니다.
1-1. 위치 및 표시 순서
link: 하위 link가 가장 구체적입니다. 임베드된 {style} 요소에서도 동일한 현상이 발생합니다.
페이지 아래쪽으로 갈수록 구체화됩니다.
즉,
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>라면
styld 태그에 있는 속성이 우선순위가 된다.
1-2. 특이성
태그의 선택자가 id 보다 우선순위이다.
특이성은 누적이 된다.
1-3. 오리진
캐스케이드는 CSS의 출처를 고려합니다.
이 출처에는 브라우저의 내부 스타일시트,
브라우저 확장 또는 운영 체제에 의해 추가된 스타일,
작성한 CSS가 포함됩니다.
이러한 기원의 특이성 순서는 가장 덜 구체적인 것에서 가장 구체적인 것 순으로 나열해봤다.
1️⃣ 사용자 에이전트 기본 스타일
브라우저가 기본적으로 HTML 요소에 적용하는 스타일입니다.
2️⃣ 로컬 사용자 스타일
이는 기본 글꼴 크기 또는 감소된 동작 기본 설정과 같은 운영 체제 수준에서 올 수 있습니다.
또한 사용자가 웹 페이지에 대한 사용자 정의 CSS를 작성할 수 있도록 하는 브라우저 확장과 같은 브라우저 확장에서 가져올 수도 있습니다.
3️⃣ 작성된 CSS
작성하는 CSS입니다.
4️⃣ 작성된 !important
작성한 선언에 추가하는 모든 !important
5️⃣ 로컬 사용자 스타일 !important
운영 체제 수준 또는 브라우저 확장 수준 CSS에서 가져온 모든 !important
6️⃣ 사용자 에이전트 !important
브라우저에서 제공하는 기본 CSS에 정의된 모든 !important
1-4. 중요성
1️⃣ font-size , background 또는 color와 같은 일반 규칙 유형
2️⃣ animation 규칙 유형
3️⃣ !important 규칙 유형(원점과 동일한 순서를 따름)
4️⃣ transition 규칙 유형
활성 애니메이션 및 전환 규칙 유형은 일반 규칙보다 중요합니다.
전환의 경우 !important 규칙 유형보다 중요합니다.
애니메이션이나 전환이 활성화되면 예상되는 동작이 시각적 상태를 변경하기 때문입니다.
