CSS3 고급 교육 과정

1. 모던 CSS와 CSS의 진화

• CSS3에서 모던 CSS로
• 현재 CSS 표준 및 브라우저 구현
• CSS 사양 및 브라우저 지원 이해
• 점진적 향상(Progressive enhancement)
• 기능 감지 및 우아한 저하(Graceful degradation)
• 모던 CSS 생태계 이해

2. 고급 셀렉터

• 고급 속성 셀렉터
• 구조적 의사 클래스(Pseudo-classes)
• :is()
• :where()
• :not()
• :has() 및 관계형 셀렉터
• 셀렉터 스펙시픽시티(Specificity)
• 대규모 프로젝트에서의 스펙시픽리티 관리
• 모던 셀렉터 모범 사례

3. 모던 색상 및 시각 효과

• RGB, HSL 및 모던 색상 함수
• color(), lab(), lch(), oklab(), oklch()
• 상대적 색상(Relative colors)
• 투명도 및 알파 채널
• 고급 그라데이션
• 선형, 원형, 원뿔형 그라데이션
• color-mix()
• 색상 보간(Color interpolation)
• CSS 필터 및 시각 효과
• 모던 테마링 및 색상 시스템

4. CSS 커스텀 프로퍼티 및 디자인 시스템

• CSS 변수 / 커스텀 프로퍼티
• 변수 및 폴백 값(Fallback values)
• 동적 테마링
• 컴포넌트 레벨 커스터마이징
• CSS를 통한 디자인 토큰(Design tokens)
• 라이트 및 다크 테마 생성
• var(), @property 및 타입화된 커스텀 프로퍼티 사용
• 유지보수 가능한 CSS 디자인 시스템 구축

5. CSS 네스팅 및 캐스케이드 관리

• 네이티브 CSS 네스팅
• 네스팅 구문 및 모범 사례
• CSS 네스팅 vs. 프리프로세서
• 캐스케이드 및 상속(Inheritance)
• @layer를 활용한 캐스케이드 레이어
• 세부 CSS 관리
• @scope 및 스코프 지정 스타일링 개념
• 예측 가능한 CSS 아키텍처 구축

6. Flexbox를 활용한 고급 레이아웃

• Flexbox 기본 사항 복습
• 메인 축(Main axis) 및 크로스 축(Cross axis)
• 고급 정렬(Alignment)
• 유연한 크기 지정(Flexible sizing)
• gap
• 랩핑(Wrapping) 및 오더(Ordering)
• 중첩된 Flexbox 레이아웃
• 일반적인 Flexbox 패턴
• Flexbox를 활용한 반응형 컴포넌트

7. 고급 CSS Grid

• Grid 기본 사항 복습
• 명시적(Explicit) 및 암시적(Implicit) 그리드
• 고급 트랙 사이징(Track sizing)
• minmax()
• auto-fit 및 auto-fill
• min(), max(), clamp()
• 그리드 영역(Grid areas)
• 반응형 Grid 레이아웃
• 복잡한 페이지 레이아웃
• CSS Subgrid
• 정렬된 컴포넌트 레이아웃을 위한 Subgrid 사용

8. 컨테이너 쿼리 및 컴포넌트 기반 반응형

• 뷰포트 미디어 쿼리만으로는 항상 충분하지 않은 이유
• 컨테이너 쿼리 개념
• container-type
• @container
• 컨테이너 쿼리 길이 단위(Container query length units)
• 컴포넌트 주도 반응형 디자인
• 컨테이너 쿼리 스타일 쿼리(Style queries)
• 재사용 가능한 반응형 컴포넌트 설계
• 컨테이너 쿼리 vs. 미디어 쿼리

9. 모던 반응형 디자인

• 모바일 퍼스트 디자인
• 반응형 브레이크포인트(Breakpoints)
• 플루이드 타이포그래피(Fluid typography)
• 플루이드 스페이싱(Fluid spacing)
• clamp()
• 모던 뷰포트 단위:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• 동적 뷰포트 고려 사항
• 컨테이너 상대 단위(Container-relative units)
• 반응형 이미지 및 미디어
• 불필요한 미디어 쿼리 감소

