📒CSS3 기초

- CSS의 캐스케이딩

🤔 Cascading(캐스케이딩)이란? CSS 효과가 적용되는 우선순위의 규칙을 말한다.

📌 계단식 CSS

CSS는 나중에 선언된 속성이 우선순위가 높다.

h1 {
	color: red;
}

h2 {
	color: blue;
}

h1, h2 {
	color: greenyellow;
}

위 예시 코드에서 <h1>, <h2> 태그 모두 가장 마지막에 선언된 'greenyellow' color가 적용된다.

<link rel = "stylesheet" href = "app.css">
<link rel = "stylesheet" href = "app2.css">

위 예시 코드에서는 나중에 링크된 'app2.css' 파일의 스타일이 적용된다.

📌 명시도 CSS

CSS는 대상을 더 구체적으로 지정할수록 우선순위가 높다.

#btn button:hover {
	background-color: red;
}

.post button:hover {
	background-color: olive;
}

button: hover {
	background-color: blue;
}

위 예시 코드에서 가장 마지막으로 선언된 background-color 속성값은 'blue'이지만, 명시도 우선순위에 따라 'red' color가 적용된다. 명시도 우선순위는 id > class > element 순이다.

CSS에서는 Inline Style과 !important를 사용하여 우선순위를 높일 수 있다.

<button style="background-color: green;">I am button</button> <!-- Inline Style 적용 -->

button {
	background-color: magenta !important;
} /* !important 활용 */

✔ 위에서 알아본 명시도에 따른 CSS의 우선순위를 높은 순서로 정리해보면 다음과 같다.
!important > Inline Style > Id > Class > Element > 상속된 스타일