CSS의 Cascading 파헤치기

갓희·2023년 12월 12일

CSS

목록 보기

1/4

저번 글에서 cascading의 명시도에 대해 다뤄보았는데,
cascading에 대해 더 자세히 알아보고 싶어 따로 글을 쓰게 되었다.
이런 기초 지식은 쌓아두면 언젠가 도움이 될 테니까..
CSS(Cascading Style Sheet)에서 맨 앞자리인 C를 차지하는 녀석이면
얼마나 중요할까? 하는 궁금증에서 시작했는데,
생각보다 더 체계적이며 중요한 녀석이었다.

시작!

CSS에서 Cascading에 대하여

cascading: '위에서 아래로 흐르는, 상속 또는 종속하는' 의 의미를 갖고 있다.

CSS(Cascading Style Sheet)에서의 Cascading은 무엇이냐...

선택자에 적용된 많은 스타일 중, 어떤 스타일로 브라우저에 표현할지 결정해주는 원리

라는 의미를 갖고 있다.

만약, 어떤 선택자에 속성(상속이 가능한)값 A를 적용했다고 치자.
그런데 어쩌다보니 그 선택자의 부모 요소에 속성값B를 주게 되었다.

<div style="color: blue;">
	<h1 style="color: black;">멋사</h1>
</div>

h1은 div의 하위 요소이며, div에 적용된 스타일은 상속이 가능한 스타일이므로,
하위 요소에 적용이 된다. ( -> 사실 이것도 cascading 규칙임)
그러나 하위 요소인 h1에도 스타일이 따로 적용되어 있다.
이런 상황에서, h1은 어떤 색을 갖게 될까?
그리고 h1이 그 색을 가지게 된 원리는 무엇일까?
를 다루는 것이 바로 cascading이라는 것이다 큼큼..

즉, 한 요소에 중복된 스타일을 주게 되었을 때,
css가 스타일을 순차적으로 적용하게 되는 규칙을 cascading이라고 한다.

cascading은 다음 2가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.
1. 스타일 우선순위
2. 스타일 상속

그리고, 스타일 우선 순위는 다시 중요도, 명시도, 코드 순서의 3가지로 나뉘어진다.

오늘 글에서는 순차적으로 다뤄보도록 하겠다.

1. 스타일 우선순위

중요도

CSS가 어디에 선언되어 있는가?
스타일이 선언된 위치에 따라 우선순위를 매기는 것

스타일 시트는 제작자(author), 사용자(user), 사용자 도구(user agent, 대표적으로 브라우저)가 작성한 세 종류로 나뉜다.
이 중 가장 중요도가 높은 것은 작성자의 CSS 파일이며, 각 스타일 시트의 우선순위는 아래와 같다.

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

사용자 스타일 시트
- 특별한 조건이 필요한 최종 사용자가 그들의 필요에 맞게 구성해둔 스타일 시트
- Ex. 저시력자라면 윈도우의 '고대비' 설정을 지정
  -> 그 설정의 스타일이 시스템에 저장된다.
  이 때의 스타일을 사용자 스타일 시트라고 한다.
- 사용자가 시스템에 저장한 스타일이기 때문에,
  웹페이지 제작자가 스타일을 제어할 수 없다.
제작자 스타일 시트
- 웹 문서를 개발한 사람이 설정한 스타일,
  CSS 파일이나 HTML 내의 스타일로 선언된 것들을 말한다.
- 제작자 스타일 시트 내에서의 우선순위
  1. <head>의 <style>
  2. <head>의 <style> 내의 @import
    (다른 스타일 시트에서 스타일 규칙을 가져올 때 사용한다.)
  3. <link>로 연결된 CSS 파일
  4. <link>로 연결된 CSS 파일 내의 @import
- !important 스타일 시트
  - !important 가 적용된 스타일 시트의 중요도
    1. !important 사용자 스타일 시트
    2. !important 제작자 스타일 시트 속 !important 스타일
    3. 사용자 스타일 시트
    4. 제작자 스타일 시트
    5. 사용자 도구 스타일 시트
  - !important는 저번 시간에 배웠는데, 찾아보니 명시도보단 중요도에 더 가까운 것 같아 다시 수정하게 되었다.
  - 제작자가 스타일 시트에 스타일을 만들 때 속성값 뒤에 !important 라고 써 둔 것을 말한다.
  - !important를 붙이게 되면 다른 일반 스타일보다 최우선해서 적용된다.
  - !important는 명시도에 직접적인 영향을 끼친다.
  - 남용하면 안됨! -> cascading이 복잡해져 디버깅이 어렵다..ㅠㅠ
사용자 도구 스타일 시트 (브라우저의 User Agent 스타일 시트)
- 브라우저들마다 기본적으로 지정하고 있는 스타일 시트

셀렉터 명시도 (Selector Specificity)

