joowon-jang / basic-ui

웹카페 (UI 제작 실습)

CSS 학습 주제

• 텍스트 및 글꼴
• 박스모델과 box-sizing
• 선택자 (Selector)
• 캐스케이드 (Cascading)
• 상속 (Inheritance)
• 사이즈 단위 (Units)
• Block VS Inline
• [] Float
• [] Position
• [] Flex
• [] Gid
• 논리 특성
• 유사 요소(Pseudo-elements), 유사 클래스(Pseudo-classes)
• 그림자 (Shadow)
• [] 함수 (Function)
• 배경 및 그래디언트
• [] 마스크 이미지
• 애니메이션 (Animation)
• [] 화면전환(Transition)
• [] 필터와 혼합모드
• 목록
• 숨김 콘텐츠 (Screen Reader Only)
• [] 포커스 스타일링 (:focus-visible, :focus-widthin)
• 변수 (Custom Properties)
• 중첩 (Nesting)
• 오버플로우
• 반응형 iframe(aspect-ratio)
• [] 스프라이트(Sprite) 배경이미지
• [] SVG 스프라이트
• [] 다크 모드 (prefer-color-scheme)
• 동작 줄이기 (prefer-reduced-motion )

5월 2일

• 스타일 시트 연결 (Normalize, Reset)
• main.css
• HTML 기본 구조 (헤더...푸터 5단)
• width, inline-size (논리특성)
• border, padding, margin (기본 박스모델)
• 선택자 그룹핑 (선택자, 선택자 ...)
• 변수(Custom Property)
• 플렉스 박스 기초

5월 3일

• box-sizing
• flex container / flex items
• justify-content 속성
• order 속성
• float / clear
• display: flow-root
• 레이아웃을 위해 margin 활용
• 구조 선택자
• float 요소 안에서 float 요소로 정의하기 ( order 속성)
• border-radius
• postion 속성 (relative, absolute)