Programmazione di Ku0re

Primo progetto) Dream Tripper 4 본문

Programmazione/Progetto

Primo progetto) Dream Tripper 4

ku0re kuore 2017. 5. 2. 18:19

실제 사이트 구현 3



Footer


다른 사이트에는 다 있는 Footer. 그것도 디자인과 종류가 다양했다.


먼저 다른 것들과 마찬가지로 Codepen에서 많이 참고 했다.


그 중 여러가지를 적용해봤는데 내가 만든 프로젝트에는 심플한 게 가장 잘 어울렸다.


그래서 결정한 디자인의 코드를 따와 약간 수정하여 나의 github와 codepen 링크를 걸어두었다.(나의 github와 codepen에는 아직 아무것도 없다..)





탑 메뉴 바의 액티브 버그 수정


탑 메뉴 바를 클릭하면 메뉴 바 코드에 class로 active가 추가되도록 되어있다.


그 것을 이용해 class가 active인 메뉴가 검정색 백 그라운드 효과를 가지게 하므로써 어떤 메뉴를 선택했는지 알 수 있도록 한다.


하지만 이게 잘 작동하지 않았다. 이것도 스택오버플로우에서 찾아 해결했다.



드롭 다운 메뉴 버그 수정


탑 메뉴 바의 드롭 다운 메뉴는 Gallery 라는 이름을 가진 드롭 다운 메뉴의 메인 메뉴와 드롭 다운 기능을 가진 123▼ 메뉴가 있다.


Gallery 메뉴를 클릭하면 슬라이드 페이지 중 가장 첫 페이지로 가도록 링크되어 있고 123▼ 메뉴를 클릭하면 드롭 다운이 보이도록 되어있다.



여기서 Gallery One을 클릭하면 슬라이드 페이지 중 두 번째 페이지로, Two는 세 번째, Three는 네 번째로 링크가 되어있다.


그럼 Gallery One을 클릭하여 두 번째 페이지로 이동했거나 아예 다른 페이지에 위치해 있을 때 Gallery 메뉴를 클릭한다면 슬라이드의 첫 번째 페이지로 가야할 것이다.


하지만 이게 잘 작동하지 않았다. 이것 때문에 한참 찾다가 알게 된 건 이게 fullPage.js의 버그란다.


드롭 다운 메뉴에서 슬라이드 페이지의 메인 페이지가 되는 메뉴의 링크를 /0번으로 주면 해결된다.



슬라이드 메뉴의 닷 네비게이션 색상 수정


슬라이드 메뉴의 닷 네비게이션도 오른쪽 메인 닷 스크롤 네비게이션과 마찬가지로 기본 디자인이 검은색 작은 점이다.


마찬가지로 눈에 띄지 않고 배경에 묻힌다.


이것도 fullPage.js의 css 파일에서 어떤 코드가 슬라이드 닷의 효과를 주는지 찾아 수정했다.




메뉴 이름과 컨텐츠 텍스트 내용 수정


임시로 해놨던 메뉴의 이름과 컨텐츠의 텍스트 내용을 수정했다.




메인 페이지 Scroll Arrow 기능 추가


메인 페이지가 너무 허전하기도 했고 잘 모르는 사람이 밑으로 스크롤 해도 다음 페이지로 내려가는지 알 수 있도록 하기 위해

Scroll Arrow 기능을 추가했다.




슬라이드 페이지에 컨텐트 추가


슬라이드 갤러리 기능을 확인하기 위해 임의로 사진을 추가해봤다.


위 수정 내용들을 적용한 결과는 아래 영상에서 볼 수 있다.



다음 포스팅에서는 조금 더 자잘한 수정을 하여 완성된 모습을 포스팅하겠다.

'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
댓글쓰기 폼