하...
솔직히 제일 화나는건, 저 specificity의 해석 때문이었다.
어디선 명시도라하고 어디선 적용범위라고 하고.,...으아악!!
아무튼 진정하고, 다시 정리하겠다.
뭔가 적용 범위라고 하는 것이 더 이해에 쉬울 것 같아,
명시도라는 단어 대신 적용 범위라고 하겠습니다. (어려운 한자보단 눈에 익숙한게 좋으니까)

중요도가 같을 경우, 스타일은 셀렉터가 얼마나 구체적으로 적용 범위를 지정하는 가?의 영향을 받게 된다.
(단계적인거 확 느껴지쥬? 이것이 바로 cascading)
그래서 적용 범위가 우선순위에 어떤 영향을 준다는 것인가?

스타일 적용 범위가 좁을수록 우선순위가 높다.

즉, 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 준다는 것이다.
모호하게 여러 요소를 가리키는 셀렉터보다는, 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선 순위가 더 높다.

우선순위가 높은 범위는 아래와 같다.

인라인 스타일

html 마크업에서 inline으로 바로 css를 넣어주는 것
즉, 태그 안쪽에 style 속성을 사용해 적용한 스타일
하나의 태그 내에서만 적용되기 때문에 높은 우선 순위를 갖는다.
Ex. <h1 style="color: blue;"> content </h1>

id 선택자

id는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
Ex. #h1 {property: value;}

class 선택자, 속성 기반 선택자, 가상 클래스

여러 번 쓰일 수 있기 때문에 id보다는 넓은 범위를 갖는다.
Ex.
- .class {property: value;}
- a[href="https://veamcamp.com"]
- :hover {property: value;}

태그 선택자, 가상 요소

문서 내 모든 태그를 가리키기 때문에, 범위가 제일 넓다.
Ex.
- h1 {property: value;
- ::before

*
그리고, 결합자는 적용 범위에 영향을 끼치지 않는다.
왜인지는... 모르겠다.
규칙이니까 그냥 이해하는 수 밖엔..

그리고 명시도를 점수화(specificity calculator 라고 한다.)
하여 보여주는 사이트가 있는데,
한 번 참고해보시길!
https://specificity.keegan.st/

코드 순서

중요도를 거르고.. 적용 범위까지 걸렀는데.. 어라라 그래도 남은 넘들이 있네...?
중요도와 적용 범위 둘 다 같은 아이들.. 이 넘들은 우짭니까?! 를 결정하는 것..
바로 ,코드 순서이다.

코드에서 가장 마지막에 등장한 속성을 최우선으로 적용한다.
이때, 나중에 작성한 스타일이 앞서 작성된 스타일을 '덮어쓰기' 한 형태로 적용된다.

만약,

h1 { color: black; }
h1 { color: blue; }

라는 상황을 가정해보자.
이때 h1은 한 문서 내에 있기 때문에 중요도도 같고, 적용 범위까지 같다.

이런 경우에는, 코드 순서에 따라서 나중에 작성한 스타일을 적용한다.
즉, h1은 파란색이 나오게 되는 것이다.

더 구체적으로 보자면, h1은 검은색이라는 스타일을 먼저 적용 받은 후
나중에 선언된 파란색이라는 스타일로 덮어씌워진 것이다!

2. 스타일 상속

태그들이 어떻게 포함되었는가?에 따라 스타일을 적용할지 결정하는 원칙

태그의 포함 관계에 따라 요소들은
부모와 자식, 혹은 조상과 자손 요소로 구분할 수 있다.

CSS에서 별도로 스타일을 지정하지 않으면,
부모 요소에 있는 스타일 속성이 자식, 자손 요소로 자동 전달된다.
상속 가능한 속성만 상속되는 것이며, 모든 속성이 상속된다는 말이 아니다!!

만약 다음과 같은 코드가 있다고 치자.

<div>
    	<h1>안녕<hi>
</div>

h1은 div와 부모와 자식 관계이다.
이때, 상속이 가능한 color 속성으로 div에 color: red; 스타일을 주게 되면
h1 요소는 div에게 color 값을 상속받아 red 값이 적용된다.

이것이 스타일 상속이다.

하...
드디어 cascading을 정복한 것 같다.
이렇게 한 주제에 대해 정리는 처음 해보는 것 같은데,
재미있다..

평소 쓰던 TIL은 살짝 여러 주제에 대해 찍먹하는 느낌이었는데,
이번엔 cascading에 대해 아주아주 심도있게 다룰 수 있어서 좋았다.

끝!

갓희

나의 개발일지

다음 포스트

CSS flex (1)

2개의 댓글

소정

2023년 12월 12일

덕분에 cascading 같이 정복하고 갑니다 ..! 중요도라는 개념은 처음 들어봤어요 감사합니다 ~!

답글 달기

몽글몽글