200일간의 풀스택 개발자 여정 - 19일차

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 프론트엔드 개발자, CSS 기초 학습자

핵심 요약

• transition과 transform은 CSS로 간단한 애니메이션 효과를 추가하는 핵심 속성
• transition은 속성값 변화를 부드럽게 처리 (transition: property duration timing-function delay;)
• transform은 요소의 시각적 변형 가능 (translate, rotate, scale, skew)
• 두 속성을 결합하면 인터랙티브한 UI 효과 생성 가능

섹션별 세부 요약

1. transition 속성 소개

• transition은 CSS 속성 변화를 시간에 따라 부드럽게 전환
• 주요 매개변수: property, duration, timing-function, delay
• 예시: .btn:hover 시 background-color 변화를 0.3초 동안 ease 애니메이션 적용
• 코드: transition: background-color 0.3s ease;

2. transform 속성 소개

• transform은 요소의 위치, 회전, 확대/축소, 기울기 조절 가능
• 주요 함수: translateX/Y, rotate, scale, skew
• 예시: .image:hover 시 scale(1.2)로 요소 확대
• 코드: transform: scale(1.2);

3. transition과 transform 결합 예시

• .fancy-btn:hover 시 background-color 변화 + rotate(5deg) 회전 적용
• 코드: transition: background-color 0.3s ease, transform 0.3s ease;
• 효과: 버튼에 색상 변경 + 회전 애니메이션 동시 발생

4. 실용적 예제: 사이드바 및 카드 효과

• .sidebar.active 시 translateX(0)로 사이드바 슬라이드 인 효과
• .card:hover 시 rotate(15deg)로 카드 기울기 효과
• JavaScript 활용: classList.toggle('active')로 상태 전환

결론

• transition과 transform은 JavaScript 없이도 생동감 있는 UI를 구현 가능
• 실습 시 간단한 예제부터 시작하고, 애니메이션 효과 결합해 복잡한 인터랙션 구현
• 다음 단계로 JavaScript 학습 이어져 동적 기능 추가 예정