CSS: 웹을 스타일링하는 언어
CSS는 웹 페이지의 모든 시각적 세부 사항을 제어합니다 — 색상, 레이아웃, 간격, 애니메이션, 반응형 디자인. 단순한 프레젠테이션 레이어에서 출발해 완전한 디자인 시스템 언어로 성장했으며, container queries, @layer, logical properties, Houdini API 같은 최신 기능들이 개발자에게 렌더링에 대한 세밀한 제어를 제공합니다. 이 트랙은 첫 선택자 작성부터 대규모 프로덕션 코드베이스에 사용되는 확장 가능한 디자인 시스템 구축까지 CSS의 전체 범위를 다룹니다.
학습 내용
문법, 선택자, 색상, 타이포그래피부터 시작한 후 박스 모델, display 속성, positioning에 대한 확실한 이해를 구축합니다. 이후 표준 및 고급 레이아웃을 위한 Flexbox와 CSS Grid를 다루고, 반응형 디자인과 media queries를 적용하며, 유지보수 가능한 테마를 위해 CSS 변수, custom functions, design tokens를 사용합니다. transitions, keyframe animations, transforms, filters, blend modes, dark mode — 그리고 Sass, PostCSS, CSS-in-JS 패턴의 최신 도구도 다룹니다. 트랙은 BEM, specificity와 cascade, container queries, @layer cascade layers, CSS Houdini, 성능을 다루는 CSS 아키텍처로 마무리됩니다.
학습 경로
40개 강의가 A1부터 C1까지 아우릅니다. A1과 A2 초급 강의는 기초를 확립합니다 — 선택자, 박스 모델, pseudo-classes, pseudo-elements, units. B1 강의는 Flexbox, Grid, 반응형 디자인, 애니메이션, DevTools를 활용한 디버깅, CSS functions을 다룹니다. B2 강의는 고급 Flexbox와 Grid, Sass, PostCSS, CSS-in-JS, design tokens, CSS Shapes, logical properties, container queries, CSS Layers로 수준을 높입니다. 3개의 C1 강의 — CSS Houdini, CSS Performance, CSS Future — 는 플랫폼의 최첨단을 다룹니다.
작동 방식
각 강의는 실시간 피드백과 함께 기본 제공 에디터에서 직접 완료하는 짧고 집중된 강의로 나뉩니다. 막힐 때마다 AI 튜터를 이용할 수 있으며, 진행 방식은 의도적으로 단계별이어서 각 개념이 다음 개념이 소개되기 전에 이전 개념을 강화합니다.