Programmazione di Ku0re

Primo progetto) Dream Tripper 2 본문

Programmazione/Progetto

Primo progetto) Dream Tripper 2

ku0re kuore 2017. 5. 2. 17:21

실제 사이트 구현 1


처음 구현은 어떤 스택이 들어갔는지 알더라도 구현하기 힘들었다.


그래서 그냥 탑 메뉴를 레이아웃을 대충 나눠보기도 하고 부트스트랩을 이용해 나눠보고 여러 시도를 해봤다.


별로 마음에 드는 모양이 나오지 않아 다른 오픈 소스들을 참고하기로 했다.


먼저 가장 바탕이 되는 fullPage.js를 사용해보고 fullPage.js를 사용한 싱글 페이지 소스들을 여러가지 참고 했다.


Codepen에서 대부분의 디자인을 따온 것 같다.



먼저 탑 메뉴와 Lightbox.js와 기본 fullPage.js 기능이 들어있는 오픈 소스를 따와 조금씩 커스텀 했다.


분명 HTML이나 CSS 강의를 생활 코딩으로 몇 번 정독하고 해보긴 했지만 프로젝트 처음에는 HTML 코드들의 위치나 CSS 사용법도 헷갈렸다. 내가 아는 건 정말 대충 알고 있었구나 싶더라..


오픈 소스를 가져와서 백 그라운드 이미지를 바꾸고 fullPage.js 사이트의 Documentation를 참고 해서 조금씩 수정했다.


내가 가져온 소스에는 닷 스크롤 네비게이션은 없었지만 예시 사이트에서 봤던 게 너무 인상적이었나 보다. 그게 그렇게 넣고 싶었다.


그래서 나는 탑 메뉴 바와 닷 스크롤 네비게이션을 하이브리드로 사용하기로 했다.


탑 메뉴 바도 드롭 다운 메뉴를 클릭하여 슬라이드 페이지로 이동 후 다시 드롭 다운 메뉴의 메인 메뉴를 클릭하면 슬라이드의 메인 화면으로 돌아가지 않는 버그가 있었지만 닷 스크롤 네비게이션을 적용부터 하고 고치자고 생각했다.


그래서 먼저 fullPage.js에 기본적으로 내장된 닷 스크롤 네비게이션을 적용하여 만들었고 중간에 슬라이드 페이지를 넣어 사진 갤러리 기능과 슬라이드 닷 네비게이션을 만들었다.


이 소스에서 컨텐츠는 Lightbox.js를 사용하였다. 깔끔하고 이뻐 그냥 그대로 쓰기로 했다.


그리고 마지막 페이지는 Constant를 만들고 메인 로고를 로고 사이트에서 적당히 만들어 붙였다.


로고는.. 별로 마음에 들지 않지만 임시로 사용하기로 했다.


여기까지의 결과는 아래 영상에서 확인할 수 있다.



여기까지 만들고 나니 닷 스크롤 네비게이션이 배경에 묻히는게 보였다..


그리고 웬만한 사이트는 다 있는 footer를 넣고 싶었고 자잘한 여러가지를 수정하고 싶었다.


그 과정은 다음 포스팅에서 담겠다.

'Programmazione > Progetto' 카테고리의 다른 글

Primo progetto) Dream Tripper 5  (0) 2017.05.02
Primo progetto) Dream Tripper 4  (0) 2017.05.02
Primo progetto) Dream Tripper 3  (0) 2017.05.02
Primo progetto) Dream Tripper 2  (0) 2017.05.02
Primo progetto) Dream Tripper 1  (0) 2017.05.02
0 Comments
댓글쓰기 폼