캐스케이딩 (cascading)
- 엘리먼트는 다양한 CSS 선언의 영향을 받는다. 이 때 충돌을 피하기 위해서 우선순위를 정하는데 이를 캐스케이딩이라고 함.
- 캐스케이딩에는 다음과 같이 세가지 규칙이 있음.
- 중요도 - css가 어디에 선언 되었는지에 따라서 우선순위가 달라짐
- 명시도 - 대상을 명확하게 특정할수록 명시도가 높아지면서 우선순위가 높아짐
- 소스순서 - css 선언을 나중에 할수록 우선순위가 높아짐
중요도
css는 다양한 위치에서 기술될수 있는데, 그 위치에 따라서 우선순위가 달라진다. css가 기술될 수 있는 위치는 아래와 같고, 우선순위는 아래로 내려갈수록 높다. (저작자 CSS의 !important가 제일 높음)
- 브라우저의 CSS
- 사용자 CSS 일반선언
- 저작자 CSS 일반선언
- 저작자 CSS의 !important
example1.html - 중요도에 따라서 엘리먼트에 적용되는 CSS 효과가 달라진다. (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style type="text/css">
h1 {
color: red
}
h1 {
color: purple !important
}
</style>
<body>
<h1>title</h1>
</body>
</html>
명시도
css선언이 엘리먼트를 상세하게 특정할수록 우선순위가 높아진다. 대상을 지정하는 방법은 아래와 같고 아래로 내려갈수록 우선순위가 높다. (style을 이용하는 것이 제일 높음)
- type
- class
- id
- inline으로 엘리먼트에 직접 css를 기술
아래는 css 선택자에 따른 우선순위 규칙.(출처)
example2.html - <div>example</div>의 color 값에 여러개의 css선언이 영향을 주고 있음. 아래로 갈수록 우선순위가 높아짐. (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
div {
color: purple
}
.examples {
color: blue;
}
#example {
color: red;
}
#example.examples {
color: green;
}
</style>
</head>
<body>
<div id="example" class="examples">
example
</div>
</body>
</html>
소스순서
example3.html - 소스 상에서 css 선언이 나중에 나올수록 우선순위가 높아짐 (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#example.examples {
color: red;
}
#example.examples {
color: green;
}
</style>
</head>
<body>
<div id="example" class="examples">
example
</div>
</body>
</html>
