2021-08-04 (114일차) fullpage

  FullPage 6강~9강  

  웹디자인기능사 1~7강  

fullpage

 

- continuousVertical : true

  : 페이지가 끝나지 않고, 반복되게 하는 방법

 

- navigation : ture

  : 페이지의 현재위치를 알려줌 (인디케이터)

 

- navigationPosition

  : navigation의 위치를 지정할 수 있음 (left, right)

 

- data-tooltip"페이지 번호" 

  : navigation에 hover했을 때, 해당 "페이지 번호"를 알려줌

  ㄴ 예외) html section 속성에 적어야 함!!

 

- showActiveTooltip : true

  : 해당 페이지의 "페이지번호"를 navigation에 나타냄 

 

---

- responsiveWidth : ?

  : ?px 이상에서만 fullpage 스크롤 작동 ( 섹션마다 슉슉)

  : ?px 이하에서는 일반 스크롤 작동

 

- fp-auto-height (fp-auto-height-responsive를 같이 써줘야 오류현상이 발생하지 않음)

  : 어떤 화면이든 항상 내용에 맞춰 높이가 자연스럽게 나온다.

  : 내용이 많으면 무조건 준다고 보면 된다. (scrollOverflow : true)

     ↓

  하지만!

  문제점

  한 페이지당 한 화면인데 페이지의 내용이 늘어나면 다 읽지 못하고 넘어가버린다.

  fullpage 해결방안

  vendors/scrollloverflow.min.js 가져오기 

  scrollOverflow : true 값 부여하기

  ㄴ > 내용이 늘어난 만큼 한 페이지(한 섹션)에 그 페이지만의 스크롤이 생긴다.

 

- fp-auto-height-responsive

  : pc화면에서는 높이가 맞춰져서 보이고, 모바일화면에서는 자연스럽게 줄여져서 보여짐

  ( 쓰는 이유 : pc에서는 화면에 딱 맞춰서 나오지만, 모바일에서는 그럴 필요 x)