CSS 모듈 과제

CSS 를 배우며 주제마다 하나씩 만든 과제물이다. 같은 시기의 슬랙 메시지, 드리블 카드, 이커머스 카드는 따로 올렸고, 나머지를 여기 모았다. 그때 README 에 적은 메모는 모듈 연습에서 배운 것에 있다.

과제 11개

float — 카드 목록: float: left 로 사용자 카드를 흘린다.
float → flex — 메뉴 (float), 같은 메뉴 (flex): float 로 짠 것을 flex 로 다시 짠다.
flex — 사용자 상태 카드: justify-content: space-between 과 100vh 가운데 정렬.
position — 사용자 상태 (position), 상품 캐러셀, 구독 모달: absolute 와 fixed 를 transform 으로 가운데 맞춘다.
background — 에어비앤비 방 카드: 배경 이미지와 가상 요소로 별점·하트 아이콘을 얹는다. 위 화면이 이것이다. 메모는 배경 이미지와 가상 요소.
미디어쿼리 — 반응형 랜딩: 모바일부터 만들고 넓은 화면에서 차이 나는 값만 바꾼다. 창 너비를 바꿔 보면 된다.
transition — transition: 메모는 transition 연습.
typography — typography: 메모는 typography 연습.
animation — animation: @keyframes 로 움직인다.

background, box, float-box, float-menu, position, transition. 속성 하나를 눈으로 확인하려고 만든 한 화면짜리 파일들이다.

글꼴은 Google Fonts 에서 받으므로 오프라인에서는 기본 글꼴로 보인다.