모던 CSS, 기본에서 실무까지

Grid·Container Query·Cascade Layer·접근성·시각 회귀

StudioBoard를 고치며 cascade, layout, responsive component, 접근성과 성능을 출시 기준으로 익힌다.

상태: 출간 후보 웹교정쇄 · 자동 QA 통과 · 브라우저·접근성 감수 대기 · 40개 장

이 책은 CSS 속성을 가나다순으로 외우게 하지 않는다. 같은 StudioBoard 프로젝트를 망가뜨리고 고치면서 브라우저가 왜 그렇게 그렸는지 설명한다. 입문자는 HTML과 선택자부터 시작하고, 실무자는 cascade 계약·컴포넌트 적응·브라우저 지원·품질 게이트까지 완주한다.

확인일은 2026-08-14다. CSS에는 단일한 “CSS 4”가 없다. 모듈별 표준 상태와 브라우저 구현이 다르므로 W3C CSS Snapshot, Web Platform Baseline, MDN 호환표를 함께 본다. Baseline Newly available은 최신 브라우저 공통 지원을 뜻할 뿐, 오래된 사내 기기까지 자동 지원한다는 뜻이 아니다.

목차

1. 1장. CSS가 해결하는 문제
2. 2장. 실습 환경과 DevTools
3. 3장. 선택자와 상태
4. 4장. Cascade와 명시도
5. 5장. Cascade Layers
6. 6장. 상속과 사용자 정의 속성
7. 7장. Box Model과 크기
8. 8장. 정상 흐름과 Formatting Context
9. 9장. Flexbox를 선택하는 기준
10. 10장. Grid를 선택하는 기준
11. 11장. Subgrid
12. 12장. Position과 Stacking Context
13. 13장. 반응형 설계와 Media Query
14. 14장. Container Query
15. 15장. Logical Properties와 국제화
16. 16장. 색과 현대 색 공간
17. 17장. 타이포그래피
18. 18장. 이미지와 미디어
19. 19장. Form과 사용자 상태
20. 20장. `:has()`와 `@scope`
21. 21장. CSS Nesting
22. 22장. Anchor Positioning
23. 23장. Animation과 View Transition
24. 24장. 점진 향상과 `@supports`
25. 25장. CSS Architecture
26. 26장. 접근성 품질 게이트
27. 27장. 성능과 Core Web Vitals
28. 28장. 브라우저 호환과 Baseline
29. 29장. 테스트와 시각 회귀
30. 30장. 완성 화면 해부
31. 31장. 실무 트러블슈팅 12선
32. 32장. 시니어 Capstone과 출간 검수
33. 33장. Cascade를 DevTools에서 증명한다
34. 34장. Container Query를 Component 계약으로 쓴다
35. 35장. Subgrid와 Intrinsic Size를 함께 본다
36. 36장. Popover·Anchor와 Top Layer를 안전하게 쓴다
37. 37장. View Transition을 Navigation 계약으로 만든다
38. 38장. Visual Regression을 상태 Matrix로 만든다
39. 39장. CSS Incident와 Release Day
40. 40장. Design Token을 변경 가능한 API로 운영한다