[Toy Project] Sparkling Store webpage 만들기

 

 

아직 토이 프로젝트를 할만한 실력은 아니지만, 그래도 앨리님 유튜브 무료 강의와 애플 코딩 강의를 들으며
추가하고 싶은 기능을 추가하며 만들어보았다. 
이것 또한 다 만들어진 것은 아니며 오류를 해결 못한 부분도 있어 추후 업데이트할 예정이나, 우선 나중에 내가 얼마나 성장했는지 기록하기 위해 글을 남긴다. 사용한 이미지는 unplash에서 받은 무료 이미지를 사용하였다. 

 

 

 

 

1. Navigation bar 스크롤 효과 

 

스크롤바를 내리면 bar 컬러와 바뀌고 로고 크기가 살짝 바뀌게 구현했다. 

 

Navigation bar 스크롤 효과

 

 

 

 

 

2.  타이포 이펙트 추가

배운 이펙트라 써보고 싶어서  굳이 굳이 타이틀에 넣어봤다.. 나중에 완성되면 뺄 예정

 

타이포 이펙트 추가

 

 

 

 

 

3.  로그인창 구현

이메일, 비밀번호 형식에 안 맞을 시 그에 따른 문구 뜸

이메일 형식 추가 및 비밀번호 형식 추가 (must included : At least one capital letter)

 

 

로그인창 구현

 

 

 

 

4.  슬라이드 구현

 

슬라이드 구현

 

 

 

 

5.  Tab 기능 구현

 

Tab 기능 구현

 

 

 

 

6.  Static 슬라이더 구현 

 

이 부분은 그냥 사진으로 하면 효과가 덜 할 것 같아 photoshop에서 사진과 텍스트를 넣어 약간의 그러데이션 효과를 준 후 작업하였다. 

 

Static 슬라이더 구현

 

 

 

 

7.  Product Page 상품 필터 및 정렬

 

상품 6개를 만들고 filter 와 sort를 구현했다. 

여기서 고쳐야 할 부분은  filter , sort 이중필터를 하는 것이 안된다. 

아직 이 코드를 수정하는 과정에서 이해가 부족한 것 같아 다시 공부해보기로 했다. 

 

Product Page 상품 필터 및 정렬