00-foundations — CSS의 기초
모든 CSS 규칙은 결국 **“어떤 박스가, 어떤 컨텍스트 안에서, 어떤 단위로 측정되어, 어떤 변수의 결과로 그려지느냐”**의 4축으로 환원된다. 이 챕터는 그 4축의 정의를 깐다.
한 문장 답 (Pyramid Top)
CSS는 화면을 사각형 박스의 트리로 본다. 박스가 무엇으로 채워지고(
box-model), 어떤 흐름으로 배치되며(display), 어떤 자(units)로 잰 값을 받고(custom properties), 어떤 좌표계(position context)에 속하는가 — 이 다섯 개념이 정해지면 그 위의 모든 레이아웃·캐스케이드는 조합일 뿐이다.
챕터 지도 (Mermaid)
Why — 왜 별도의 챕터인가
상위 챕터(레이아웃·플렉스·반응형)에서 일어나는 “이상한 CSS 버그”는 거의 모두 이 챕터의 기초가 흔들려서 생긴다.
width: 100%를 줬는데 가로 스크롤이 생긴다 → 박스 모델 (box-sizing)- 부모를 감싸지 않는
float자식 → BFC 부재 (display: flow-root) - iOS Safari에서
100vh가 잘린다 → 모던 viewport 단위 부재 (dvh) - 다크 모드를 추가했더니 색상 200개를 다 고쳐야 한다 → CSS 변수 부재
rem을 줬는데 컴포넌트마다 크기가 다르다 →em/rem누적 함정
이 챕터는 CSS가 측정하고 배치하는 그 “자(ruler)” 를 정의한다. 자가 어긋나면 그 위에 그린 그림은 전부 어긋난다.
How — 어떻게 읽나
다음 5개 문서를 순서대로 읽으면 약 50분 걸린다. 1→5로 의존성이 누적된다.
| # | 파일 | 읽는 데 | 핵심 키워드 |
|---|---|---|---|
| 01 | 01-box-model | 12분 | content/padding/border/margin, box-sizing: border-box, margin collapse |
| 02 | 02-display | 10분 | block, inline, inline-block, flex, grid, contents, flow-root |
| 03 | 03-units | 12분 | px, rem, em, %, vh/dvh/svh/lvh, ch, cqi/cqw |
| 04 | 04-custom-properties | 10분 | --var, var(), inheritance, @property, scope |
| 05 | 05-position-context | 8분 | BFC, IFC, stacking context, containing block |
의존성: 02는 01의 박스를 가정한다. 03은 모든 길이 속성의 단위로 쓰인다. 04는 03을 추상화한다. 05는 01·02를 합쳐 컨텍스트를 정의한다.
What — 한 페이지 요약
| 문서 | 한 줄 결론 |
|---|---|
| 01 | 모든 요소는 4겹의 박스다. border-box가 2012년 이후의 사실상 표준이며, * { box-sizing: border-box }는 거의 모든 리셋의 첫 줄이다. |
| 02 | display는 외부 흐름과 내부 흐름의 두 차원이다. 모던 display: flex / grid / flow-root로 BFC를 만들고 clearfix를 폐기한다. |
| 03 | 단위는 측정의 기준을 정한다. rem은 루트 폰트 기반, dvh는 동적 뷰포트, cqi는 컨테이너 인라인 — 무엇을 기준 삼느냐가 디자인 시스템의 운명을 가른다. |
| 04 | CSS 변수는 런타임 상속 토큰이다. @property로 타입·기본값·상속을 선언하면 트랜지션·연산이 가능해진다. |
| 05 | Position context는 좌표계의 출발점이다. BFC/IFC, stacking context, containing block — 이름이 다른 4개의 “내 부모는 누구인가” 시스템이 공존한다. |
What-if — 이 챕터의 한계
- 이 챕터는 메커니즘만 다룬다. 어떤 값을 선택해야 하는지(디자인 토큰 설계, 반응형 전략)는
07-responsive와08-architecture에서. display: flex의 자식 정렬·축·gap은 여기서 다루지 않는다 →03-flexbox-grid.- 색상 단위(
#fff,hsl(),oklch())는 시각 효과 영역이라05-color-visual로 분리된다. - 캐스케이드와 specificity로 어떤 값이 이기는지는
01-cascade의 주제다 — 이 챕터는 이긴 후의 값이 어떻게 그려지는지를 다룬다.
Insight — 한 단락 이야기
“박스는 1995년 CSS1에 처음 등장했지만, 30년이 지나도 우리는 여전히 박스 모델로 싸운다”
1995년 Håkon Wium Lie의 CSS1 초안에는 이미
margin·padding·border가 있었다. 1998년 IE5는 W3C와 다른 박스 모델(width에 padding 포함)을 채택했고, 2004년까지 웹 개발자들은 두 모델 사이에서 hack을 써야 했다. 2012년 Paul Irish가 “* { box-sizing: border-box }를 모든 프로젝트의 첫 줄로” 라고 트윗한 뒤, IE5가 옳았다는 것이 사실상 표준화됐다. CSS의 기초란 결국 이런 역사다 — 표준이 늦게 따라오고, 사실상 표준이 먼저 자리잡는다.
한 단락 요약
CSS는 박스(
01) · 흐름(02) · 단위(03) · 변수(04) · 컨텍스트(05)의 5개 기초 위에 올라간다. 이 챕터를 끝내면 “왜 이 레이아웃이 깨졌나”라는 질문 대신 *“어느 기초의 가정이 어긋났나”*라는 질문을 던지게 된다. 다음 챕터(01-cascade)는 이 기초들이 충돌할 때 누가 이기는지를 다룬다.