리액트없이 바닐라 자바스크립트로 꾸까(https://kukka.kr/) 웹 페이지를 구현하는 과제로
크로스 브라우징에 대한 고민을 바탕으로 제작한 프로젝트입니다.
-
CSS class명은 BEM 네이밍 규칙을 준수한다
-
Git Team Ground Rule - Git Flow, 모든 팀원이 체크 후 마지막으로 체크한 팀원이 머지한다.
사용 기술
- Vanilla JS 사용
- jQuery 사용 가능
- 반응형
GNB
- 스크롤 이동 시 상단 고정
- 메뉴 hover 시 글자 하단에 밑줄
- text-decoration 사용 금지
- GNB 하단 영역에 그림자 효과 - (z-index)
- 메뉴 아이템 두 가지: 동영상, 플라워클래스
- 클릭 시 해당 영역으로 스크롤 이동
- 애니메이션 효과 적용
- scroll-behavior: smooth 사용 금지
동영상
- iFrame 사용하여 Youtube 영역 구현
- 캡션 삽입 & 동영상 제목 클릭 시 링크 이동
플라워클래스
- 이미지 hover 시 줌 효과
- 화살표 버튼 클릭 시 1, 2, 3 이미지 돌아가며 교체
배너 영역
- Bootstrap4 사용해 두 개의 다른 영역 레이아웃 구성
- 이미지 위에 단색 그라데이션
- hover 시 이미지 확대
- 배너 내부 반응형
푸터 영역
- css로 레이아웃 구현 (IE8)
- SNS 아이콘 클릭 시 링크 이동
팝업
- 들어가면 팝업 이미지를 띄움
- 클릭하면 외부 사이트로 이동
# clone the project
$ git clone https://github.com/console-lo9/kukka.git
# install modules
$ cd kukka
$ npm install || yarn
# start with live server
⠀
⠀ You can now view this project in the browser.
⠀ http://localhost:5500/
⠀
"dependencies": {
"babel-loader": "^8.2.3",
"node-sass": "^7.0.1",
"vanilla-framework": "^3.1.0",
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2"
},
├── public
│ └── scripts
└── src
├── assets
├── components
└── styles
프레임워크 없이 Vanilla JS로 컴포넌트를 나눠 작업하는 것을 경험해 볼 수있는 좋은 과제였던 것 같습니다. 또한 IE8 크로스 브라우징을 위해 JS에서 map 이 아닌 for 문을 사용하는 등의 코드 구현으로 크로스 브라우징 방법을 알게 되었습니다.