CSS 전환, 변환, 이동 및 그리드 깊이 파헤치기 (GitHub 가이드 포함)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발 초보자 및 CSS 애니메이션, 레이아웃 최적화, Git 사용법을 배우고자 하는 개발자
핵심 요약
- transition: CSS 속성 변경 시 부드러운 애니메이션 효과 적용 (
transition: property duration timing-function delay;
) - transform: 요소의 스케일, 회전, 이동 효과 구현 (
transform: scale(1.05);
,translateX(20px);
) - CSS Grid: 반응형 레이아웃 구현 (
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
) - Git: 프로젝트를 GitHub에 업로드하기 위한
git init
,git add
,git commit
,git push
기본 명령어 사용
섹션별 세부 요약
1. **Yesterday's Project Recap (Product-Card)**
- 제품 카드 구성 요소: 카드 컨테이너, 이미지, 제목/가격, 구매 버튼
- 오늘의 목표: 애니메이션 추가, 레이아웃 개선, Git으로 프로젝트 업로드
2. **Transition**
transition
속성 사용:transition: property duration timing-function delay;
- 예시:
.card:hover { transform: translate(-0.5s); }
→ 호버 시 0.5초 동안 부드럽게 이동 - 애니메이션 적용 시
transition
속성 필수
3. **Transform & Translate**
transform: scale(1.05);
→ 카드 호버 시 5% 확대translateX(20px);
→ 요소를 X축으로 20px 이동transform
은scale
,rotate
,translate
등 다양한 효과 지원
4. **CSS Grid Layout**
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
→ 반응형 그리드 생성auto-fit
: 가능한 최대 열 수 자동 조정minmax(200px, 1fr)
: 최소 200px, 최대 1fr의 너비로 열 크기 조절
5. **Git Push Guide**
- 로컬에서 Git 초기화:
git init
,git add .
,git commit -m "Initial commit"
- GitHub에 레포 생성 후 연결:
git remote add origin
,git branch -M main
,git push -u origin main
결론
- CSS 애니메이션(
transition
,transform
,translate
)과 그리드 레이아웃을 활용해 반응형 디자인 구현 - Git으로 프로젝트를 GitHub에 업로드해 포트폴리오 관리
grid-template-columns
와auto-fit
을 사용해 모든 화면 크기에 맞는 레이아웃 최적화