kurlymain
컬리에서 판매되는 상품 중에는 컬리에 입점한 개별 판매자가 판매하는 마켓플레이스(오픈마켓) 상품이 포함되어 있습니다. 마켓플레이스(오픈마켓) 상품의 경우 컬리는 통신판매중개자로서
limej5040.dothome.co.kr
마켓컬리 클론코딩 프로젝트
프로젝트 소개
HTML, CSS, Javascript를 사용하여 마켓컬리 웹사이트를 클론 코딩한 프로젝트입니다. 이 프로젝트를 통해 웹 개발 스킬을 향상시키고 실제 웹사이트의 디자인과 기능을 이해하는 것을 목표로 하였습니다.
기술 스택
- HTML
- CSS
- Javascript
프로젝트 상세 설명
디자인 및 레이아웃 마켓컬리 웹사이트의 헤더, 메인 섹션, 푸터 등의 주요 구성 요소를 Flexbox와 Grid를 사용하여 구현하였습니다.
기능 구현
- 메뉴 네비게이션: 카테고리와 메뉴 항목을 클릭하면 해당 페이지로 이동하는 링크를 추가하였습니다.
소감
프로젝트 진행 중 Flexbox를 이용한 레이아웃 정렬에서 어려움을 겪었으나, 다양한 레이아웃 예제를 참고하여 문제를 해결하였습니다.
또한, 검색 기능 구현 시 데이터 처리를 위해 Javascript의 이벤트 리스너를 활용하였습니다.
결과 및 성과
이 프로젝트를 통해 HTML, CSS, Javascript의 기본기를 탄탄히 다질 수 있었으며, 실제 웹사이트를 클론하며 디자인과 기능을 구현하는 방법을 익힐 수 있었습니다.