수업 1레이아웃을 위한 Flexbox: 컨테이너 속성 (display:flex, flex-direction, justify-content, align-items), 아이템 속성 (flex, order, align-self)Flexbox를 강력한 1차원 레이아웃 시스템으로 배웁니다. 컨테이너와 아이템 속성, 주축과 교차축 정렬, 래핑, 순서, 유연한 크기를 이해하여 반응형 네비게이션 바, 카드, 일반 레이아웃을 구축하세요.
Enabling flex context with display:flexMain axis vs cross axis fundamentalsflex-direction, flex-wrap, and flex-flowjustify-content and align-items alignmentalign-self and ordering individual itemsUsing flex shorthand for flexible widths수업 2선택자: class, id, element, 자손, 자식, 속성, 가상 클래스 (:hover, :focus) 및 가상 요소 (::before, ::after)필요한 요소를 정확히 타겟팅하기 위해 핵심 선택자 유형과 조합 방법을 탐구하세요. 클래스, ID, 요소 선택자, 자손 및 자식 관계, 속성, 가상 클래스, 가상 요소로 세밀한 스타일링을 배웁니다.
Element, class, and id selectors in practiceGrouping and combining multiple selectorsDescendant, child, sibling, and combinatorsAttribute selectors for stateful UI stylingState pseudo-classes like :hover and :focusPseudo-elements ::before and ::after for decoration수업 3CSS 구성: 외부 CSS 파일, import, 모듈러 구조, 주석, 명명 패턴 (BEM 기본)외부 스타일시트, import, 모듈러 구조를 사용하여 유지보수 가능한 프로젝트를 위한 CSS를 구성하세요. 명명 규칙, BEM 기본, 효과적인 주석으로 스타일을 확장 가능하고 읽기 쉽게 유지하세요.
Linking external CSS files to HTMLWhen and how to use @import carefullySplitting styles into logical modulesCommenting conventions and documentationBEM naming: blocks, elements, modifiersAvoiding overly specific or fragile selectors수업 4CSS 구문과 캐스케이드: 규칙 세트, 특이성, 상속, !important 및 소스 순서CSS 구문, 캐스케이드가 충돌을 해결하는 방법, 특이성, 상속, 소스 순서, !important 상호작용을 이해하세요. 어떤 규칙이 이기는지 예측하고 유지보수 가능하고 예측 가능한 결과를 위해 스타일을 구성하세요.
Anatomy of a CSS rule: selectors and declarationsValid property names, values, and unitsHow the cascade resolves conflicting rulesSpecificity calculation and common pitfallsInheritance rules and when values propagateUsing !important and managing source order수업 5미디어 쿼리를 사용한 반응형 레이아웃: 브레이크포인트, 모바일 우선 접근, 네비게이션과 콘텐츠 스태킹을 위한 일반 패턴미디어 쿼리와 모바일 우선 접근으로 반응형 레이아웃을 구축하세요. 브레이크포인트 정의, 타이포그래피와 간격 조정, 전화, 태블릿, 데스크톱에서 작동하는 네비게이션과 콘텐츠 스태킹 패턴을 만드세요.
Mobile-first vs desktop-first strategiesWriting basic min-width media queriesChoosing and managing layout breakpointsResponsive typography and spacing scalesStacking and reflowing navigation menusTesting responsive behavior across devices수업 6표시와 위치 지정: 표시 유형 (block, inline, inline-block), position (static, relative, absolute, fixed), float 기본 및 클리어링display와 positioning이 레이아웃 동작을 결정하는 방법을 배웁니다. block, inline, inline-block 요소 비교 후 static, relative, absolute, fixed positioning, 레거시 및 유틸리티 레이아웃을 위한 float 기본과 클리어링을 탐구하세요.
Block, inline, and inline-block differencesControlling visibility with display and opacityStatic and relative positioning basicsAbsolute and fixed positioning use casesFloat behavior and common layout issuesClearing floats with clearfix techniques수업 7박스 모델 기본: 콘텐츠, 패딩, 테두리, 마진, box-sizing 및 box-sizing: border-box 사용모든 요소가 공간을 차지하는 방식을 정의하는 CSS 박스 모델을 마스터하세요. 콘텐츠, 패딩, 테두리, 마진, 전체 크기로 조합되는 방법, box-sizing: border-box가 레이아웃을 단순화하고 오버플로 문제를 방지하는 방법을 배웁니다.
Content box and intrinsic element sizePadding for inner spacing and click targetsBorders, outlines, and visual separationMargins, collapsing margins, and spacingCalculating total box size in layoutsUsing box-sizing: border-box consistently
