본문 바로가기
미래 일기/건축 프로그래밍 일기

[CSS] 스타일 우선순위 (Cascading)

by Gnuz 2022. 5. 29.

CSS는 Cascading Style Sheet 의 줄임말

여기서, Style Sheet는 스타일이 지정된 시트/페이지 정도로 이해하자.

 

Cascading은 사전에서 말하듯이

'종속, 연속, 직렬' 등의 뜻이다.

 

결국 선택자에 적용된 많은 스타일 중, 어떤 스타일로 브라우저에 표현할지 

결정해주는 원리를 의미한다.

 

CSS 파일은 위에서 아래로 읽히며, 동일한 규칙을 여러 번 선언하면 마지막 규칙만 적용된다(위치 우선순위). 

예를 들어, 이 CSS 코드는 빨간색 값이 재정의되기 때문에 모든 h1 요소를 파란색으로 만든다.

 

h1 {
	color: red;
}

h1 {
	color: blue;
}

 

위치 우선 순위는 동일한 유형의 선택기에만 적용된다. 

Class selector는 HTML selector보다 우선하며, ID selector는 Class selector(Type Precedence유형 우선 순위)보다 우선한다.

즉, Class selector는 ID selector를 덮을 수 없으며, HTML selector는 다른 HTML selector만 덮을 수 있다.