CSS
언어 및 기초 · 4단계 · 28개 학습 단위
시리즈 목표
스타일 충돌과 배치 제약을 계산값으로 설명하고 반응형·접근성·렌더 비용을 함께 검증합니다.
선수 지식
HTML 구조
실습 방식과 제공 범위
학습 단위는 날짜가 아닙니다. 설명과 과제를 읽고, 완료 조건을 확인한 뒤 다음 단위로 이동하세요. 각 단위의 예제를 출발점으로 삼아 변수를 바꾸고 결과를 관찰합니다. 내장 실행 예제와 별도 환경이 필요한 과제를 구분해서 표시합니다. 예제를 여는 것만으로 학습을 완료한 것으로 처리하지 않습니다.
기존 단위 ID와 필기는 유지됩니다. 기존 01·02·03 예제는 확장된 학습 순서의 1·14·28번째에 연결되므로 주소의 숫자와 화면의 학습 순서가 다를 수 있습니다.
학습 경로
1단계 · Cascade와 크기 계산
- 01. Cascade와 레이아웃 — 편집 가능한 예제
- 02. 선택자와 우선순위 — 편집 가능한 예제
- 03. 상속과 초기화 — 편집 가능한 예제
- 04. 박스 모델과 실측 크기 — 편집 가능한 예제
- 05. 단위와 유동 글자 크기 — 편집 가능한 예제
- 06. 일반 흐름과 마진 상쇄 — 편집 가능한 예제
- 07. 크기 제약과 overflow — 편집 가능한 예제
2단계 · Flex·Grid와 반응형
- 08. Flex 축과 정렬 — 편집 가능한 예제
- 09. Flex 성장과 축소 — 편집 가능한 예제
- 10. Grid 트랙과 간격 — 편집 가능한 예제
- 11. 자동 반복과 카드 수 — 편집 가능한 예제
- 12. 배치 영역과 소스 순서 — 편집 가능한 예제
- 13. 미디어 쿼리와 중단점 — 편집 가능한 예제
- 14. 반응형과 모션 — 편집 가능한 예제
3단계 · 상태·위치·접근성
- 15. 컨테이너 쿼리와 재사용 — 편집 가능한 예제
- 16. 논리 속성과 쓰기 방향 — 편집 가능한 예제
- 17. 타이포그래피와 줄 길이 — 편집 가능한 예제
- 18. 색상과 대비 — 편집 가능한 예제
- 19. 포커스와 입력 상태 — 편집 가능한 예제
- 20. 위치 지정과 기준 블록 — 편집 가능한 예제
- 21. 쌓임 맥락과 겹침 — 편집 가능한 예제
4단계 · 모션·토큰·렌더링 검증
- 22. 전환과 중간 상태 — 편집 가능한 예제
- 23. 키프레임과 재생 제어 — 편집 가능한 예제
- 24. Cascade layers로 규칙 정리 — 편집 가능한 예제
- 25. 사용자 정의 속성과 테마 — 편집 가능한 예제
- 26. 레이아웃과 페인트 관찰 — 편집 가능한 예제
- 27. contain과 오프스크린 콘텐츠 — 편집 가능한 예제
- 28. 토큰과 렌더링 관찰 — 편집 가능한 예제
통합 프로젝트와 제출물
반응형 학습 카드 테마와 동일 조건의 width·transform 성능 비교 기록
구현 코드와 실행 방법, 기준 조건과 변경 조건의 기록, 실패 사례와 복구 방법을 함께 남기세요. 측정하지 않은 성능과 수행하지 않은 테스트는 결과로 기재하지 않습니다.