1. 개요
요소의 상속되는 속성에 값이 지정되지 않은 경우 부모 요소의 CSS 속성을 얻는다.
상속되는 속성은 주로 글자, 텍스트 관련 요소이다.
color, font, line-height, visibility, cursor, list-style 등
반면 상속되지 않는 속성은 주로 레이아웃, 박스 모델 관련 요소이다.
margin, padding, border, background, width, height, display, position, flex, grid 등
2. 상속 제어 키워드
상속을 강제로 제어할 수 있는 키워드가 있다.
inherit: 부모의 값을 상속시킴
initial: 속성을 기본값으로 되돌림
unset: 상속 가능한 속성이면 inherit, 아니면 initial
revert: 브라우저의 기본 스타일 또는 사용자 스타일로 되돌림
3. CSS의 @ 규칙
@로 시작하는 CSS문이다.
CSS가 어떻게 동작해야 하는지를 정의하는 지시문이다.
3.1. 그룹 / 삽입 규칙
다른 CSS 파일을 불러오거나 파일 자체의 문자 인코딩·네임스페이스를 정의한다.
코드 재사용, 다국어 처리, XML·SVG 환경 지원에 쓰인다.
@import, @charset, @namespace 등
3.2. 조건부 규칙
특정한 조건(화면 크기, 브라우저 지원 여부, 스타일 계층 등)에 맞을 때 스타일을 적용한다.
반응형 디자인, 기능 지원 여부 대응, 스타일 우선순위 제어에 쓰인다.
@media, @supports, @layer 등
3.3. 정의 규칙
새로운 리소스나 규칙을 직접 정의한다.
웹 폰트 사용, 애니메이션 동작 지정에 쓰인다.
@font-face, @keyframes 등
3.4. 환경 규칙
특정 매체나 환경(인쇄, 사용자 정의 목록 등)에 맞게 스타일을 적용한다.
인쇄 페이지 레이아웃이나 커스텀 리스트 스타일에 쓰인다.
@page, @counter-style 등
3.5. 요약
조건부 규칙 -> 언제 적용할지
그룹화 / 삽입 규칙 -> 어디서 가져올지, 기본 설정
정의 규칙 -> 무엇을 새로 만들지
환경 규칙 -> 어디에 맞게 꾸밀지
3.6. (번외) 중첩 규칙
CSS에 새롭게 도입된 선택자를 중첩해서 작성할 수 있게 해주는 규칙이다.
SCSS, Less 같은 CSS 전처리기의 기능인데 새롭게 지원되기 시작했다.
기존 4가지 분류에 포함되지 않는 단순 CSS 작성 문법을 확장한 것이다.
두 가지 문법을 지원한다.
/* 1. & 기호 사용 */
.card {
color: black;
& h2 {
font-size: 20px;
}
& .highlight{
background: yellow;
}
}
/* 전개하면 다음과 같다. */
.card {
color: black;
}
.card h2 {
font-size: 20px;
}
.card.highlight {
background: yellow;
}
/* 2. @nest 사용(명시적 중첩 표시) */
.card {
@nest h2 & {
font-weight: bold;
}
}
/* 전개하면 다음과 같다. */
h2 .card {
font-weight: bold;
}중첩 규칙의 필요성
CSS 구조를 더 이해하기 쉽게 만든다.
요소 / 컴포넌트 단위로 스타일을 논리적으로 묶을 수 있게 된다.
간결한 문법 작성이 가능하다.
개인적으로는 두 번째가 주 목적이고 나머지는 개인차가 있는 것 같다.