yeodaseul4355 / clone_emart24

emart24 메인 페이지 클론코딩(퍼블리싱)

🏪 Emart 24 공식 홈페이지 클론 코딩 사이트

View Site : https://yeodaseul4355.github.io/clone_emart24/index.html

👋 소개

이마트 24 공식 홈페이지 클론 코딩 사이트 프로젝트는 이마트 24의 공식 웹사이트를 참조하여 디자인과 기능을 가진 웹사이트를 만드는 것을 목표로 한 프로젝트입니다. 클론 코딩은 이미 있는 웹사이트나 애플리케이션의 디자인과 기능을 분석하여 자체적으로 만드는 것을 의미합니다. 이 프로젝트에서는 이마트 24 사이트를 참고하여 기능과 레이아웃을 유사하게 구현하는 것이 목적입니다.

🔧 사용 스택

• HTML (HyperText Markup Language): 웹페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 웹사이트의 구조와 컨텐츠를 만들기 위해 사용되었습니다.
• CSS (Cascading Style Sheets): 웹페이지의 스타일과 레이아웃을 지정하는 스타일 시트 언어입니다. 웹페이지의 디자인과 레이아웃을 구성하기 위해 사용되었습니다.
• JavaScript: 웹페이지의 동적 기능을 추가하는 프로그래밍 언어입니다. 이 코드에서는 슬라이더, 버튼 동작, 자동 슬라이드 기능 등을 구현하기 위해 사용되었습니다.
• Swiper: Swiper는 인기있고 현대적인 터치 슬라이더 라이브러리로, 부드럽고 반응형 슬라이딩 효과를 가능하게 합니다. 네비게이션 버튼, 페이지 표시 기능, 자동 재생 등을 위해 사용되었습니다.
• jQuery: jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리입니다. HTML 문서 탐색 및 조작을 간소화합니다. 이 코드에서는 이벤트 탭메뉴와 헤더에 사용되었습니다.
• gsap: gsap는 GreenSock Animation Platform의 약어로, JavaScript 기반의 강력한 애니메이션 라이브러리입니다. 이 코드에서는 스크롤에 따라 요소들을 부드럽게 나타내기 위해 사용되었습니다.

📚 jQuery / GSAP에서 활용한 메서드

• mouseover() : 선택된 요소들에 마우스를 올렸을 때 발생하는 이벤트를 처리합니다.
• mouseout() : 선택된 요소들에서 마우스를 빠져나갈 때 발생하는 이벤트를 처리합니다.
• hide() : 선택된 요소를 숨겨줍니다.
• show() : 선택된 요소를 보여줍니다.
• addClass() : class 추가
• removeClass() : class 제거
• click() : 장된 요소들을 클릭했을 때 발생하는 이벤트를 처리합니다.
• lenis : lenis(https://lenis.studiofreight.com/) 를 이용하여 스크롤 스무스 효과를 구현합니다.
• gsap.from() : 요소들의 초기 상태에서부터 지정된 애니메이션 속성으로 요소들을 부드럽게 나타나게 하는 메서드입니다.
• gsap.defaults() : gsap의 기본 설정을 지정합니다.

⚙️ 프로젝트 실행

Step 1:
레포지토리 클론

git clone https://github.com/YeoDaSeul4355/clone_emart24.git

Step 2:
프로젝트 실행

Open With Live Server

📸 상세페이지