Aesop 웹사이트 클론코딩

Aesop 대한민국의 스킨케어 페이지를 HTML, css, JS를 이용해 클론한 프로젝트

원본 링크 : https://www.aesop.com/kr/c/skin/
클론 데모 : https://aesop-clone-yfe.netlify.app/

---

📅 프로젝트 기간

2023.07.24 ~ 2023.07.28

프로젝트 소개

• header, nav, section, footer 등 시멘틱 태그 활용

• flex, grid 를 이용한 레이아웃 구조

• swiper.js를 이용한 슬라이더 구현

• hover 시 css 애니메이션 동작

  
  

🖥 구현 내용

헤더 + 메인	제품 카테고리
제품 슬라이더	피부 타입
블렌딩 추천	아티클
푸터

🕹 주요 기능

1. 스크롤 내릴때 나타나는 요쇼들 fade in 효과

2. 스크롤에 따라 사라지고 나타나는 헤더

3. swiper.js 라이브러리를 이용한 제품 슬라이더

4. 그리드 디스플레이와 hover시 이미지가 어두워지는 효과

---

JS를 사용한 부분

1. 슬라이더 구현 (Swiper.js 라이브러리)
2. 스크롤 이벤트에 따라 사라지고 나타나는 헤더 구현
3. 최초 스크롤 시 지정 요소들 fade in 되는 효과 구현

보완하고 싶은 부분

• 반응형 레이아웃 추가
• ::after ::before등을 이용한 장식적으로 사용된 요소들(화살표 등) 치환. 더 간결한 마크업
• 반복적으로 사용되는 css 요소들 클래스화