Cascading이란 폭포같은, 연속적인, 이라는 의미를 가진 단어로 어떤것이 연쇄적으로 영향을 미치는 상황을 뜻한다.CSS에서는 선언방식과 선택자에 따라 스타일 규칙이 적용되는 우선순위를 의미한다.
CSS란 무엇일까?
CSS는 Cascading Style Sheets의 약자로, 마크업 언어가 표현되는 방법을 기술하는 언어이다. HTML이 웹 사이트의 내용과 구조를 담당한다면 CSS는 어떻게 나타낼지를 담당하고 있다. CSS를 어디에 어떻게 선언했는지, 어떤 선택자를 사용했는지에 따라서 스타일이 적용되는 순서가 바뀐다.
CSS 선언방식
1. 인라인(in-line) 방식
HTML 태그에 직접 style 속성을 작성하는 방식
<span style="font-size:32px; font-weight:500"></span>2. 내장(embedded) 방식
HTML 파일 안에 <style></style>태그를 작성하여 해당 태그 안에 스타일을 적용하는 방식
<head>
<style>
span {
font-size: 32px;
font-weight: 500;
}
</style>
</head>3. 링크(link) 방식
CSS 파일을 별도로 분리하여 <link>태그를 통해 파일을 불러오는 방식
index.html
<head>
<link rel="stylesheet" "href="style.css">
</head>style.css
span {
font-size: 32px;
font-weight: 500;
}4. @import 방식
@import를 사용하여 css 파일을 불러오는 방식
<head>
<style>
@import url(style.css);
</style>
</head>CSS 선택자
1. HTML 요소 선택자
HTML 태그를 그대로 사용하는 방식
span {
display: inline-block;
}2. Class 선택자
HTML 태그에 class 속성을 추가하고, 해당 속성값으로 스타일을 적용하는 방식. 속성값 앞에 온점(.)이 붙는다.
html
<div class="context">
<span></span>
</div>
css
.context {
background-color: #ffffff;
}3. Id 선택자
HTML 태그에 id 속성을 추가하고, 해당 속성값으로 스타일을 적용하는 방식. 앞에 #을 붙이며, 중복으로 사용할 수 없다.
html
<h1 id="top-title">logo</h1>
css
#top-title {
font-weight: 900
}4. group 선택자
여러 요소를 한번에 적용할 수 있게 해준다. 쉼표(,)로 구분하며, 클래스도 동일하게 그룹으로 묶어서 스타일을 적용할 수 있다.
span, p, a {
color: #000000;
}5. 전체 선택자
*을 사용하여 표현하고 요소 전체를 선택할 수 있다.
* {
box-sizing: border-box;
}Cascading Order
Cascading은 여러 선언방식과 선택자에 따라서 스타일 규칙이 적용되는 순서라고 했다. 아래 3가지 요소를 고려하여 스타일 우선순위가 결정된다.
- 중요도
- 명시도
- 선언 순서
1. 중요도
CSS가 어디에 선언되었는지에 따라 우선순위가 결정된다.
- head 태그 내의 style 태그
- head 태그 내의 style 태그 내의 @import 문
<link>로 연결된 CSS 파일<link>로 연결된 CSS 파일 내의 @import 문- 브라우저 디폴트 스타일시트
2. 명시도(Specificity)
명시도는 스타일이 적용되는 대상이 명확할수록 우선순위가 높다.
!important > 인라인(in-line) > id > class > tag
위의 순서대로 우선순위가 높으며 id, class, tag 선택자의 경우 선택자의 개수를 계산하여 합계가 높은순으로 우선순위가 높다. (id, class, tag) 순으로 수를 세고, class나 tag가 많더라도 id 1개의 우선순위가 더 높다.
html
<ul>
<li id="home-link">blue</li>
<li class="list">green/<li>
<li>pink/<li>
</ul>css
ul > li {
color: white;
background-color:pink;
}
.list {
color: white;
background-color:green;
}
#home-link {
color: white;
background-color:blue;
}결과 :
blue
grenn
pink
코드가 위와 같을때 순서대로 파란색, 녹색, 분홍색이 된다. 명시도의 점수를 (id, class, tag) 순으로 point를 집계 하기 때문이다.
#home-link : (1, 0, 0)
.list : (0, 1, 0)
ul > li : (0, 0, 2)
명시도의 점수 계산이 헷갈린다면 올림픽처럼 금(id), 은(class), 동(tag) 메달의 개수대로 순위가 결정된다고 생각하면 좋을것 같다.
3. 선언순서
선언순서는 가장 마지막에 적힌 스타일이 우선순위가 높다는 것을 의미한다. 위에서 부터 아래로 코드를 해석해 나가기 때문에 동일한 선택자의 내용이 있을경우 더 하단에 적힌 스타일이 우선 적용 된다. 아래와 같이 적혀 있다면 <a>태그는 color: #000000;가 적용되어 검은색으로 보인다.
a {
color: #ffffff;
}
...
a {
color: #000000;
}참고 사이트
css 위키백과
mdn css
CSS 기본 문법 정리
CSS 상속 개념 적용 우선순위
https://velog.io/@bami/CSS-Cascading
