Inheritance
css에서의 상속은 하나의 엘리먼트에 스타일을 주면, 자식 엘리먼트들 모두 해당 스타일을 이어받는 것을 가리킨다.
<style>
div {
color : blue;
font-size : 20px
</style>
<body>
<div id="test-id" class="test-class">
20px크기의 빨간색 글자
<p>20px크기의 빨간색 글자</p>
</div>
</body>여기서 <div>에 스타일을 부여했지만, 자식인 <p>에도 똑같은 스타일이 적용된다.
그러나 모든 속성이 상속되는 것이 아니다. border, margin, padding, border와 같은 것들은 상속되지 않는다.
Cascading
하나의 속성에 중복되는 스타일 선언이 존재할 수 있다. 이때 어떤 CSS를 채택할 것인가에 대한 rule이 있는데 이것이 Cascading이다.
Cascading에는 세가지 규칙이 있다. 중요도, 명시도, 순서인데, 하나씩 알아보자.
중요도
CSS 소스 "원천"에 따라서 중요도를 구분한다. 네 가지의 소스 원천이 있다.
- Browser CSS
우리가 아무 스타일도 주지 않았을 때, 브라우저는 anchor 태그의 컨텐츠를 파란색으로 적용한다. 이렇게 브라우저에 default로 내장된 css를 말한다. - User CSS
사용자가 브라우저 설정에서 적용한 다크모드나, 폰트크기와 같은 것을 말한다. - Author External Style (저작자 외부 CSS)
개발자가 HTML "외부"에 작성한 STYLE SHEET의 CSS를 말한다. - Author Internal Style (저작자 내부 CSS)
개발자가 HTML "내부"에 작성한 STYLE SHEET의 CSS를 말한다.
우선순위는 다음과 같다.
Internal Style > External Style > User Style > Browser Style
Specificity 명시도
어떤 엘리먼트를 꾸며줄 때 선택자를 통해 엘리먼트를 지정한다. 셀렉터가 상세할수록 우선순위가 높아지는 규칙이 있는데, 이것이 명시도다. 명시도는 즉, 셀렉터들 간의 우선순위다.
- Type - Tag
- Class-
- ID
- Inline Style
우선순위는 다음과 같다.
Inline Style > ID > Class > Type
<head>
<style>
div { color : blue; }
.test-class { color : yellow; }
#test-id { color : purple; }
#test-id.test-class { color: red; }
</style>
</head>
<body>
<div id="test-id" class="test-class"> Red Color </div>
</body>명시도 계산법
!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]
ID 선택자의 갯수를 세어서 개당 100 으로 계산한다.
클래스 선택자의 갯수를 세어서 개당 10 으로 계산한다.
태그 선택자의 갯수를 세어서 개당 1 로 계산한다.
공용 선택자는 모두 0으로 계산한다.
가상 엘리먼트는 무시한다.
https://sjh836.tistory.com/27 [빨간색코딩]
소스 순서
css는 중복선언이 가능한데, 중요도나 명시도가 같은 경우
소스 순서에 따라 마지막에 선언된 스타일이 적용된다.
<head>
<style>
#test-id {color:red;}
#test-id {color:blue;}
</style>
</head>
<body>
<p>blue color</p>
</body>[Cascading 예외] !important
개발자가 !important 키워드를 이용하여 스타일을 선언할 수 있는데, Cascading 세가지 규칙을 모두 무시하고 최우선 순위로 적용되는 스타일이다.
즉, Cascading의 연결 고리를 끊어내는 것으로, CSS 스타일 정의할 때, !important를 사용하게 되면 연결고리를 무시하고 !important로 정의한 것을 스타일이 적용된다.
보통 HTML, CSS 구조가 잘못된 경우에 사용하게 된다. 즉 좋지 못한 코드라는 증거가 된다.
