css언어의 Cascading
css란 Cascading Style Sheets 의 약자로 이 중 중요한 것은 바로 Cascading이다. 스타일 시트에서 코드의 충돌이 일어나지 않도록 우선순위를 아는것은 중요하다. 우선순위를 알지 못하면 내가 원하는 대로 또는 예상한대로 코드가 나오지 않는 경우가 일어날 수 있다.
캐스케이딩의 우선순위를 결정하는 요인은 다음 세가지이다.
cascading 우선순위
- Importance(중요도)
- Specificity(명시도)
- Source order(코드순서)
1. Importancs(중요도)
css가 어디에 선언 되었느냐에 따라 우선순위가 달라진다.
- head 요소 안의 style 요소
- head 요소 안의 style 요소 안의 @import
- <link> 로 연결된 CSS 파일
- <link> 로 연결된 CSS 파일 내의 @import
- 브라우저 디폴트 스타일시트
2. Specificity(명시도)
태그 속성에 스타일을 줄 때 선택자를 사용한다. 이 선택자를 선언할때 선택자의 유형에 따라 가중치가 주어지고 우선순위가 결정된다. 대상을 명확하게 특정할수록 우선순위가 높아진다.
style > id > class, pseudo-element > 태그
class 선택자와 id 선택자가 있을 경우 id 선택자가 우선된다.
<style>
/* 1. specificity: 1-0-1 */
#outer a {
background-color: red;
}
/* 2. specificity: 2-0-1 */
#outer #inner a {
background-color: blue;
}
<style>
<body>
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
<body>위의 경우 첫번째에는 id 1개, class 0개, element 1개이지만, 두번째 코드에서 id 선택자가 2개로 우선순위가 정해졌다.
따라서 background-color는 blue가 된다.
!important > style > id > class, pseudo-element > 태그
이 모든 것을 무효화 하는 것이 !important 이다.
이것은 cascading의 우선 순위를 무시한다. 하지만 남용하지 말고 주의해서 사용해야한다.
3. Source order(코드순서)
동일한 가중치를 갖는 요소가 두개 이상인 경우, 마지막에 선언된 코드가 우선된다. 이는 앞에 쓰인 코드가 뒤에 쓰인 코드에 의해 덮여쓰인다고 할 수 있다.
<style>
h1 {
color: red;
}
h1 {
color:blue;
}
</style>
<div>
<h1>Hello</h1>
</div>위의 경우 h1 태그에 적용되는 색상은 blue이다.
