wongueshin / 4th-week-performancetbwa-task

퍼포먼스바이 TBWA 기업과제 저장소입니다.

4th-week-performancetbwa-task

Go Demo🚀

Member

김서윤(팀장)	권영채	신원규	지연비
FE Developer	FE Developer	FE Developer	FE Developer

역할 분담

팀원	역할
김서윤	프로젝트 매니지먼트 / GNB / Image(플라워클래스)
권영채	Footer / 팝업 /
신원규	배너 /
지연비	Iframe / Image(플라워클래스)

구현 기능

✅기술스택

Vanilla JS로 구현하였으며, jQuery는 선택적으로 사용하였습니다.

✅레이아웃 및 기능

전체 레이아웃

• 배너를 제외한 나머지 영역은 양 옆 Margin 적용
• 배너의 경우 width 100%로 꽉 차도록 구성
• 반응형 웹으로 미디어쿼리 혹은 부트스트랩을 활용하여 모바일, 태블릿, PC레이아웃 구성

GNB

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

동영상

• Iframe을 활용하여 웹디자인에 어울리는 동영상 삽입 및 크기 조절
• 동영상에 대한 간단한 caption 삽입 및 동영상 제목 클릭 시 영상 링크로 이동

Image(플라워클래스)

• 이미지 hover 시 줌 효과
• 화살표 버튼 선택 시 이미지 자리 교체

배너

• Bootstrap4를 사용하여 레이아웃 구성하고, 사용하지 않을 경우 크로스 브라우징 처리

Footer

• Bootstrap을 쓰지않고 순수 CSS로 레이아웃 구성
• 크로스 브라우징 유의(IE 8버전 이상)
• SNS 아이콘 클릭 시 링크 이동(새창 열림)

프로젝트 실행 방법

$ git clone https://github.com/PreOnboardingTeam-16/4th-week-performancetbwa-task.git

  

이슈정리

---

⚡구현 중 기술적 이슈들

프로젝트 후기

🎇김서윤 :

🎈권영채 :

🎹신원규 :

💖지연비 :