티스토리 뷰
우리 퍼블리싱을 배울 때 캐스케이딩에 대해 직접적으로 알려주는 사람은 잘 없다. 때문에 간과하기 쉽지만 CSS에도 작성 규칙이 존재한다는 사실을 꼭 알고 있어야 한다. 하나의 프로젝트에 여러 작업자가 협업하는 경우가 많기 때문에 이러한 기본적인 규칙을 지키면서 작업해야 효율적인 작업이 가능하다. 잘 알고 있겠지만 큰 프로젝트일수록 더 많은 퍼블리셔와 디자이너, 개발자와의 협업으로 진행된다. 작업의 결과만 중요한 게 아니라 과정도 중요하다는 사실을 염두에 두자.
CSS 구체성
요소를 선택할 때 더 구체적으로 선언된 선택자가 우선적으로 적용된다. 이 규칙을 CSS 구체성(Specificity Calculator)이라고 하며, 이는 수치화되어 값이 클수록 구체성이 높고 할 수 있다.
CSS 구체성 계산
구체성 값이 클수록 우선 적용한다.
좌측 값부터 비교하며, 좌측 값이 높을수록 구체성이 더 높다.
0, 0, 0, 0 : 전체 선택자(*)
1, 0, 0, 0 : HTML 내 Inline 스타일
0, 1, 0, 0 : 선택자에 있는 모든 id 속성 값
0, 0, 1, 0 : 선택자에 있는 모든 class 속성 값, 가상 클래스, 기타 속성 값
0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
(>, + 등의 조합자는 구체성에 영향을 주지 않는다.)
예시
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- 1, 0, 0, 0 (inline-style) -->
<h1 id="tit1" class="tit" style="color:blue;">코딩 정복하기</h1>
</body>
</html>
/* 0, 0, 0, 0 */
* {color: red;}
/* 0, 1, 0, 0 */
#tit1 {color: red;}
/* 0, 0, 1, 0 */
.tit {color: red;}
/* 0, 0, 0, 1 */
h1 {color: red;}
/* 0, 0, 1, 1 */
h1.tit {color: red;}
/* 0, 0, 1, 2 */
body h1.tit {color: red;}
CSS 구체성 계산 예시
<!-- 1, 0, 0, 0 -->
<h1 id="tit1" style="color:red">코딩 정복하기</h1>
/* 0, 1, 0, 1 */
h1#tit1 {color:blue}
→ 코딩 정복하기
!important
!important의 경우 구체성 점수를 무시하고 우선적으로 적용된다. 때문에 유지보수를 위해 꼭 필요할 경우에만 쓰는 것이 좋다.
<!-- 1, 0, 0, 0 -->
<h1 id="tit1" style="color:red">코딩 정복하기</h1>/* 0, 1, 0, 1 */
h1#tit1 {color:blue !important}
→ 코딩 정복하기
CSS 구체성 순서 요약
!important > inline > id > class > element
CSS 상속
CSS 박스 모델의 속성은 부모의 속성이 자식으로 상속되지 않는다. 전체 선택자에 속성이 있을 경우, 상속된 부모의 속성은 구체성이 없으므로 전체 선택자의 속성이 우선적으로 반영된다.
<div>
<p id="txt">코딩 <em>완벽하게</em> 정복하기</p>
</div>
* {color: blue;}
div {color: green;}
p#txt {color: red;}
→ 코딩 완벽하게 정복하기
만약 전체 선택자에 지정된 속성이 없다면, 부모의 속성 중 구체성이 높은 속성이 우선적으로 반영된다.
<div>
<p id="txt">코딩 <em>완벽하게</em> 정복하기</p>
</div>
/* 0, 0, 0, 1 */
div {color: green;}
/* 0, 1, 0, 1 */
p#txt {color: red;}
→ 코딩 완벽하게 정복하기
캐스케이딩
캐스케이딩(Cascading)이란, CSS(Cascading Style Sheets)의 약자에서도 볼 수 있는데 CSS 우선순위에 따라서 스타일이 정해진다는 뜻이다. 우선순위는 중요도, 명시도(구체성), 코드 순서에 따라 정해진다.
<div>
<h1 id="tit1">코딩 정복하기</h1>
</div>
1. 구체성이 같은 동일한 요소의 경우, 코드 순서에 따라 스타일이 정해진다.
h1 {color: blue;}
h1 {color: red;}
→ 코딩 정복하기
2. 구체성이 다른 경우 코드 순서와 상관없이 구체성이 높은 순서에 따라 스타일이 정해진다.
/* 0, 1, 0, 1 */
h1#tit1 {color: blue;}
/* 0, 0, 0, 1 */
h1 {color: red;}
→ 코딩 정복하기
'CSS' 카테고리의 다른 글
| CSS → CSS 전처리기 → BEM → CSS Module → CSS in JS (0) | 2022.06.23 |
|---|---|
| [CSS] 여러 형태의 삼각형(세모) 그리는 방법 (5) | 2021.07.03 |
| [CSS] 박스 모델(box model) 그리고 박스 사이징(box-sizing) (0) | 2021.07.02 |
| [반응형웹] 모바일 퍼스트 CSS 작성하기 / 데스크탑 퍼스트 (3) | 2020.12.09 |
| [CSS] 가변 단위 em, rem 언제 사용해야할까? (0) | 2020.12.08 |