이 프로젝트는 애플 공식 웹사이트의 iPad 제품 페이지를 클론하는 예제입니다.
HTML, CSS, JavaScript를 활용하여 웹 개발 스킬을 연마하고, 다양한 웹 기술을 적용해 보았습니다.
아래 내용과 함께 완성된 코드를 확인해보세요!
이 프로젝트는 웹 개발 역량을 향상시키기 위해 애플 iPad 제품 페이지를 클론한 것입니다.
고유한 디자인과 애니메이션 효과를 반영하여 다양한 장치에서 최적화된 반응형 웹을 구현했습니다.
📦 ipad
├─ .gitignore
├─ README.md
├─ 📁 css
│ └─ main.css
├─ 📁 data
│ ├─ ipads.js
│ └─ navigations.js
├─ favicon.ico
├─ 📁 images/
├─ index.html
├─ 📁 js
│ └─ main.js
└─ 📁 videos
└─ center-stage.mp4
- HTML5: 웹페이지의 구조 설계
- CSS3: 레이아웃, 스타일링, 반응형 디자인, 애니메이션 구현
- JavaScript (ES6+): 상호작용 및 다양한 기능 구현
- IntersectionObserver API: 스크롤에 따른 요소의 가시성 관찰
- CSS Sprite: 여러 이미지를 하나의 스프라이트로 관리하여 애니메이션 구현
- Google Fonts: Roboto 및 Noto Sans KR 폰트 사용
- npm: 패키지 관리
- Vercel: 프로젝트 배포 및 호스팅
- 레포지토리 클론:
git clone https://github.com/rlnrlnworld/ipad.git cd iapd-clone - 패키지 설치:
npm install
- 번들러 설치:
npm i -D parcel
- 개발 서버 실행:
npm run dev
- 브라우저에서 접속:
http://localhost:1234에서 애플리케이션 확인 가능
브라우저에서 index.html 파일을 열어 프로젝트를 실행할 수 있습니다.
- 반응형 디자인: 다양한 화면 크기에 대응하여 콘텐츠가 조정됩니다.
- 애니메이션 효과: IntersectionObserver API를 활용하여 요소가 화면에 보일 때 애니메이션을 추가했습니다.
- 이미지 스프라이트: 여러 아이콘 이미지를 하나로 합쳐 관리하는 스프라이트 기법을 적용하여 성능을 최적화했습니다.
- Google Fonts 적용: Apple의 SF Pro 폰트를 대체하기 위해 Roboto와 Noto Sans KR을 사용했습니다.
- 오픈 그래프 및 트위터 카드 설정: SNS 공유 시, 페이지 정보를 적절히 표현하도록 메타 태그를 설정했습니다.
프로젝트의 라이브 데모를 확인하려면 아래 링크를 클릭하세요!
이 프로젝트는 학습 및 연구 목적으로 만들어졌으며, 상업적 목적으로 사용할 수 없습니다.