CSS의 계단식과 상속

✒️ 2025-05-16 11:46 내용 수정

Cascade : 종속, 폭포처럼 떨어지다. 작은 폭포

상속(Inheritance)

<p>
	상속 글자 테스트
	<span>내부 글자</span>
</p>

body {
	color: blue;
}

span {
	color: black;
}

css_cascading 3.png

속성 설명
inherit 부모 요소의 속성값을 상속 받아 선택한 요소의 속성값에 적용
initial 선택한 요소의 속성값을 해당 속성의 초기값으로 설정
revert 선택한 요소의 속성값을 브라우저의 기본 스타일로 초기화
revert-layer 선택한 요소의 속성값을 이전 cascade 레이어에서 지정한 값으로 초기화
unset 상속을 받았다면 inherit, 그 외에는 initial처럼 동작 
<ul>
	<li class="first"><a>첫 번째 a 태그</a></li>
	<li class="second"><a>두 번째 a 태그</a></li>
	<li class="third"><a>세 번째 a 태그</a></li>
</ul>

body{
	color: green;
}
ul .first{
	color: inherit;
}
ul .second{
	color: initial;
}
ul .third{
	color: unset;
}

css_cascading 4.png

계단식(cascading)

1. 소스 순서(Source ordering)
2. 명시도(Specificity)
3. 중요성(Importance)

1. user agent 스타일 시트(ex: 브라우저 기본 스타일 등)
2. 사용자 스타일 시트의 일반 선언
3. 작성자 스타일 시트의 일반 선언(웹 개발자 설정)
4. 작성자 스타일 시트의 중요 선언
5. 사용자 스타일 시트의 중요 선언
6. user agent 스타일 시트의 중요 선언

소스 순서(Source ordering)

<div>첫 번째</div>
<div>두 번째</div>

div { color: blue; }
div { color: red; }

css_cascading 1.png

명시도(Specificity)

Specificity : 특정함, 명확함
mdn web docs 명시도 , CSS Specifishity, Mastering CSS Specificity, Specificity in CSS Selectors참고.

css_specificity.png

<div class="first">첫 번째</div>

div { color: blue; }
.first { color: red; }

css_cascading 2.png

<ul>
	<li><a>첫 번째 링크</a></li>
	<li><a class="new-link">두 번째 링크</a></li>
</ul>

a {color : black; }
.new-link { color : red; }

css_cascading 5.png

<div class="box">첫 번째 박스</div>
<div id="container" class="box">두 번째 박스</div>

.box{ color : black; }
#container{ color : red; }

css_cascading 6.png

<div id="container" class="box"
	style="color:palevioletred;"
>스타일 우선 순위</div>

.box{ color : black; }
#container{ color : red; }

css_cascading 7.png

중요성(Importance)

div {
	margin: 30px !important;
}