CSS
CSS의 풀네임은 Cascading Style Sheets이며 Cascading의 뜻을 영어로 번역하면 위에서 아래로 흐르는 뜻으로 CSS의 맨 앞글자인 만큼 CSS에서 캐스케이딩 원리가 중요하게 작용한다고 생각합니다.
<div style="color: red">
<p style="color: blue"> 캐스케이딩 </p>
<div>위와같은 경우에 p태그에 있는 캐스케이딩의 글자색은 "어떤 색이 적용이 될까?" 라는 의문점이 생긴다.
이와같이 HTML을 작성하다보면 하나의 요소에 여러가지 스타일이 적용되는 경우가 있습니다.
이때 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어지는 규칙을 캐스케이딩이라고 합니다.
스타일의 우선순위
스타일의 우선순위 결정방법은 총 3가지로 나뉩니다.
1. 중요도
2. 명시도
3. 코드 순서
중요도 (Important)
CSS는 다양한 위치(사람)에서 선언될 수 있는데 그 위치에 따라서 우선순위가 달라진다.
스타일 시트는 스타일을 직접 작성하는 제작자, 기본으로 제공되는 사용자 도구(user agent, 브라우저) 등이 있다.
제작자라고 하면 css코드를 짜는 사람으로 생각하면 되고 기본으로 제공되는 브라우저는 간단하게 a태그를 만들면 밑줄이 쳐진다든가 h1태그를 작성하면 폰트크기가 알아서 제공되어있는 것들을 말한다.
우선순위
작성자 스타일 시트 > 사용자 도구 스타일 시트
중요도 올리기
스타일을 작성하다가 의도적으로 중요도를 올릴 수 있는 방법이 있는데 !important의 속성을 사용하면 됩니다.
<head>
<style>
div { color: red; }
div { color: green !important; }
div { color: blue; }
</style>
</head>
<body>
<div>
<div>
<div style="color: yellow;"> 캐스케이딩 </div>
<div>
</div>
</body>위와같이 작성하면 원래 결과값은 yellow색깔이 캐스케이딩에 적용이 되어야하는데 !important를 선언한 green 색깔이 글자색에 적용이 된다.
명시도 (Specificity)
명시도는 css선언이 해당요소를 상세하게 특정할수록 우선순위가 높아지는 것이다.
쉽게 말해 포괄적으로 여러가지 요소들을 가르키는 것보다 하나의 요소를 집중적으로 가르키게 되면 우선순위가 높아진다는 말이다.
명시도를 나뉘는 요소는 태그, class, id, inline(인라인)이 있다.
인라인 스타일이란 <p style="backgroun-color: #green"> 스타일 적용 </p>
처럼 태그안에 직접적으로 style을 주는 것을 말한다.우선순위
인라인 스타일 > id > class > 태그 스타일
<head>
<style>
li {color: red;}
#idsel {color:blue;}
.classsel {color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li style="color: powderblue;" id="idsel" class="classsel" >li 색깔이 무엇일까?/</li>
<li>JS</li>
</ul>
</body>
헤드태그에는 각각의 선택자에 따라 스타일이 다 다르게 적용되어 있고
하나의 요소에 여러가지 스타일이 중복되는 상황.위와 같은 상황에서 명시도의 우선순위가 적용된다.
따라서 우선순위가 제일 높은 인라인 스타일인 powderblue 색깔이 적용이 된다.
그런데 만약에 이런 상황이면 어떻게 될까?
<style>
li {color: red;}
#idsel {color:blue !important;}
.classsel {color:green;}
</style>그러면 !important의 속성으로 인해서 blue색깔이 적용이 된다.
코드 순서
코드순서는 같은 선택자인데 마지막으로 선언한 속성의 우선순위가 높아진다는 것입니다.
<style>
p { background-color: red;}
p { background-color: green;}
p { background-color: blue;}
</style>위와같이 선언되면 p태그는 제일 마지막에 선언된 blue색상의 배경색을 가지게 되는 것이다.