10. 로직 프로퍼티 및 국제화(Internationalization)

• 로직(Logic) vs. 물리(Physical) CSS 프로퍼티
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• 로직 사이징(Logical sizing)
• 쓰기 방식(Writing modes)
• 오른쪽에서 왼쪽(RTL) 레이아웃
• 국제적으로 적응 가능한 인터페이스 구축

11. 모던 타이포그래피

• 반응형 타이포그래피
• 가변 폰트(Variable fonts)
• 폰트 로딩 고려 사항
• font-size-adjust
• 플루이드 타이포 스케일(Fluid type scales)
• 텍스트 랩핑 및 오버플로(Text wrapping and overflow)
• text-wrap: balance
• text-wrap: pretty
• hyphens
• 모던 타이포그래피 모범 사례

12. 변환, 전환, 애니메이션

• 2D 및 3D 변환(Transformations)
• 전환(Transitions)
• 키프레임 애니메이션(Keyframe animations)
• 타임밍 함수(Timing functions)
• 애니메이션 구성(Composition)
• 변환 성능(Transform performance)
• 스크롤 기반 애니메이션(Scroll-driven animations)
• animation-timeline
• 뷰 타임라인(View-timeline) 개념
• 모션 접근성(Motion accessibility)
• prefers-reduced-motion
• 성능 고려 사항

13. 모던 CSS UI 기능

• 네이티브 CSS 다이얼로그 및 팝오버(Dialogs and popovers)
• 인터랙티브 UI 상태 스타일링
• :popover-open
• :modal
• :focus-visible
• :target
• 폼 상태 스타일링(Form-state styling)
• accent-color
• appearance
• field-sizing
• 모던 폼 컨트롤(Form controls)
• 접근 가능한 CSS-only 인터랙션 구축

14. 고급 CSS 함수

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• 상대적 색상 함수(Relative color functions)
• 플루이드 레이아웃을 위한 함수 조합
• 실용적인 반응형 디자인 패턴

15. CSS 프리프로세서

• CSS 프리프로세서 개요
• LESS
• 변수 및 믹신(Mixins)
• 스타일 네스팅
• 함수 및 연산(Operations)
• LESS vs. 모던 네이티브 CSS
• 프리프로세서가 여전히 유용한 경우
• 프리프로세서 기능을 네이티브 CSS로 마이그레이션

16. 디자인 및 접근성 고려 사항

• 모던 CSS 모범 사례
• 접근성 우선 스타일링(Accessibility-first styling)
• 키보드 포커스 상태(Keyboard focus states)
• :focus-visible
• 모션 감소(Reduced motion)
• 대비(Contrast) 및 색상 고려 사항
• 반응형 텍스트 및 콘텐츠
• 이미지 위 텍스트
• 접근 가능한 반응형 컴포넌트
• 점진적 향상(Progressive enhancement)

17. CSS 성능 및 유지보수성

• CSS 복잡도 감소
• 불필요한 스펙시픽리티 회피
• 유지보수성을 위한 캐스케이드 레이어
• 재사용 가능한 유틸리티 및 컴포넌트 패턴
• CSS 컨테인트먼트(Containment) 개념
• content-visibility
• 렌더링 및 레이아웃 성능
• 레이아웃 시프트(Layout shifts) 감소
• 대규모 CSS 코드베이스 정리
• 모던 브라우저 개발자 도구를 활용한 CSS 디버깅

18. 실용적 모던 CSS 프로젝트

참가자는 다음 요소들을 포함하여 반응형 모던 웹 인터페이스를 구축합니다.

• CSS Grid
• Flexbox
• Subgrid
• 컨테이너 쿼리
• CSS 네스팅
• 커스텀 프로퍼티
• 캐스케이드 레이어
• 모던 셀렉터
• 플루이드 타이포그래피
• 모던 뷰포트 단위
• 반응형 디자인
• 모던 색상 및 그라데이션
• 애니메이션 및 전환
• 접근성 고려 사항
• 성능 모범 사례