[1주차 과제] 심화 추가

[huniversal]

👽 과제 명세

1주차 과제 심화 세션 기능 추가하였습니다.

🔧 구현 요약 및 새로 배운 점

무한 스크롤

• CSS 애니메이션을 사용해 갤러리 이미지가 자동으로 왼쪽으로 스크롤되며
  마지막 이미지 이후 첫 이미지로 자연스럽게 이어지는 무한 루프를 구현했습니다.

컨테이너 (.snap-gallery-wrapper)

.snap-gallery-wrapper {
  overflow: hidden;       
  background-color: #f8f9fa;
  padding: 50px;
  border-radius: 30px;
  position: relative;
}

• overflow: hidden: 갤러리가 컨테이너 밖으로 나가지 않도록 함

갤러리 (.snap-gallery)

.snap-gallery {
  display: flex;           
  gap: 20px;              
  width: fit-content;      
  animation: auto-scroll 10s linear infinite;
}

• display: flex: 이미지를 가로로 나열
• animation: auto-scroll 애니메이션을 10초 동안 선형으로 무한 반복

애니메이션 정의

@keyframes auto-scroll {
  0% {
    transform: translateX(0);      /* 시작 위치 */
  }
  100% {
    transform: translateX(-50%);    /* 왼쪽으로 50% 이동 */
  }
}

• translateX(-50%): 전체 너비의 50%만큼 왼쪽으로 이동
• 무한 루프: 아이템을 복제해 첫 세트가 끝나면 복제본이 자연스럽게 이어지게 구현

동작 원리

초기 상태: 갤러리가 오른쪽 끝에서 시작
자동 스크롤: 10초 동안 왼쪽으로 이동
무한 루프: 50% 지점에 도달하면 다시 처음으로 돌아가 반복
사용자 인터랙션: 호버 시 일시정지

📷 결과물

2025-12-19.19.18.02.mov