전체 배경, 중앙 정렬, 기본 폰트처럼 앱 전체에 걸친 규칙을 먼저 세웁니다.
profile card
프로필 카드 스타일링
실습에서는 하나의 카드 UI 안에서도 전역 레이아웃, styled-components 컨테이너, CSS 모듈 세부 스타일이 서로 다른 책임을 가집니다.
카드 묶음의 방향, 간격, 반응형 전환을 컴포넌트 단위 스타일로 표현합니다.
개별 프로필 카드의 이미지, 이름, 설명, 버튼 스타일을 로컬 클래스에 묶습니다.
이미지 크기와 비율이 카드마다 일관적인지 본다.
카드 세부 클래스가 다른 컴포넌트에 새지 않는지 확인한다.
카드 열 수와 간격이 작은 화면에서 자연스럽게 바뀌는지 본다.
세 가지 스타일링 방식의 장단점을 실습 코드에서 구분한다.