Summer Swimwear Web Project 👙

메인 슬라이드 화면 화살표와 버튼 클릭 시 화면이 움직이고 하단의 신상품순, 추천순, 높은 가격순 등의 버튼 클릭 시 필터링이 되어 해당 아이템들만 보여주는 썸머 수영복 반응형 웹 프로젝트입니다.

사용스택

드림 코딩 by 엘리님의 미니 쇼핑 프로젝트 (기본적인 HTML, CSS 및 Javascript 참고) https://youtu.be/We2Kv1HMGvc
Billabong Australia website (슬라이드 화면 디자인 참고) https://www.billabong.com.au/womens/
W Concept website (아이템 레이아웃 및 버튼 디자인 참고 ) https://www.wconcept.co.kr/WOMEN

json을 통해 데이터를 동적(fetch, data.json)으로 가져와 map과 Join을 이용하여 HTML string으로 바꾸어 화면 레이아웃을 구성하였다.
슬라이드 화면의 화살표와 동그라미 버튼 클릭 시 slide CSS display: none으로 다음 이미지가 아래로 보이지 않고 slides의 display:block 으로 사진들이 화면에서 순서대로 움직인다.
상품 필터 버튼 클릭 시 sort을 이용하여 각각의 함수 필터 기능을 만들어주고 템플릿 레이아웃 함수를 불러 필터 된 아이템들만 보이도록 코드를 작성하였다.
두 가지 768px(태블릿 기준), 360px(모바일 기준) 반응형 웹을 구현하였고 두 사이즈의 중간(510px)에도 미디어 쿼리를 사용하여 자연스럽게 화면이 넘어가도록 만들었습니다.

768px(태블릿기준)

360px(모바일기준), 510px

화면 레이아웃을 HTML 에 작성하지 않고 json을 통해 데이터를 불러와서 displayItems 함수를 이용하여 레이아웃 템플릿을 만들어서 사용하는 부분이 가장 소름 돋으며 인상 깊었다.
컬러 변수를 사용하여 CSS 작성법은 많이 사용하여 익숙했지만 공통으로 들어가는 사이즈, 애니메이션까지 변수를 사용하는 방법을 배웠다.
data.json 파일에 items들의 데이터 작성법을 미니 쇼핑 프로젝트에서 배워 이번 수영복 프로젝트에도 응용하여 사용하였다.
prev와 next 그리고 dot HTML에 onclick속성을 사용하여 화살표 클릭 시 화면의 사진이 block이 되면서 디스플레이가 되고 동그라미 버튼이 active가 되는 코드에서 동작의 원리를 이해하였다.
필터링 함수에 아이템 데이터를 받아와 높은 가격순, 낮은 가격순, 신상품순, 추천순, 알파벳순으로 정렬하는 코드 부분에서 sort 함수를 통해 다양하게 사용하는 법을 배웠다.