Cascading의 사전적 의미는 위에서 아래로 쏟아지는, 작은 폭포 와 같은 의미를 가지고 있다. CSS에서의 Cascading은 위 사전적 의미와 다소 다를 수 있지만 위에서 아래로 쏟아지는 > 순서대로 흐르는 이라는 의미로 생각하고 접근하면 좋을 것 같다.
CSS에서의 Cascading
CSS는 Cascading Style Sheet 의 약자로 Cascading이 가장 앞에 나오는 만큼 해당 원리가 가장 중요하게 적용되고 있다. 말 그대로 순서대로 흐르는, 우선순위를 적용하는 의미를 가지고있으며 CSS 스타일 적용 방식 및 명시도에 따라 스타일을 적용하기 위한 우선순위가 다르다. HTML요소는 하나 이상의 스타일에 영향을 받을 수 있는데 어떤 스타일을 적용 받을지에 대한 우선순위가 정해져야 한다.
Cascading은 3가지 요소를 통해 우선순위를 결정한다.
1. 중요도
2. 명시도
3. 코드 순서
중요도
CSS 스타일을 적용하는 방법에는 여러가지가 있다.
- Inline Style
<p style="color: blue;"> Inline Style </p>- HTML Tag내에 Style정보를 직접 입력하는 방법이다.
- Link Style Sheet
<link rel="stylesheet" href="css/style.css">
...
<p class="link"> Link Style </p>.link {
color: blue;
}- 별도의 CSS파일을 생성하여 Html Head내에 css파일을 link하여 사용하는 방식이다.
- User Agent Style Sheet
- 브라우저 자체에서 재공해주는 Style Sheet이다.
위와 같이 CSS를 어디서 선언했나에 따라 우선순위를 나눌 수 있는대(중요도) 위 3가지 분류 중 우선순위로는 1 > 2 > 3 순위로 나타낼 수 있다.
명시도
명시도 (Specificity) 셀렉터가 가리키는 것이 명확할수록 우선순위를 높게 주는 것을 의미한다. 모호하게 여러개를 가리키는 셀렉터 보다 적은 범위를 명확하게 가리키는 셀렉터 스타일의 우선순위가 높다.
명시도에 따른 우선순위는 id > class > tag 순으로 나타낸다.
- id는 문서내에 한개만 존재하므로 가장 좁은범위이고, 우선순위가 높다.
- class는 id보다는 여러번 쓸 수 있기 때문에 id보단 넒은범위이다.
- tag는 문서내 모든 tag를 가르키기 때문에 범위가 매우 넓고 우선순위가 낮다.
해당 명시도는 각각 점수로 나타낼 수 있는데 id(100) > class(10) > tag(1)를 이용하여 계산을 한다면 손쉽게 명시도에 따른 우선순위를 알아낼 수 있다.
코드 순서
코드 순서는 말 그대로 코드 순서에 따른 우선순위 적용이다. 가장 마지막에 등장한 속성을 최우선으로 적용한다. 이것은 프로그래밍에서의 위에서 아래로 흐르는 기본적인 원칙을 나타낸 것으로 해석하기 쉽다.
<p> color </p>p {
color: red;
}
p{
color: blue;
}위와 같은 코드가 있을때 p태그의 color text는 파란색으로 나타내는 것을 확인할 수 있다.
