Ch.10 이벤트와 완성 — 인터랙티브 홈페이지

CSS 애니메이션 + 마무리

@keyframes와 animation 속성으로 CSS 애니메이션을 작성할 수 있다transition과 transform으로 호버/상태 변화 효과를 만들 수 있다10개 챕터에서 배운 HTML, CSS, JavaScript를 종합하여 웹 페이지를 조립할 수 있다

정적인 페이지에 움직임을 더하면 완성입니다

스크롤하면 요소가 나타나고, 버튼에 마우스를 올리면 색이 변하고, 로딩 시 부드럽게 등장하는 효과 — CSS 애니메이션이 마지막 퍼즐 조각입니다.

CSS만으로 움직임을 만들 수 있다고?

@keyframes + transition — CSS만으로 부드러운 애니메이션을 만드는 두 가지 방법입니다.

article

핵심 내용

transition은 상태 변화를 부드럽게 연결합니다

.card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  /* 모든 변화를 0.3초 동안 부드럽게 */
  transition: all 0.3s ease;
}

.card:hover {
  /* 위로 살짝 떠오르는 효과 */
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

@keyframes로 시작부터 끝까지 애니메이션을 정의합니다

/* 1. 애니메이션 정의 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. 요소에 적용 */
.card {
  animation: fadeInUp 0.6s ease forwards;
}

/* 순차 등장 — nth-child로 딜레이 */
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.2s; }

transition = hover, focus 등 트리거가 필요 @keyframes = 페이지 로드 시 자동 실행 가능 둘을 조합하면 대부분의 UI 애니메이션을 만들 수 있습니다.

fadeIn 애니메이션과 hover 효과를 카드에 적용합니다

CSS에서 hover 없이도 자동으로 실행되는 애니메이션을 만드는 방법은?

요소를 위로 4px 이동시키려면 transform: ___(−4px) 을 사용한다

CSS transition은 트리거(hover 등) 없이도 자동으로 실행된다

웹 개발 기초 코스 전체 완료!

key

핵심 용어

⬆️

translateY(-4px)

위로 4px 이동 (떠오르는 효과)

🔍

scale(1.05)

5% 확대 (강조 효과)

🔄

rotate(45deg)

45도 회전

🎯

조합

translateY(-4px) scale(1.02) 동시 적용 가능

edit_note

정리 노트

CSS 애니메이션 + 마무리 정리

CSS 애니메이션

@keyframes
애니메이션 프레임별 상태를 정의하는 규칙
animation 속성
이름, 지속시간, 반복 등을 한 줄로 지정
transition
상태 변화(hover 등) 시 부드러운 전환 효과

transform과 조합

transform
translate, rotate, scale 등 요소 변형
transition + transform
호버 시 이동·회전·확대 애니메이션
animation vs transition
animation은 자동 실행, transition은 트리거 필요
★

transition은 '상태 변화', animation은 '자동 재생' — 용도를 구분하세요.

check_circle

핵심 정리

  • 1Ch1-2: HTML — 웹의 뼈대, 태그, 시맨틱 구조, 폼
  • 2Ch3-4: CSS — 셀렉터, 색상, Box Model, 단위
  • 3Ch5-6: 레이아웃 — Flexbox, Grid, 반응형 미디어쿼리
  • 4Ch7-8: 실전 CSS — 컴포넌트, 네비게이션, 변수, 접근성
  • 5Ch9: JavaScript — 변수, 타입, 조건문, 함수, DOM 조작
  • 6Ch10: 완성 — 이벤트, 배열, 필터링, CSS 애니메이션
  • 7이제 HTML + CSS + JavaScript를 모두 다룰 수 있습니다!

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작