FullPage.js 사용법
CSS 24.02.13FullPage.js는 웹 페이지를 하나의 섹션으로 나누어 스크롤링되는 웹 페이지를 만들 수 있도록 도와주는 자바스크립트 라이브러리입니다.
다양한 옵션을 제공하여 사용자 정의할 수 있습니다. 아래는 FullPage.js의 기본적인 사용법입니다.
라이브러리 포함: FullPage.js를 사용하려면 먼저 해당 라이브러리를 웹 페이지에 포함해야 합니다.
이를 위해 CDN 또는 로컬에 다운로드하여 사용할 수 있습니다.
예를 들어, 아래는 CDN을 통해 FullPage.js를 포함하는 방법입니다.
1 2 3 | cs |
HTML 구조 설정
FullPage.js를 사용하려면 웹 페이지의 HTML 구조를 설정해야 합니다.
각 섹션은 요소로 정의되며, 클래스 이름 section을 지정해야 합니다.
1 2 3 4 5 6 | <div id="fullpage"> <div class="section">Section 1</div> <div class="section">Section 2</div> <div class="section">Section 3</div> </div> | cs |
스크립트 초기화
FullPage.js를 초기화하고 옵션을 설정합니다. 이를 위해 자바스크립트 코드를 사용합니다.
1 2 3 4 5 6 7 8 | new fullpage('#fullpage', { // 옵션 설정 sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'], anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'], menu: '#menu', scrollingSpeed: 1000 }); | cs |
위의 코드에서 #fullpage는 FullPage.js를 적용할 요소의 ID입니다.
sectionsColor는 각 섹션의 배경색을 지정합니다.
anchors는 각 섹션에 대한 앵커를 설정합니다.
menu는 네비게이션 메뉴를 나타내는 요소의 ID를 지정합니다.
scrollingSpeed는 스크롤 속도를 설정합니다.
관련 템플릿
