CSS Selector 2 - 우선순위와 상속
개요
Css
는 Cascading Style Sheet
의 약자로 직역하면 위에서 아래로 떨어지는 스타일 문서
입니다.
많은 선택자와 스타일이 작성이 되고 의도하지않은 중복된 스타일
들이 생겨나게 될 것입니다.
Css
에는 이러한 경우를 위한 중요한 두가지 원칙
이 존재합니다.
- 스타일 우선순위
- 스타일 상속
우선순위
Css
에 선언 될 수 있는 많은 스타일
들은 각각 우선순위를 가지고 우선순위가 가장 높은 스타일이 결정됩니다.
이러한 우선순위
를 책정하는 3가지 규칙
이 존재합니다.
- 중요도
- 명시도
- 코드가 작성된 순서
중요도
Css
가 어디에서 선언됬는가? 를 평가하는 중요도입니다.
Css는 다양한 방법으로 선언되고 적용될 수 있습니다. 아래의 순서대로 중요도가 높습니다.
-
<head>
의<style>
선언 -
<head>
의<style>
내의@import
-
<link>
로 링크된.css
파일 -
<link>
로 링크된.css
파일 내의@import
-
브라우저
의 기본Css
명시도
Css
의 스타일 선언 시 선택자에 따라 가중치가 측정되고
이 가중치의 합산
이 스타일 적용에 반영되며 선택자의 조합
의 합계
로 적용됩니다.
가중치 계산은 아래와 같이 합니다.
선택자 | 점수 | 예시 |
---|---|---|
!important |
무한점 | position : relative !important; |
inline |
1000점 | <h1 style='background-color: black'>인라인</h1> |
id 선택자 |
100점 | #id{} |
class 선택자 |
10점 | .class{} |
가상 클래스 선택자 |
10점 | .class:hover{} |
가상 요소 선택자 |
10점 | .class::after{} |
Attribute 선택자 |
10점 | input[type]{} |
태그 선택자 |
1점 | div{} |
전역 선택자 |
0점 | *{} |
상속 |
X점 |
이 중 !important의 경우 앞선 모든 명시도와 중요도를 무시하고 style이 적용되는데요
이러한 경우 라이브러리의 style을 무시할 수 있고, 재정의 하는 유일한 방법은 다른 !important를 적용하는 방법 뿐이라 사용시 주의 하셔야합니다.
참고용으로 이러한 선택자 구분을 할 수 있는 Specificity Calculator을 남기겠습니다.
코드가 작성된 순서
우선순위의 마지막인 코드가 작성된 순서
입니다.
마지막에 언급드리는 이유는 동일한 선택자를 중복해서 작성하는 경우에 적용되는 요소이기 때문인데요
스타일을 중복해서 여러군데요 작성되면 코드의 유지보수,확장성 등이 떨어지기 때문입니다.
차치하고, 코드가 작성된 순서가 더 나중에 작성된
코드
를 우선적
으로 적용합니다.
p {
color : blue; /* 적용 X */
}
p {
color : red; /* 적용 O */
}
상속(inheritance)
Css
Style
을 작성하다 보면 "적용한적 없는 스타일이 적용되어 있거나"
, "원치 않게 자식 요소에 반영된 스타일"
등을 만날 수 있는데요
이는 부모의 요소에서 설정된 일부 Style
들이 자식요소에 의해 상속
되어서 그렇습니다.
하지만 이런 상속
은 모든 요소에 적용되지않습니다.
적용되는 대표적인 속성
들은
color
, font
, visibility
, opacity
, line-height
, text-align
, white-space
….
등이 있습니다.
See the Pen 1 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen.
상속제어하기
이러한 상속은 4가지의 특수 범용 속성
값을 제공합니다.
자동으로 상속되지 못하는
다른 속성
에 해당 속성값
을 부여하여 상속
을 받을 수 있습니다.
속성값 | 설명 |
---|---|
inherit |
부모의 요소로부터 상속받습니다. |
initial |
브라우저의 기본값을 사용 |
unset |
속성이 자연적으로 상속되면 inherit, 그렇지않으면 initial으로 동작 |
revert |
현재 엘리먼트에 선언 된 css 속성을 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌립니다. |
See the Pen 2 by upupxlhb-the-styleful (@upupxlhb-the-styleful) on CodePen.