oris9
[html/css] CSS의 Cascading과 우선순위에 대해 이해하기 본문
Cascading Style Sheets 의 `Cascading` 이란,
폭포처럼 문서의 위에서 아래로 흐르면서 스타일이 적용되는 css의 방식을 설명하는 것이다.
기본적으로, 스타일이 중복될 때는 가장 아래쪽의 스타일이 적용되게되는 것이다.
이러한 css에는 중요한 두가지 원칙이 있다.
1. 스타일은 상속(Inheritance)된다.
부모 요소에서 정의된 스타일 속성들이 자식 요소에게 상속된다.
기본적으로 자식요소에게 상속되지만, 상속되지 않는 요소들과 속성들이 존재한다.
2. 스타일에는 우선순위(Specificity)가 존재한다.
실제 css 에는 단순한 순서만을 고려해 스타일을 적용하지 않는다.
중요도, 명시도, 코드순서를 통해 우선 순위를 정하고 그 우선 순위에 맞게 스타일을 적용시킨다.
`중요도`는 스타일이 어디에서 선언되었는지를 나타낸다.
스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘며,
사용자 > 작성자 > 사용자 도구 순으로 중요도를 높게 측정한다.
이때, 사용자 스타일시트는 사용자가 웹브라우저 확장기능 등을 통해 지정하는 스타일이다.
작성자 스타일 시트가 우리가 작성하는 스타일시트를 말하는데,
이때 <head> 내부의 <style>이 <link>로 연결된 CSS 파일보다 우선순위가 높게 측정된다.
`명시도`는 선택자에 따른 우선순위 차이이다.
더 명시적으로 요소를 선택해 스타일을 정할수록 더 우선순위를 높게 측정해 스타일을 적용시킨다는 이야기이다.
인라인 > id > class > 태그 순으로 우선 순위를 측정하며,
위의 표와 같이 점수를 환산해 대략적인 명시도를 확인할 수 있다.
(정확한 명시도 값은 아니다. 예를 들어, tag 10개가 class 1개와 동일하게 계산되지는 않는다.)
`코드순서`
마지막으로 , cascading 시트임으로 코드 순서를 파악해 가장 아래에서 적용된 스타일을 우선시해 적용시킨다.
`!important 속성`
!important 키워드를 입력해, 우선순위를 가장 높여 스타일을 적용시킬 수 있다.
** 참고, 기본적으로 인라인스타일과 !important 속성은 남용하지 않아야한다.
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 어려운 css 클래스명 짓기 - BEM을 공부해보자 (0) | 2024.03.26 |
|---|---|
| [html/css] HTML5 시멘틱 태그, 웹표준, WAI-ARIA (0) | 2024.03.12 |
| [html/css] CSS에서 position에 대해 이해하기 (0) | 2024.03.10 |
| [html/css] 웹폰트 최적화가 필요한 이유와 방법에 대해 알아보기 (0) | 2024.03.03 |
| CSS 변수 선언, 스코프, 제어(자바스크립트) (0) | 2024.02.04 |
