- 개요 : 원티드 프론트엔드 프리온보딩 2기 4주차 7번째 기업 과제
- 주제 : HTML, CSS, JavaScript를 활용해 페이지 제작
- 기간 : 2022.02.21 ~ 2022.02.23
- 요약 : 크로스 브라우징(ie 포함)을 고려해 프로젝트를 제작해야 하며, react를 사용하지 않고 순수 HTML, CSS, JS만을 활용해 제작한 프로젝트입니다. 반응형 레이아웃은 홈페이지의 레이아웃을 반영했으며 아래 구현 목록 내용을 토대로 제작했습니다.
- 배너를 제외한 나머지 영역은 양 옆에 Margin 적용
- 배너의 경우 width 100%로 꽉 차도록 구성
- 반응형 웹
- 네비게이션바
- iFrame Youtube 영상
- 이미지 슬라이더
- 배너
- 푸터
- 팝업창
- 스크롤 이동시 상단 고정 및 따라다님
- 메뉴 hover 시 글자 하단에 밑줄
- GNB 하단 영역에 z-index 표현을 위한 그림자 효과
- 메뉴 아이템 두 가지: 동영상, 플라워클래스 / GNB 클릭 시 해당 영역으로 이동
- 웹 디자인과 어울리는 동영상 영역 삽입 및 레이아웃과 어울리게 크기 조절
- 동영상에 대한 간단한 Caption 삽입 및 동영상 제목 클릭 시 해당 동영상의 youtube 링크로 이동
- 이미지 hover 시 줌 효과
- 화살표 버튼 클릭 시 1,2,3번 이미지가 돌아가며 교체.
- 교체되면서 해당 이미지에 대한 타이틀, 가격, 태그 변경
- 반응형 레이아웃
- 이미지 / 단색 그라데이션
- 부트스트랩을 사용하지 않고 캐러셀 구현
- 반응형 레이아웃
- 순수 CSS로 레이아웃 구현
- 크로스 브라우징 유의
- SNS 아이콘 클릭 시 링크 이동
- 오늘은 더 이상 보지 않기 기능
- 닫기 버튼 클릭 시 팝업 닫기
.
├──Asset
├──CSS
├──HTC
├──JS
│ ├── Banner.js
│ ├── Footer.js
│ ├── GNB.js
│ └── Slider.js
├──.gitignore
├──favicon.ico
└──index.html
이름 | 담당 역할 |
---|---|
황상섭 | 초기 세팅, 슬라이더 구현, 문서 작성, 배포 |
정인권 | 네비게이션바, 푸터, 팝업창 구현 |
현다솜 | 유튜브, 배너 구현, 번들링 |
커밋명 | 내용 |
---|---|
✨ feat | 파일, 폴더, 새로운 기능 추가 |
🐛 fix | 버그 수정 |
💄 style | 코드 스타일 변경 |
📝 docs | 문서 생성, 추가, 수정(README.md) |
♻️ refactor | 코드 리팩토링 |
🚑️ chore | 코드 수정 (JSON 데이터 포맷 변경 / scss 변경 등) |
자세한 내용은 여기서 확인해보실 수 있습니다!
- Git Clone
git clone https://github.com/PreOnBoarding-Team17/Week4_JavaScript.git
- 순서대로 입력해주세요.
npm install
npm run build
npm run dev