🎨 CSS (Cascading Style Sheets)
CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 언어이다.
HTML이 웹페이지의 구조와 내용을 구성한다면
CSS는 HTML의 구조를 어떻게 보여줄지 결정한다.
이러한 CSS를 사용하다 보면 CSS가 겹치는 상황이 발생한다.
이런 경우에 어떤 CSS를 우선해서 보여줄지 정하는 것을 Cascading이라고 한다.
cascading에 대해 자세히 알아보자.
📝 Cascading
같은 요소에 여러 CSS 규칙이 적용될 때 우선순위에 따라 어떤 CSS를 적용할지 결정하는 알고리즘
CSS 규칙이 겹치는 상황은 위 이미지처럼
같은 요소의 같은 속성에 대해 서로 다른 값이 지정되었을 때를 말한다.
기존에는 background-color: #346AFF;였지만
background-color: red; 인라인 스타일을 추가해 주면서
cascading 우선순위에 따라
인라인 스타일의 background-color: red;로 최종 적용된다.
🗂️ Cascading 우선순위
캐스캐이딩 우선순위는
1. user agent style sheet (사용자 에이전트 스타일 시트)
웹 브라우저 자체 CSS로 우선순위가 가장 낮다.
2. 개발자 스타일 시트
CSS의 우선순위는 다음과 같이 결정된다.
- 내부/외부 스타일
<link rel="stylesheet" href="style.css"> <!-- 먼저 로드 -->
<style>
p { color: blue; } <!-- 나중에 선언되어 이것이 적용 -->
</style>내부 외부 스타일은 같은 우선순위이지만 코드 상 나중에 선언된 것이 적용된다.
보통 link태그를 먼저 작성해서 외부 css 파일이 먼저 로드되기 때문에
내부 스타일이 적용되는 경우가 많다.
- Specificity Calculator (선택자의 명시도)
id, class, 요소/가상요소의 개수로 명시도를 결정한다.
(id개수, class개수, 요소/가상요소)
id > class > 요소/가상요소 순으로 우선순위가 높다.
- 코드 상의 순서
같은 우선순위라면 나중에 선언된(가장 마지막에 작성된) CSS 코드가 적용된다.
3. 인라인 스타일
<h1 style="color: red">
제목
</h1>HTML 코드에 style 태그로 직접 css를 삽입하는 경우 우선순위가 높다.
4. !important 선언
.container {
background-color: red !important;
}모든 우선순위 규칙을 무시하고 최우선으로 적용된다.
최우선으로 적용되길 바라는 CSS 속성에 !important를 붙여주면 적용된다.
cascading 우선순위는
위에서 정리한 순서대로 우선순위가 높아진다.
css를 작성할 때 위 우선순위를 고려해서 작성해야
예상치 못한 CSS 스타일링을 막을 수 있을 것 같다.
