Frontend CSS Domain Knowledge Base
이 문서가 답하는 질문: CSS를 다룬다는 것은 정확히 무엇을 다룬다는 뜻인가? 작성: 2026-05-17 / 스타일: Minto Pyramid +
/explain(Why → How → What → What-if)
한 문장 답 (Pyramid Top)
CSS는 선언적 스타일 언어이지만, 우리가 실제로 다루는 것은 그 위에 쌓인 5개 레이어다 —
① Cascade ② Layout ③ Visual ④ Motion ⑤ Architecture. 이 도메인은 그 5개 레이어를 표준 명세(CSSWG), 사실상 표준(BP), 모던 패턴으로 정리한다.
Why — 왜 이 레포가 필요한가
CSS 도메인은 표준이 빠르게 진화하고 브라우저별로 지원이 갈라져서 한 책에 담기지 않는다.
- 버튼 하나를 그리려면
색공간(sRGB/P3) × 단위(rem/em/px) × 박스 모델 × 폰트 메트릭 × 포커스 링 × 호버 상태 × 다크 모드 × RTL이 동시에 맞아야 한다. - 페이지 레이아웃 하나는
flex/grid 선택 × intrinsic sizing × container query × :has × cascade layer × scope가 얽힌다. - 그리고 현실의 제품은 이 모든 것을 디자인 토큰·컴포넌트·테마 시스템으로 자동화해야 한다 (Tailwind, CSS-in-JS, Design Tokens).
이 레포는 그 모든 결정을 다음 한 가지 질문으로 환원한다: “이 스타일이, 어떤 브라우저에서, 어떤 캐스케이드 컨텍스트에서, 어떤 최종 값으로 적용되는가?”
How — 어떻게 정리했나
1) 책장 구조 (3층)
| 층 | 폴더 | 다루는 것 | 비고 |
|---|---|---|---|
| L1 기초 | 00-foundations, 01-cascade | CSS 자체, 값 결정 메커니즘 | 모든 스타일의 토대 |
| L2 도메인 | 02-layout, 03-flexbox-grid, 04-typography, 05-color-visual, 06-motion, 07-responsive | 레이아웃·타이포·색·모션·반응형 | 영역별 이론 |
| L3 합성 | 08-architecture | 토큰·BEM·Tailwind·CSS-in-JS·modern patterns | 대규모 시스템화 |
2) 문서 형식 (모든 챕터 공통)
각 문서는 다음 7-블록을 따른다 — /explain + Minto 합성:
1. 한 줄 답 (Pyramid Top)
2. Why — 왜 존재하는가, 어떤 문제를 푸는가
3. How — 어떻게 동작하는가, 핵심 메커니즘
4. What — 구체 사양·수치·필드·옵션
5. What-if — 잘못 쓰면 어떻게 깨지는가
6. Insight — 흥미로운 이야기·역사·반전
7. 요약 + Mermaid (필수)3) 챕터 인덱스 (10개)
| 챕터 | 다루는 것 | 핵심 키워드 |
|---|---|---|
00-foundations | 박스 모델·디스플레이·단위·CSS 변수 | box-sizing, rem/em, custom property |
01-cascade | Cascade·Specificity·Inheritance·@layer | origin, importance, layer, :where, !important |
02-layout | Flow·Position·Float·Sizing·logical | static/relative/absolute, sticky, inset, logical |
03-flexbox-grid | Flexbox·Grid·Subgrid·intrinsic sizing | flex, grid-template, subgrid, fr, minmax |
04-typography | Font·Text·Web Fonts·OpenType·variable | font-display, fluid, variable axis, line-height |
05-color-visual | Color spaces·Gradient·Filter·Effects | OKLCH, color-mix, backdrop-filter, mix-blend |
06-motion | Transition·Animation·Transform·View Transitions | @keyframes, will-change, prefers-reduced-motion |
07-responsive | Media·Container·:has·@scope·viewport | container query, dvh, has, scope, fluid type |
08-architecture | Tokens·BEM·Tailwind·CSS-in-JS | design tokens, utility, atomic, runtime/zero-runtime |
99-glossary | CSS 용어 사전 | 100~150개 항목 |
What — 이 레포에서 다루는 표준의 범위
- CSSWG 명세: CSS2.2, CSS Color 4, CSS Cascade 5/6, CSS Grid 2, CSS Containment 3, CSS Anchor Positioning
- WICG 제안:
@scope,:has(), View Transitions, scroll-driven animations - 사실상 표준: BEM, Tailwind CSS, CSS Modules, styled-components, vanilla-extract, Open Props
- 브라우저 호환성: 2024-2026 기준 Baseline (Chrome/Firefox/Safari 최근 2~3 버전)
What-if — 잘못 다루면
- Cascade 무지 →
!important남발 → 디자인 시스템 붕괴 (1번 챕터) - Layout 혼동 → flex와 grid를 잘못 선택 → 깨지는 반응형 (3번 챕터)
- 단위 오용 →
px고정 → 접근성·줌·다크모드 실패 (0번 챕터) - 모션 과용 →
will-change: transform남발 → 메모리 폭발, jank (6번 챕터) - 아키텍처 부재 → 토큰 없이 색상 200종 → 다크모드 추가 시 전면 재작성 (8번 챕터)
Insight — 왜 CSS는 늘 어렵다고 하는가
CSS는 두 가지 시간 축을 동시에 다룬다.
- 선언 시점의 캐스케이드: 어떤 규칙이 어떤 우선순위로 어떤 요소에 적용되는가 — 공간적 합성.
- 렌더링 시점의 layout/paint/composite: 같은 선언이 다른 컨텍스트(컨테이너, 뷰포트, 인쇄)에서 어떻게 다른 결과를 내는가 — 시간적 변환.
대부분의 “이상한 CSS 버그”는 이 둘이 만나는 지점에서 발생한다 — 캐스케이드는 맞는데 컨텍스트가 다르거나, 컨텍스트는 같은데 캐스케이드가 깨졌거나.
2020년 이후 CSS는 선언적이면서도 컴포지셔널해지는 방향으로 진화했다 — @layer로 캐스케이드를 코드로 모델링하고, @container로 컨텍스트를 코드로 질의하고, :has()로 부모를 자식으로 표현한다. 이는 CSS가 문서 스타일링 언어에서 컴포넌트 디자인 시스템 언어로 옮겨가는 흐름이다.
요약 + Mermaid
- CSS는 5개 레이어 — Cascade / Layout / Visual / Motion / Architecture.
- 각 레이어는 표준 + 브라우저 + 사실상 표준의 합으로 다룬다.
- 모든 문서는 7-블록을 따라 “답 먼저, 근거 나중”.
- 모던 CSS는 선언 + 컨텍스트의 두 축이 합쳐지는 방향.
다음 단계: 00-foundations부터 순서대로, 또는 99-glossary로 용어 점검.