1
준비 단계: 스타일 역할 분리
카드에 들어갈 데이터 구조, 반복 렌더링 방식, 빈 이미지 대체값을 먼저 정합니다.
반응형 카드 목록(Responsive Card List)
2
레이아웃 기반 전역 스타일 설정 (index.css)
브라우저 기본 여백, box-sizing, 폰트, 배경색을 전역에서 맞춰 카드 컴포넌트가 같은 시작 조건으로 렌더링되게 합니다.
전역 기본값
3
Styled-components를 사용한 컨테이너
CardList.js에서 카드 목록 전체를 감싸는 컨테이너를 Styled-components로 만들고, 반응형 레이아웃을 구현합니다.
인라인 스타일링