Programmazione di Ku0re

Primo progetto) Dream Tripper 3 본문

Programmazione/Progetto

Primo progetto) Dream Tripper 3

ku0re kuore 2017. 5. 2. 17:42

실제 사이트 구현 2


fullPage.js의 기본 닷 스크롤 네비게이션은 검정색에 작은 점이다.


내가 사용한 배경은 좀 화려해서 닷 스크롤 네비게이션이 묻혀서 잘 보이지 않았다.



따라서 이걸 바꾸기 위해 닷 네비게이션, 스크롤 네비게이션, 닷 메뉴 등등의 키워드로 무한 검색하여 마음에 드는 닷 스타일을 찾았다.


하지만 이걸 fullPage.js에 어떻게 구현해야 하나 참 막막했다.


fullPage.js의 css 파일을 분석해보겠다고 여기저기 건드려보기도 하고 직접 닷 디자인을 구현해 보려고도 했다.(많이 어려워서 접었다.)


여러 시도 끝에 마음에 들었던 닷 스타일의 코드를 삽입할 수 있었다.



먼저 html 코드에서의 위치를 찾기 위해 여러 군데에 넣어 시도해봤고 그 코드에 디자인을 입히기 위해 css 코드를 커스텀 했다.


초보 개발자인 나로서는 내가 짠 코드도 헷갈리는 마당에 남의 코드를 수정하기란 쉽지 않았다.


뭐가 뭔지 모르는 상태에서 내가 사용하는 IDE인 Brackets의 라이브 프리뷰 기능을 이용하여 css 코드를 하나씩 지우고 Ctrl+z 해가며 어떤 css 코드가 어떤 html 선택자에게 효과를 주는지 찾아 갔고 찾는 데로 주석으로 표시했다.


그렇게 그럭저럭 맞췄다..



근데 기본 기능에는 있지도 않은 닷 네비게이션 기능의 화살표 기능이 또 문제였다.



이 화살표의 기능을 하는 js 파일을 또 손봐야 했다.


마찬가지로 여러 시도에 걸쳐 구현했다.(안되는 건 거의 스택오버플로우에서 찾아서 구글 번역기 돌려가며 직접 시도해보면서 해결했다.)


이런 사소한 기능 하나하나도 거의 밤새가며 고쳤었다..(거의 하룻밤에 한 기능 구현(?))


이러저러해서 네비게이션은 모두 정상 작동하게 되었다.


다음 포스팅은 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
댓글쓰기 폼