/kukka-project

꾸까 페이지 클론 과제가 담긴 레포지토리입니다

Primary LanguageJavaScript

꾸까 클론 과제

서비스 링크:

🙋‍♀️🙋‍♂️ 팀원

프로필 이름 담당 기능
우종원 푸터
박중섭 GNB
이태림 동영상, 배너
임수영 플라워 클래스

🚀 스택

JavaScript

⚠️ 규칙

✨ 구현 사항

사용 기술

  • Vanilla JS 사용
  • jQuery 사용 가능

GNB

  • 스크롤 이동 시 상단 고정
  • 메뉴 hover 시 글자 하단에 밑줄
    • text-decoration 사용 금지
  • GNB 하단 영역에 그림자 효과 - (z-index)
  • 메뉴 아이템 두 가지: 동영상, 플라워클래스
  • 클릭 시 해당 영역으로 스크롤 이동
  • 애니메이션 효과 적용
    • scroll-behavior: smooth 사용 금지

동영상

  • iFrame 사용하여 Youtube 영역 구현
  • 캡션 삽입 & 동영상 제목 클릭 시 링크 이동

플라워클래스

  • 이미지 hover 시 줌 효과
  • 화살표 버튼 클릭 시 1, 2, 3 이미지 돌아가며 교체

배너 영역

  • Bootstrap4 사용해 두 개의 다른 영역 레이아웃 구성
  • 단색 그라데이션

푸터 영역

  • css로 레이아웃 구현 (IE8)
  • SNS 아이콘 클릭 시 링크 이동

팝업

  • 들어가면 팝업 이미지를 띄움
  • 클릭하면 외부 사이트로 이동

🗺 구현 기능

  1. 첫 번째 기능

  2. 두 번째 기능

⚙ 설치

# clone the project
$ git clone https://github.com/console-lo9/README-TEMPLATE.git

# install modules
$ cd README-TEMPLATE
$ npm ci || yarn

# start
$ npm start || yarn start

⠀
⠀  You can now view this project in the browser.
⠀  http://localhost:3000/
⠀

🔗 의존성

  "dependencies": {
    "axios": "^0.25.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4"
  },

📂 파일 구조

작성 후 삭제 참고 (https://www.lesstif.com/lpt/linux-tree-54952142.html)

$ tree -N -L 2 -d -I "node_modules"

또는 vscode File-tree-generator extension 사용

💡 과제 후기

우종원 🍀

박중섭 ✨

이태림 🐯

임수영 🐧