소개
이 프로젝트에서는 우주 테마 콘텐츠를 특징으로 하는 시각적으로 매력적인 캐러셀 레이아웃을 갖춘 Swiper 캐러셀 웹 앱을 만드는 방법을 배우게 됩니다. 이 앱을 통해 사용자는 다양한 슬라이드를 탐색하고 우주에 대한 흥미로운 사실이 담긴 카드를 볼 수 있습니다.
Swiper 캐러셀의 미리보기는 다음과 같습니다.
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다.
- 웹 앱의 HTML 골격을 구성하는 방법
- Swiper 캐러셀을 HTML 구조에 임베딩하는 방법
- 앱 배경에 원과 애니메이션 플로팅 원을 추가하는 방법
- 브라우저 간 일관된 스타일링을 보장하기 위해 기본적인 CSS 리셋을 구현하는 방법
- 앱의 주요 섹션과 콘텐츠 홀더의 스타일을 지정하는 방법
- 배경에 플로팅 원을 디자인하고 애니메이션화하는 방법
- Swiper 캐러셀 및 해당 구성 요소의 스타일을 지정하는 방법
- JavaScript 를 사용하여 Swiper 캐러셀을 초기화하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- 우주 테마 콘텐츠를 갖춘 시각적으로 매력적인 Swiper 캐러셀 웹 앱을 생성할 수 있습니다.
- 웹 앱의 HTML 구조 및 레이아웃을 구현할 수 있습니다.
- 사용자 인터페이스를 향상시키기 위해 CSS 스타일링 및 애니메이션을 적용할 수 있습니다.
- JavaScript 를 사용하여 Swiper 캐러셀을 초기화하고 구성할 수 있습니다.
