fullPage.js

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #android #rust #java #windows #cli #kubernetes #awesome-list #security #mcp

(★ 35,408)

Alvaro Trigo의 fullPage 플러그인. 빠르고 간편하게 전체 화면 페이지를 만드세요.

파일 탐색기

최종 버전 다운로드 (.zip)

- ISSUE_TEMPLATE.md
- PULL_REQUEST_TEMPLATE.md
- fullpage.css
- fullpage.extensions.min.js
- fullpage.js
- fullpage.min.css
- fullpage.min.css.map
- fullpage.min.js
- - 1.png
  - 2.png
  - 3.png
  - bg1.jpg
  - bg2.jpg
  - bg3.jpg
  - bg4.jpg
  - bg5.jpg
  - compatible.png
  - copyright.txt
  - en-language-inactive.png
  - en-language.png
  - es-language-inactive.png
  - es-language.png
  - example.png
  - example2.png
  - flowers.mp4
  - flowers.webm
  - fullPage.png
  - horse.mp3
  - horse.ogg
  - intro.png
  - iphone-blue.png
  - iphone-green.png
  - iphone-red.png
  - iphone-two.png
  - iphone-yellow.png
  - iphone1.jpg
  - iphone2.png
  - iphone3.png
  - iphone4.png
  - slider.png
  - tablets.png
  - used-by-fullpage.png
- active-slide.html
- angular-fullpage.html
- auto-height.html
- autoplay-video-and-audio.html
- background-video.html
- backgrounds-fixed.html
- backgrounds.html
- callbacks.html
- cards.html
- cinematic.html
- continuous-horizontal.html
- continuous-vertical.html
- css3.html
- custom-arrows.html
- drag-and-move.html
- drop-effect.html
- easing-css3.html
- easing-js.html
- effects.html
- examples.css
- examples.js
- fading-effect.html
- fixed-headers.html
- gradient-backgrounds.html
- hide-sections.html
- interlocked-slides.html
- jquery-adapter.html
- lazy-load.html
- looping.html
- methods.html
- navigation-horizontal.html
- navigation-tooltips.html
- navigation-vertical.html
- no-anchor.html
- normal-scroll.html
- normalScrollElements.html
- observer.html
- offset-sections.html
- one-section.html
- parallax.html
- react-fullpage.html
- reset-sliders.html
- responsive-auto-height.html
- responsive-height.html
- responsive-slides.html
- responsive-width.html
- rtl.html
- scroll-after-fullpage.html
- scroll-horizontally.html
- scrollBar.html
- scrolling-speed.html
- scrollOverflow-reset.html
- scrollOverflow.html
- simple.html
- skipIntermediateItems.html
- trigger-animations.html
- vue-fullpage.html
- water-effect.html
- build.js
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extensionmd.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - how-to-activate-fullpage-extension.md
  - parallax-extension.md
  - README.md
- - br.yml
  - en.yml
  - es.yml
  - fr.yml
  - ja.yml
  - ko.yml
  - ru.yml
  - zh.yml
- - fullpage.css
- - app.js
  - arrows.js
  - autoScrolling.js
  - bindings.js
  - console.js
  - dynamic.js
  - easing.js
  - fitToSection.js
  - fullpage.js
  - instance.js
  - jquery-adaptor.js
  - media.js
  - normalScrollElements.js
  - optionsDefault.js
  - resize.js
  - responsive.js
  - scrolloverflow.js
  - sections.js
  - speed.js
  - stateClasses.js
  - stateUpdates.js
  - touch.js
- jsconfig.json
- - arrows.js
  - bigSectionsDestination.js
  - callbacks.js
  - callbacksV3.js
  - continuousVertical.js
  - destroy.js
  - displayWarnings.js
  - easingcss3.js
  - fitToSection.js
  - fixedElements.js
  - keyboardScrolling.js
  - lazyload.js
  - lockAnchors.js
  - loopBottom.js
  - loopTop.js
  - menu.js
  - moveSectionDown.js
  - moveSectionUp.js
  - moveSlideLeft.js
  - moveSlideRight.js
  - moveTo.js
  - nav.js
  - normalScrollElements.js
  - paddings.js
  - recordHistory.js
  - responsiveHeight.js
  - responsiveWidth.js
  - scrollBar.js
  - scrollingSpeed.js
  - sectionsColor.js
  - selectors.js
  - setAllowScrolling.js
  - setAutoScrolling.js
  - silentMoveTo.js
  - slidesNavigation.js
  - verticalCentered.js
- index.html
- utils.js
- index.d.ts
- easings.js
- easings.min.js
- easings.min.js.map
. jshintrc
.gitattributes
.gitignore
BACKERS.md
bower.json
CONTRIBUTING.md
FUNDING.yml
gulpfile.js
LICENSE
package.json
README.md
rollup.config.js
SECURITY.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/alvarotrigo/fullPage.js

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd fullPage.js

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# fullPage.js
![preview](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png)
![compatibility](https://raw.github.com/alvarotrigo/fullPage.js/master/examples/imgs/compatible.png)

English |
[Español](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish#fullpagejs) |
[Français](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#fullpagejs) |
[Pусский](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian#fullpagejs) |
[中文](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs) |
[한국어](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs) |
 [日本語](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/japanese#fullpagejs) |
[Português Brasileiro](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese#fullpagejs)

[Vue](https://github.com/alvarotrigo/vue-fullpage.js), [React](https://github.com/alvarotrigo/react-fullpage), [Angular](https://github.com/alvarotrigo/angular-fullpage) 버전으로도 제공됩니다.

---
![fullPage.js version](https://img.shields.io/badge/fullPage.js-v4.0.41-brightgreen.svg)
[![License](https://img.shields.io/badge/License-GPL-blue.svg)](https://www.gnu.org/licenses/gpl-3.0.html)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/fullpage.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/fullpage.js)
[![Minzipped Size](https://img.shields.io/bundlephobia/minzip/fullpage.js)](https://bundlephobia.com/package/fullpage.js)
  \*\*|\*\*   \*Created by [@imac2](https://twitter.com/imac2)*
- [온라인 데모](https://alvarotrigo.com/fullPage/) | [Codepen](https://codepen.io/alvarotrigo/pen/qqabrp)
- [Gutenberg용 WordPress 플러그인](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/) 및 [Elementor용 WordPress 플러그인](https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/)
- [WordPress 테마](https://alvarotrigo.com/fullPage/utils/wordpress.html)
- [fullpage.js 확장 프로그램](https://alvarotrigo.com/fullPage/extensions/)
- [자주 묻는 질문](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Asked-Questions)
- [[fullPage v3에서 fullpage v4로 마이그레이션]](https://alvarotrigo.com/fullPage/help/migration-from-fullpage-3/)
---
전체 화면 스크롤 웹사이트(싱글 페이지 웹사이트 또는 원페이지 사이트로도 알려짐)를 만들고 사이트 섹션 내에 가로 슬라이더를 추가해 주는 간단하고 사용하기 쉬운 라이브러리입니다.
- [소개](https://github.com/alvarotrigo/fullPage.js#introduction)
- [호환성](https://github.com/alvarotrigo/fullPage.js#compatibility)
- [라이선스](https://github.com/alvarotrigo/fullPage.js#license)
- [사용법](https://github.com/alvarotrigo/fullPage.js#usage)
- [섹션 또는 슬라이드 링크 생성](https://github.com/alvarotrigo/fullPage.js#creating-links-to-sections-or-slides)
- [더 작거나 더 큰 섹션 만들기](https://github.com/alvarotrigo/fullPage.js#creating-smaller-or-bigger-sections)
- [fullpage.js가 추가하는 상태 클래스](https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs)
- [지연 로딩](https://github.com/alvarotrigo/fullPage.js#lazy-loading)
- [임베디드 미디어 자동 재생/일시 정지](https://github.com/alvarotrigo/fullPage.js#auto-playpause-embedded-media)
- [확장 프로그램 사용](https://github.com/alvarotrigo.com/fullPage.js#use-extensions)
- [옵션](https://github.com/alvarotrigo/fullPage.js#options)
- [메서드](https://github.com/alvarotrigo/fullPage.js#methods)
- [콜백](https://github.com/alvarotrigo/fullPage.js#callbacks)
- [이슈 제보](https://github.com/alvarotrigo/fullPage.js#reporting-issues)
- [fullpage.js 기여하기](https://github.com/alvarotrigo/fullPage.js#contributing-to-fullpagejs)
- [변경 로그](https://github.com/alvarotrigo/fullPage.js#changelog)
- [빌드 태스크](https://github.com/alvarotrigo/fullPage.js#build-tasks)
- [리소스](https://github.com/alvarotrigo/fullPage.js#resources)
- [fullpage.js를 사용하는 사람들](https://github.com/alvarotrigo/fullPage.js#who-is-using-fullpagejs)
- [후원](https://github.com/alvarotrigo/fullPage.js#donations)
- [스폰서](https://github.com/alvarotrigo/fullPage.js#sponsors)
## 소개
기능 요청뿐만 아니라 코딩 스타일 개선에 대한 제안도 언제나 환영합니다.
사람들의 삶을 더 편하게 만들어 줄 멋진 라이브러리로 함께 만들어 봅시다!
## 호환성
fullPage.js는 모든 최신 브라우저 및 IE 11에서 완전히 작동합니다. IE < 11을 지원해야 하는 경우 [fullPage.js v3](https://github.com/alvarotrigo/fullPage.js/tree/3.1.2) 사용을 고려하세요.
또한 휴대전화, 태블릿 및 터치스크린 컴퓨터를 위한 터치 지원을 제공합니다.
fullpage.js를 지원해 주시는 [Browserstack](https://www.browserstack.com/)에 특별한 감사를 드립니다.
## 라이선스
### 상업용 라이선스
오픈 소스가 아닌 사이트, 테마, 프로젝트 및 애플리케이션을 개발하기 위해 fullPage를 사용하려면 상업용 라이선스가 적절한 라이선스입니다. 이 옵션을 사용하면 소스 코드가 비공개로 유지됩니다. 즉, 전체 애플리케이션 소스 코드를 변경할 필요가 없습니다.

오픈소스 라이선스에 동의하는 것입니다. [[Fullpage 상업용 라이선스 구매하기]](https://alvarotrigo.com/fullPage/pricing/)
### 오픈소스 라이선스
[GNU GPL v3 라이선스](https://www.gnu.org/licenses/gpl-3.0.html)와 호환되는 오픈소스 애플리케이션을 만드는 경우, GPLv3의 조건에 따라 fullPage를 사용할 수 있습니다.
\*\*fullPage.js가 사용되고 있음을 잘 보이는 곳에 고지해야 합니다. JavaScript 및 CSS 파일 내의 크레딧 주석은\*\* (파일을 결합하거나 압축한 후에도) 그대로 유지해야 합니다.
[fullPage 라이선스에 대해 자세히 알아보기](https://alvarotrigo.com/fullPage/pricing/).
## 사용법
예제 파일에서 볼 수 있듯이 다음 파일들을 포함해야 합니다:
- JavaScript 파일 `fullpage.js` (또는 압축된 버전인 `fullpage.min.js`)
- CSS 파일 `fullpage.css`
\*\*선택적으로\*\*, `css3:false`를 사용할 때 라이브러리에 기본으로 포함된 효과(`easeInOutCubic`) 외에 다른 이징(easing) 효과를 사용하고 싶다면 [easings 파일](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/easings.min.js)을 추가할 수 있습니다.
### bower 또는 npm을 사용하여 설치하기
\*\*선택적으로\*\* 선호하는 경우 bower 또는 npm을 사용하여 fullPage.js를 설치할 수 있습니다:
터미널:
```shell
// With bower
bower install fullpage.js
// With npm
npm install fullpage.js
```
### 파일 포함하기
```html

Webpack, Browserify 또는 Require.js를 사용하고 계신가요? [모듈 로더와 함께 fullPage.js를 사용하는 방법](https://github.com/alvarotrigo/fullPage.js/wiki/Use-module-loaders-for-fullPage.js)을 확인해 보세요.
### CDN의 선택적 사용
필요한 파일들을 불러오기 위해 CDN을 사용하고 싶다면, fullPage.js는 [JSDelivr](https://www.jsdelivr.com/package/npm/fullpage.js), [UNPKG](https://unpkg.com/browse/fullpage.js/dist/), [CDNJS](https://cdnjs.com/libraries/fullPage.js) 등에서 제공됩니다.
### 필수 HTML 구조
HTML 문서의 첫 번째 줄에 필수적인 [HTML DOCTYPE 선언](https://www.corelangs.com/html/introduction/doctype.html)을 작성하여 HTML 코드를 시작하세요. 그렇지 않으면 섹션 높이와 관련하여 문제가 발생할 수 있습니다. 제공되는 예제들은 HTML 5 doctype ``을 사용합니다.
각 섹션은 `section` 클래스를 포함하는 요소로 정의됩니다.
기본적으로 활성화되는 섹션은 첫 번째 섹션이며, 이는 홈 페이지로 간주됩니다.
섹션들은 래퍼(여기서는 ``) 내부에 배치되어야 합니다. 래퍼는 `body` 요소일 수 없습니다.
```html

Some section

```
첫 번째 섹션이나 섹션의 첫 번째 슬라이드가 아닌 다른 지점을 시작점으로 정의하고 싶다면, 먼저 불러오고자 하는 섹션과 슬라이드에 `active` 클래스를 추가하기만 하면 됩니다.
```html

Some section

```
섹션 내에 가로 슬라이더를 생성하려면, 각 슬라이드는 기본적으로 `slide` 클래스를 포함하는 요소로 정의됩니다.
```html

Slide 1

Slide 2

Slide 3

Slide 4

[`simple.html` 파일](https://github.com/alvarotrigo/fullPage.js/blob/master/examples/simple.html)에서 HTML 구조의 완전히 작동하는 예시를 확인할 수 있습니다.

### 초기화
#### 바닐라 자바스크립트로 초기화하기
tag 닫기 전에 fullPage.js를 호출하기만 하면 됩니다.
```javascript
new fullpage('#fullpage', {
//options here
autoScrolling:true,
scrollHorizontally: true
});
```

#### jQuery로 초기화하기
원하신다면 fullpage.js를 jQuery 플러그인으로 사용할 수도 있습니다!
```javascript
$(document).ready(function() {
$('#fullpage').fullpage({
//options here
autoScrolling:true,
scrollHorizontally: true
});
// Example of how to use fullpage.js methods
$.fn.fullpage.setAllowScrolling(false);
});
```

#### 모든 옵션이 포함된 바닐라 JS 예시
모든 옵션이 설정된 좀 더 복잡한 초기화는 다음과 같습니다:
```javascript
var myFullpage = new fullpage('#fullpage', {
// Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
// Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 600,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: true,
scrollOverflowMacStyle: false,
scrollOverflowReset: false,
skipIntermediateItems: false,
touchSensitivity: 15,
bigSectionsDestination: null,
adjustOnNavChange: true,
// Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
// Design
controlArrows: true,
controlArrowsHTML: [
'',
''
],
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
effects: false,
effectsOptions: [Object],
cinematic: false,
cinematicOptions: [Object],
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
dropEffect: false,
dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
waterEffect: false,
waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
cards: false,
cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},
// Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
lazyLoadThreshold: 0,
observer: true,
credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},
// Events
beforeLeave: function(origin, destination, direction, trigger){},
onLeave: function(origin, destination, direction, trigger){},
afterLoad: function(origin, destination, direction, trigger){},
afterRender: function(){},
afterResize: function(width, height){},
afterReBuild: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(section, origin, destination, direction, trigger){},
onSlideLeave: function(section, origin, destination, direction, trigger){},
onScrollOverflow: function(section, slide, position, direction){}
});
```

### 섹션 또는 슬라이드 링크 만들기
섹션에 앵커 링크와 함께 fullPage.js를 사용하고 있는 경우(각 섹션에서 `anchors` 옵션이나 `data-anchor` 속성 사용), 앵커 링크를 사용하여 섹션 내의 특정 슬라이드로 직접 이동할 수도 있습니다.

이것은 앵커가 있는 링크의 예시입니다: https://alvarotrigo.com/fullPage/#secondPage/2 (해당 섹션/슬라이드에 수동으로 접근했을 때 보게 되는 URL입니다)

URL의 마지막 부분이 `#secondPage/2`로 끝나는 것을 주목하세요.

다음과 같은 초기화 코드가 있을 때:
```javascript
new fullpage('#fullpage', {
anchors

:['firstPage', 'secondPage', 'thirdPage']
});
```
URL의 끝에 있는 앵커 `#secondPage/2`는 각각 목적지 섹션과 슬라이드를 정의합니다. 이전 URL에서 목적지 섹션은 `secondPage` 앵커로 정의된 섹션이 되고, 슬라이드는 인덱스 `2`를 사용하므로 2번째 슬라이드가 됩니다. (섹션의 첫 번째 슬라이드는 기술적으로 섹션이기 때문에 인덱스 0을 가집니다.)
다음과 같이 HTML 마크업에 `data-anchor` 속성을 사용했다면, 슬라이드의 인덱스 대신 사용자 정의 앵커를 사용할 수도 있었을 것입니다:
```html

Slide 1

Slide 2

Slide 3

Slide 4

```
이 마지막 경우에 우리가 사용할 URL은 `#secondPage/slide3`이 되며, 이는 이전의 `#secondPage/2`와 동일합니다.
`anchors` 배열이 제공되지 않은 경우, `data-anchor` 속성을 사용하여 동일한 방식으로 섹션 앵커를 정의할 수 있다는 점에 유의하세요.
\*\*주의하세요!\*\* `data-anchor` 태그는 사이트의 어떤 ID 요소(또는 IE의 경우 NAME 요소)와도 동일한 값을 가질 수 없습니다.
### 더 작거나 더 큰 섹션 만들기
[Demo](https://codepen.io/alvarotrigo/pen/BKjRYm) fullPage.js는 섹션과 슬라이드에서 전체 높이 제한을 제거하는 방법을 제공합니다. 뷰포트보다 높이가 더 작거나 큰 섹션을 만드는 것이 가능합니다. 이는 푸터에 이상적입니다.
모든 섹션에 이 기능을 사용하는 것은 의미가 없다는 점을 깨닫는 것이 중요합니다. 사이트가 처음 로드될 때 둘 이상의 섹션이 있는 경우, fullPage.js는 이미 뷰포트에 있기 때문에 다음 섹션을 보기 위해 전혀 스크롤하지 않습니다.
더 작은 섹션을 만들려면 적용하려는 섹션에 `fp-auto-height` 클래스를 사용하기만 하면 됩니다. 그러면 섹션/슬라이드 콘텐츠에 의해 정의된 높이를 갖게 됩니다.
```html

Whole viewport

Auto height

```
#### 반응형 자동 높이 섹션
[Demo](https://codepen.io/alvarotrigo/pen/MzByMa) `fp-auto-height-responsive` 클래스를 사용하여 반응형 자동 높이를 적용할 수 있습니다. 이렇게 하면 반응형 모드가 실행될 때까지 섹션이 전체 화면으로 유지됩니다. 그 후에는 콘텐츠에 필요한 크기로 변경되며, 이는 뷰포트보다 크거나 작을 수 있습니다.
### fullpage.js에 의해 추가되는 상태 클래스
fullpage.js는 사이트의 상태를 기록하기 위해 여러 요소에 다양한 클래스를 추가합니다:
- 현재 보이는 섹션과 슬라이드에 `active`가 추가됩니다.
- 현재 메뉴 요소에 `active`가 추가됩니다(`menu` 옵션을 사용하는 경우).
- 미디어 콘텐츠의 지연 로딩(lazy loading)을 트리거하는 섹션 또는 슬라이드에 `fp-loaded`가 추가됩니다.
- `fp-viewing-SECTION-SLIDE` 형식의 클래스가 사이트의 `body` 요소에 추가됩니다. (예: [`fp-viewing-secondPage-0`](https://alvarotrigo.com/fullPage/#secondPage)) `SECTION` 및 `SLIDE` 부분은 현재 섹션과 슬라이드의 앵커(앵커가 제공되지 않은 경우 인덱스)가 됩니다.
- 반응형 모드로 진입할 때 `body` 요소에 `fp-responsive`가 추가됩니다.
- fullpage.js가 활성화되면 `html` 요소에 `fp-enabled`가 추가됩니다. (그리고 제거될 때 삭제됩니다).
- fullPage.js가 제거될 때 fullPage.js 컨테이너에 `fp-destroyed`가 추가됩니다.
### 지연 로딩 (Lazy Loading)
[Demo](https://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js는 이미지, 비디오, 오디오 요소를 지연 로딩하는 방법을 제공하여 사이트 로딩 속도가 느려지거나 데이터 전송이 불필요하게 낭비되는 것을 방지합니다.
지연 로딩을 사용할 때, 이러한 모든 요소들은 뷰포트에 진입할 때만 로드됩니다.
지연 로딩을 활성화하려면 아래와 같이 `src` 속성을 `data-src`로 변경하기만 하면 됩니다:
```html
![]()

```
`data-src`를 사용하는 다른 지연 로딩 솔루션을 이미 사용 중인 경우, `lazyLoading: false` 옵션을 설정하여 fullPage.js 지연 로딩을 비활성화할 수 있습니다.
### 임베디드 미디어 자동 재생/일시 정지
[Demo](https://codepen.io/alvarotrigo/pen/pXEaaK) \*\*참고\*\*: 운영체제 및 브라우저에 따라 일부 모바일 기기에서는 자동 재생 기능이 작동하지 않을 수 있습니다 (예: [Safari on iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) 버전 < 10.0).
#### 섹션/슬라이드 로드 시 재생:
비디오나 오디오에 `autoplay` 속성을 사용하거나, 유튜브 아이프레임에 `autoplay=1` 파라미터를 사용하면 페이지 로드 시 미디어 요소가 재생됩니다.
섹션/슬라이드 로드 시 재생하려면 대신 `data-autoplay` 속성을 사용하세요. 예를 들면 다음과 같습니다:
```html

```
#### 떠날 때 일시 정지
임베디드된 HTML5 `[` / `` 및 유튜브 아이프레임은 섹션이나 슬라이드에서 벗어날 때 자동으로 일시 정지됩니다. `data-keepplaying` 속성을 사용하여 이를 비활성화할 수 있습니다. 예를 들면 다음과 같습니다:
```html

### 확장 기능 사용하기
fullpage.js는 기본 기능을 향상시키는 데 사용할 수 있는 [일련의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)을 제공합니다. 모든 확장 기능은 [fullpage.js options](https://github.com/alvarotrigo/fullPage.js#options)에 나열되어 있습니다.
확장 기능을 사용하려면 일반 fullpage.js 파일(`fullpage.js` 또는 `fullpage.min.js`) 대신 [`dist` 폴더](https://github.com/alvarotrigo/fullPage.js/tree/master/dist) 내부에 있는 압축된 파일 [`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/blob/master/dist/fullpage.extensions.min.js)를 사용해야 합니다.
확장 기능 파일을 획득한 후에는 fullPage보다 먼저 추가해야 합니다. 예를 들어, Continuous Horizontal 확장 기능을 사용하려면 확장 기능 파일을 먼저 포함한 다음 fullPage 파일의 확장 기능 버전을 포함해야 합니다.
```html
```
각 확장 기능에는 활성화 키(activation key)와 라이선스 키(license key)가 필요합니다. [여기에서 자세한 내용을 확인하세요](https://github.com/alvarotrigo/fullPage.js/wiki/How-to-activate-a-fullPage.js-extension).
그런 다음 [options](https://github.com/alvarotrigo/fullPage.js#options)에 설명된 대로 사용하고 설정할 수 있습니다.

## Options
### licenseKey
(기본값 `null`). **이 옵션은 필수입니다.** 오픈 소스가 아닌 프로젝트에서 fullPage를 사용하는 경우, fullPage 상용 라이선스를 구매할 때 제공된 라이선스 키를 사용해야 합니다. 프로젝트가 오픈 소스이고 GPLv3 라이선스와 호환되는 경우 [라이선스 키를 요청](https://alvarotrigo.com/fullPage/extensions/requestKey.html)할 수 있습니다. 라이선스에 대한 자세한 내용은 [여기](https://github.com/alvarotrigo/fullPage.js#license)와 [웹사이트](https://alvarotrigo.com/fullPage/pricing/)에서 확인하세요. 사용 예시:
```javascript
new fullpage('#fullpage', {
licenseKey: 'YOUR\_KEY\_HERE'
});
```

### controlArrows
(기본값 `true`) 슬라이드가 좌우로 이동할 때 컨트롤 화살표를 사용할지 여부를 결정합니다.

### controlArrowsHTML
(기본값 `['', ''],`).
가로 슬라이드가 있는 섹션의 컨트롤 화살표에 적용할 HTML 구조와 클래스를 정의하는 방법을 제공합니다. 배열에는 두 화살표의 구조가 모두 포함됩니다. 첫 번째 항목은 왼쪽 화살표이고 두 번째 항목은 오른쪽 화살표입니다.

### verticalCentered
(기본값 `true`) flexbox를 사용하여 콘텐츠를 수직 중앙 정렬합니다. 잠재적인 문제를 방지하려면 콘텐츠를 `div`로 감싸는 것이 좋습니다. (`flex-direction: column; display: flex; justify-content: center;`를 사용합니다.)

### scrollingSpeed
(기본값 `700`) 스크롤 전환에 걸리는 시간(밀리초)입니다.

### sectionsColor
(기본값 `none`) 각 섹션의 CSS `background-color` 속성을 정의합니다.
예시:
```javascript
new fullpage('#fullpage', {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
```

### anchors
(기본값 `[]`) 각 섹션의 URL에 표시될 앵커 링크(#example)를 정의합니다. 앵커 값은 고유해야 합니다. 배열에서의 앵커 위치는 앵커가 적용될 섹션을 정의합니다(두 번째 위치는 두 번째 섹션 등). 앵커를 사용하면 브라우저를 통해 앞으로 가기와 뒤로 가기 탐색도 가능해집니다. 또한 이 옵션을 사용하면 사용자가 특정 섹션이나 슬라이드를 북마크할 수 있습니다. **주의하세요!** 앵커는 사이트의 어떤 ID 요소(또는 IE의 NAME 요소)와도 같은 값을 가질 수 없습니다.
[여기](#creating-links-to-sections-or-slides)에 설명된 대로 `data-anchor` 속성을 사용하여 HTML 구조 내에서 직접 앵커를 정의할 수 있습니다.

### lockAnchors
(기본값 `false`) URL의 앵커가 라이브러리에 전혀 영향을 미치지 않을지 여부를 결정합니다. 자체 함수 및 콜백을 위해 내부적으로 앵커를 계속 사용할 수 있지만, 사이트 스크롤에는 영향을 미치지 않습니다. URL에서 앵커를 사용하는 다른 플러그인과 fullPage.js를 결합하려는 경우에 유용합니다.

### easing
(기본값 `easeInOutCubic`) 세로 및 가로 스크롤에 사용할 전환 효과를 정의합니다.
`vendors/easings.min.js` 파일 또는 [jQu

ery UI](https://jqueryui.com/)를 사용하여 [해당 트랜지션 중 일부](https://api.jqueryui.com/easings/)를 사용할 수 있습니다. 다른 라이브러리를 대신 사용할 수도 있습니다.
### easingcss3
(기본값 `ease`) `css3:true`를 사용할 경우 적용할 트랜지션 효과를 정의합니다. [미리 정의된 효과들](https://www.w3schools.com/cssref/css3\_pr_transition-timing-function.asp)(예: `linear`, `ease-out` 등)을 사용하거나 `cubic-bezier` 함수를 사용하여 자신만의 효과를 만들 수 있습니다. 이를 위해 [Matthew Lein CSS Easing Animation Tool](https://matthewlein.com/ceaser/)을 사용하는 것이 좋습니다.
### loopTop
(기본값 `false`) 첫 번째 섹션에서 위로 스크롤할 때 마지막 섹션으로 스크롤할지 여부를 정의합니다.
### loopBottom
(기본값 `false`) 마지막 섹션에서 아래로 스크롤할 때 첫 번째 섹션으로 스크롤할지 여부를 정의합니다.
### loopHorizontal
(기본값 `true`) 수평 슬라이더가 마지막 슬라이드나 이전 슬라이드에 도달한 후 루프(반복)할지 여부를 정의합니다.
### css3
(기본값 `true`) 섹션과 슬라이드 내에서 스크롤할 때 JavaScript 또는 CSS3 변환 중 어느 것을 사용할지 정의합니다. CSS3를 지원하는 브라우저를 사용하는 태블릿 및 모바일 기기에서 움직임을 빠르게 만드는 데 유용합니다. 이 옵션이 `true`로 설정되어 있고 브라우저가 CSS3를 지원하지 않는 경우, 대신 대체(fallback) 기능이 사용됩니다.
### autoScrolling
(기본값 `true`) "자동" 스크롤을 사용할지 "일반" 스크롤을 사용할지 정의합니다. 또한 태블릿 및 모바일폰에서 섹션이 브라우저/기기 창에 맞춰지는 방식에도 영향을 줍니다.
### fitToSection
(기본값 `true`) 섹션을 뷰포트에 맞출지 여부를 결정합니다. `true`로 설정되면 현재 활성화된 섹션이 항상 전체 뷰포트를 채우게 됩니다. 그렇지 않으면 사용자가 섹션 중간에 자유롭게 멈출 수 있습니다.
### fitToSectionDelay
(기본값 1000) `fitToSection`이 true로 설정된 경우, 설정된 밀리초(milliseconds)만큼 맞춤(fitting) 조정을 지연시킵니다.
### scrollBar
(기본값 `false`) 사이트의 **수직 섹션**에 스크롤바를 사용할지 여부를 결정합니다. 스크롤바를 사용하는 경우에도 `autoScrolling` 기능은 예상대로 작동합니다. 또한 사용자는 스크롤바를 사용하여 사이트를 자유롭게 스크롤할 수 있으며, 스크롤이 완료되면 fullPage.js가 화면에 섹션을 맞춥니다.
### paddingTop
(기본값 `0`) 숫자 값과 단위(paddingTop: '10px', paddingTop: '10em' 등)를 사용하여 각 섹션의 상단 패딩을 정의합니다. 고정 헤더(fixed header)를 사용할 때 유용합니다.
### paddingBottom
(기본값 `0`) 숫자 값과 단위(paddingBottom: '10px', paddingBottom: '10em' 등)를 사용하여 각 섹션의 하단 패딩을 정의합니다. 고정 푸터(fixed footer)를 사용할 때 유용합니다.
### fixedElements
(기본값 `null`) `css3` 옵션을 사용할 때 고정 상태를 유지하기 위해 플러그인의 스크롤 구조에서 제외할 요소들을 정의합니다. 해당 요소들에 대한 Javascript 셀렉터 문자열이 필요합니다. (예: `fixedElements: '#element1, .element2'`)
### normalScrollElements
(기본값 `null`) [데모](https://codepen.io/alvarotrigo/pen/RmVazM) 특정 요소 위에서 스크롤할 때 자동 스크롤을 방지하고 싶다면 이 옵션을 사용해야 합니다. (지도, 스크롤 가능한 div 등에 유용함) 해당 요소들에 대한 Javascript 셀렉터 문자열이 필요합니다. (예: `normalScrollElements: '#element1, .element2'`). 이 옵션은 섹션이나 슬라이드 요소 자체에는 적용하지 않아야 합니다.
### bigSectionsDestination
(기본값 `null`) [데모](https://codepen.io/alvarotrigo/pen/vYLdMrx) 높이가 뷰포트보다 크고 `scrollOverflow:true`를 사용하지 않는 섹션으로 스크롤하는 방식을 정의합니다. ([더 작거나 큰 섹션을 만드는 방법](https://github.com/alvarotrigo/fullPage.js#creating-smaller-or-bigger-sections) 읽어보기). 기본적으로 fullPage.js는 목적지 섹션의 위쪽 섹션에서 오면 상단으로, 아래쪽 섹션에서 오면 하단으로 스크롤합니다. 가능한 값은 `top`, `bottom`, `null`입니다.
### adjustOnNavChange
(기본값 `true`)
모바일 내비게

ion 또는 주소 표시줄의 크기가 변경되거나 표시 여부가 전환됩니다. `false`로 설정하면 네비게이션 바가 줄어들거나 숨겨질 때 섹션이 전체 높이로 표시되지 않습니다.
### keyboardScrolling
(기본값 `true`) 키보드를 사용하여 콘텐츠를 탐색할 수 있는지 여부를 정의합니다.
### touchSensitivity
(기본값 `5`) 브라우저 창 너비/높이의 백분율을 정의하며, 다음 섹션/슬라이드로 이동하기 위해 스와이프가 측정되어야 하는 거리를 나타냅니다.
### skipIntermediateItems
(기본값 `false`). 연속되지 않은 수직 섹션이나 수평 슬라이드 간을 이동할 때 스크롤 애니메이션을 건너뛸지 여부를 결정합니다. 가능한 값은 `true`, `false`, `sections`, `slides`이며, 이 동작을 수직, 수프 또는 양방향 모두에 적용할 수 있습니다.
### continuousVertical
(기본값 `false`) 마지막 섹션에서 아래로 스크롤할 때 첫 번째 섹션으로 스크롤되는지, 그리고 첫 번째 섹션에서 위로 스크롤할 때 마지막 섹션으로 스크롤되는지 여부를 정의합니다. `loopTop`, `loopBottom` 또는 사이트에 존재하는 스크롤 바(`scrollBar:true` 또는 `autoScrolling:false`)와 호환되지 않습니다.
### continuousHorizontal
(기본값 `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 마지막 슬라이드에서 오른쪽으로 슬라이드할 때 첫 번째 슬라이드로 오른쪽 슬라이드할지 여부와, 첫 번째 슬라이드에서 왼쪽으로 슬라이드할 때 마지막 슬라이드로 왼쪽 슬라이드할지 여부를 정의합니다. `loopHorizontal`과 호환되지 않습니다. fullpage.js >= 3.0.1이 필요합니다.
### scrollHorizontally
(기본값 `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 마우스 휠이나 트랙패드를 사용하여 슬라이더 내에서 수평으로 슬라이드할지 여부를 정의합니다. `autoScrolling:true`를 사용할 때만 사용할 수 있습니다. 스토리텔링에 이상적입니다. fullpage.js >= 3.0.1이 필요합니다.
### interlockedSlides
(기본값 `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 하나의 수평 슬라이드를 이동할 때 동일한 방향으로 다른 섹션의 슬라이드도 강제로 슬라이드할지 여부를 결정합니다. 가능한 값은 `true`, `false` 또는 연동된 섹션 배열입니다. 예를 들어 1부터 시작하는 `[1,3,5]`입니다. fullpage.js >= 3.0.1이 필요합니다.
### dragAndMove
(기본값 `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 마우스나 손가락을 사용하여 섹션과 슬라이드를 드래그하고 플리킹하는 기능을 활성화하거나 비활성화합니다. fullpage.js >= 3.0.1이 필요합니다. 가능한 값은 다음과 같습니다:
- `true`: 기능을 활성화합니다.
- `false`: 기능을 비활성화합니다.
- `vertical`: 수직 방향으로만 기능을 활성화합니다.
- `horizontal`: 수평 방향으로만 기능을 활성화합니다.
- `fingersonly`: 터치 디바이스에서만 기능을 활성화합니다.
- `mouseonly`: 데스크톱 디바이스(마우스 및 트랙패드)에서만 기능을 활성화합니다.
### offsetSections
(기본값 `false`) [Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). 백분율을 기반으로 전체 화면이 아닌 섹션을 사용할 수 있는 방법을 제공합니다. 다음 또는 이전 섹션의 일부를 표시하여 방문자에게 사이트에 더 많은 콘텐츠가 있음을 보여주는 데 이상적입니다. fullPage.js >= 3.0.1이 필요합니다.
각 섹션의 백분율을 정의하려면 `data-percentage` 속성을 사용해야 합니다. 뷰포트에서 섹션의 중앙 정렬은 `data-centered` 속성의 부울 값(지정하지 않은 경우 기본값 `true`)을 사용하여 결정할 수 있습니다. 예를 들면 다음과 같습니다:
``` html

### resetSliders
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 섹션을 떠난 후 모든 슬라이드를 초기화할지 여부를 정의합니다. fullpage.js >= 3.0.1 버전이 필요합니다.
### fadingEffect
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 기본 스크롤 효과 대신 페이딩 효과를 사용할지 여부를 정의합니다. 가능한 값은 `true`, `false`, `sections`, `slides`입니다. 따라서 수직 또는 수호적으로만 적용하거나 둘 다 동시에 적용할 수 있습니다. `autoScrolling:true`를 사용할 때만 사용할 수 있습니다. fullpage.js >= 3.0.1 버전이 필요합니다.
### animateAnchor
(기본값 `true`) 앵커(#)가 지정된 상태로 사이트가 로드될 때 대상 위치로 애니메이션과 함께 스크롤될지, 아니면 지정된 섹션에 바로 로드될지 정의합니다.
### recordHistory
(기본값 `true`) 사이트의 상태를 브라우저 기록에 푸시할지 여부를 정의합니다. `true`로 설정하면 사이트의 각 섹션/슬라이드가 새 페이지처럼 작동하며, 브라우저의 뒤로 가기 및 앞으로 가기 버튼을 통해 이전 또는 다음 사이트 상태로 섹션/슬라이드가 스크롤됩니다. `false`로 설정하면 URL은 계속 변경되지만 브라우저 기록에는 영향을 주지 않습니다. 이 옵션은 `autoScrolling:false`를 사용할 때 자동으로 꺼집니다.
### menu
(default `false`) 섹션과 연결할 메뉴를 지정하는 데 선택자를 사용할 수 있습니다. 이렇게 하면 섹션이 스크롤될 때 `active` 클래스를 사용하여 메뉴의 해당 요소가 활성화됩니다.
이 기능은 메뉴를 생성하는 대신, 해당 앵커 링크가 있는 지정된 메뉴의 요소에 `active` 클래스만 추가합니다.
메뉴의 요소와 섹션을 연결하려면 섹션 내에서 사용된 것과 동일한 앵커 링크를 사용하는 HTML 5 데이터 태그(`data-menuanchor`)가 필요합니다. 예시:
```html

* [First section](#firstPage)
* [Second section](#secondPage)
* [Third section](#thirdPage)
* [Fourth section](#fourthPage)

```
```javascript
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
```
\*\*참고:\*\* `css3:true` 사용 시 발생할 수 있는 문제를 방지하려면 메뉴 요소가 fullpage 래퍼 외부에 배치되어야 합니다. 그렇지 않으면 플러그인 자체에 의해 `body`에 추가됩니다.
### navigation
(기본값 `false`) `true`로 설정하면 작은 원들로 이루어진 내비게이션 바가 표시됩니다.
### navigationPosition
(기본값 `none`) `left` 또는 `right`로 설정할 수 있으며, (내비게이션 바를 사용하는 경우) 내비게이션 바가 표시될 위치를 정의합니다.
### navigationTooltips
(기본값 []) 내비게이션 원들이 사용되는 경우 표시할 툴팁을 정의합니다. 예시: `navigationTooltips: ['firstSlide', 'secondSlide']`. 선호하는 경우 각 섹션에 `data-tooltip` 속성을 사용하여 정의할 수도 있습니다.
### showActiveTooltip
(기본값 `false`) 수직 내비게이션에서 현재 보고 있는 섹션에 대한 지속적인 툴팁을 표시합니다.
### slidesNavigation
(기본값 `false`) `true`로 설정하면 사이트의 각 가로 슬라이더에 대해 작은 원들로 이루어진 내비게이션 바가 표시됩니다.
### slidesNavPosition
(기본값 `bottom`) 슬라이더용 가로 내비게이션 바의 위치를 정의합니다. 값으로 `top`과 `bottom`을 허용합니다. 상단 또는 하단에서의 거리뿐만 아니라 색상과 같은 기타 스타일을 결정하기 위해 CSS 스타일을 수정할 수 있습니다.
### scrollOverflow
(기본값 `true`) 콘텐츠의 높이가 섹션/슬라이드의 높이보다 큰 경우 스크롤을 생성할지 여부를 정의합니다. 기본값인 `scrollBar: false`가 필요합니다. 특정 섹션이나 슬라이드에서 fullpage.js가 스크롤바를 생성하지 못하도록 하려면 `fp-noscroll` 클래스를 사용하세요. 예를 들면 다음과 같습니다:

` section 요소에서 `fp-auto-height-responsive`를 사용할 때 반응형 모드에서 scrolloverflow가 적용되는 것을 방지할 수도 있습니다.
### scrollOverflowReset
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 허용되는 값은 `true`, `false`, `sections`, `slides`입니다. `true`로 설정하면 다른 섹션이나 슬라이드로 이동할 때 스크롤바가 있는 섹션/슬라이드의 콘텐츠를 위로 스크롤합니다. 이렇게 하면 아래에 있는 섹션에서 스크롤할 때도 섹션/슬라이드가 항상 콘텐츠의 시작 부분을 표시하게 됩니다. 섹션이나 슬라이드에 `fp-no-scrollOverflowReset` 클래스를 추가하면 해당 특정 패널에 대해 이 기능이 비활성화됩니다.
### scrollOverflowMacStyle
(기본값 `false`) 활성화되면 이 옵션은 기본 스크롤바 대신 "Mac 스타일"의 스크롤바를 사용하므로, Windows 컴퓨터에서는 꽤 다르게 보일 수 있습니다.
### sectionSelector
(기본값 `.section`) 플러그인 섹션에 사용되는 자바스크립트 선택자를 정의합니다. fullpage.js와 동일한 선택자를 사용하는 다른 플러그인과의 문제를 방지하기 위해 간혹 변경해야 할 수도 있습니다.
### slideSelector
(기본값 `.slide`) 플러그인 슬라이드에 사용되는 자바스크립트 선택자를 정의합니다. fullpage.js와 동일한 선택자를 사용하는 다른 플러그인과의 문제를 방지하기 위해 간혹 변경해야 할 수도 있습니다.
### responsiveWidth
(기본값 `0`) 정의된 픽셀 너비 미만에서는 일반 스크롤(`autoScrolling:false`)이 사용됩니다. 사용자가 자체 반응형 CSS에 사용하려는 경우 body 태그에 `fp-responsive` 클래스가 추가됩니다. 예를 들어 900으로 설정하면 브라우저의 너비가 900 미만일 때 플러그인이 일반 사이트처럼 스크롤됩니다.
### responsiveHeight
(기본값 `0`) 정의된 픽셀 높이 미만에서는 일반 스크롤(`autoScrolling:false`)이 사용됩니다. 사용자가 자체 반응형 CSS에 사용하려는 경우 body 태그에 `fp-responsive` 클래스가 추가됩니다. 예를 들어 900으로 설정하면 브라우저의 높이가 900 미만일 때 플러그인이 일반 사이트처럼 스크롤됩니다.
### responsiveSlides
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. `true`로 설정하면 반응형 모드가 실행될 때 슬라이드가 수직 섹션으로 전환됩니다(위에 설명된 `responsiveWidth` 또는 `responsiveHeight` 옵션 사용). fullpage.js >= 3.0.1이 필요합니다.
### cinematic
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/cinematic.html)입니다. 섹션의 슬라이더 효과를 활성화 또는 비활성화합니다. fullpage.js >= 4.0.41이 필요합니다.
### cinematicOptions
(기본값: `{Object}`) `cinematic:true` 옵션을 사용할 때 콘텐츠 애니메이션 파라미터를 구성할 수 있습니다. [자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cinematic-Effects#cinematicoptions).
### effects
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/slider-effects.html)입니다. 섹션의 슬라이더 효과를 활성화 또는 비활성화합니다. fullpage.js >= 4.0.35가 필요합니다.
### effectsOptions
(기본값: `{Object}` ["focus" 프리셋](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Slide-Effects#20-available-presets) 설정).
`effects:true` 옵션을 사용할 때 효과의 파라미터를 구성할 수 있습니다. [효과 옵션 적용 방법에 대한 자세한 내용](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Slide-Effects#effects-options-documentation).
### parallax
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/parallax.html)입니다. 섹션 / 슬라이드에 패럴랙스 배경 효과를 사용할지 여부를 정의합니다. `fp-auto-height` 섹션, `offsetSerctions`, `dragAndMove`와는 호환되지 않습니다. [패럴랙스 옵션 적용 방법에 대한 자세한 내용](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax).
### parallaxOptions
(기본값: `{ type: 'reveal', percentage: 62, property: 'translate'}`).
`par

allax:true`. [Parallax 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension---Parallax).
### dropEffect
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 섹션 / 슬라이드에 드롭 효과를 사용할지 여부를 정의합니다. [드롭 효과 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Drop-Effect).
### dropEffectOptions
(기본값: `{ speed: 2300, color: '#F82F4D', zIndex: 9999}`).
`dropEffect:true` 옵션을 사용할 때 드롭 효과의 파라미터를 설정할 수 있습니다. [드롭 효과 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Drop-Effect).
### waterEffect
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 섹션 / 슬라이드에 웨터 효과를 사용할지 여부를 정의합니다. [웨터 효과 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Water-Effect).
### waterEffectOptions
(기본값: `{ animateContent: true, animateOnMouseMove: true}`).
`waterEffect:true` 옵션을 사용할 때 웨터 효과의 파라미터를 설정할 수 있습니다. [웨터 효과 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Water-Effect).
### cards
(기본값 `false`) [fullpage.js의 확장 기능](https://alvarotrigo.com/fullPage/extensions/)입니다. 섹션/슬라이드에 카드 효과를 사용할지 여부를 정의합니다. [카드 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cards).
### cardsOptions
(기본값: `{ perspective: 100, fadeContent: true, fadeBackground: true}`).
`cards:true` 옵션을 사용할 때 카드 효과의 파라미터를 설정할 수 있습니다. [카드 옵션 적용 방법에 대해 자세히 알아보기](https://github.com/alvarotrigo/fullPage.js/wiki/Extension-Cards).
### lazyLoading
(기본값 `true`) 지연 로딩이 기본적으로 활성화되어 있으며, [지연 로딩 문서](https://github.com/alvarotrigo/fullPage.js#lazy-loading)에 설명된 대로 `data-src` 속성을 포함하는 모든 미디어 요소를 지연 로드합니다. 다른 지연 로딩 라이브러리를 사용하려면 이 fullpage.js 기능을 비활성화할 수 있습니다.
### lazyLoadThreshold
(기본값 `0`) 현재 섹션을 기준으로 미디어 요소를 지연 로드해야 하는 인접한 수직 섹션 및 수평 슬라이드의 개수를 지정합니다. 미리 로드할 이전 및 다음 섹션 또는 슬라이드 수를 지정하려면 숫자를 사용하세요.
### observer
(기본값 `true`) 페이지의 HTML 구조 변경 사항을 관찰할지 여부를 정의합니다. 활성화하면 fullpage.js가 이러한 변경 사항에 자동으로 반응하고 그에 따라 스스로를 업데이트합니다. 섹션이나 슬라이드를 추가, 제거 또는 숨길 때 이상적입니다.
### credits
(기본값 `{enabled: true, label: 'Made with fullpage.js', position: 'right'}`).
fullpage.js 크레딧을 사용할지 여부를 정의합니다. GPLv3 라이선스의 조항 0, 4, 5 및 7에 따라, GPLv3 하에서 fullpage.js를 사용하는 사람은 fullpage.js가 사용되고 있음을 눈에 띄게 고지해야 합니다. 이 옵션을 활성화 상태로 유지하여 출처를 밝히는 것을 권장합니다. \*\*참고:\*\* 이 옵션에는 유효한 `licenseKey` 값이 필요합니다.
## Methods
[여기](https://alvarotrigo.com/fullPage/examples/methods.html)에서 작동 모습을 확인할 수 있습니다.
### getActiveSection()
[데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성 섹션과 그 속성이 포함된 객체(타입 [Section](https://github.com/alvarotrigo/fullPage.js#callbacks))를 가져옵니다.
```javascript
fullpage\_api.getActiveSection();
```
### getActiveSlide()
[데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성 슬라이드와 그 속성이 포함된 객체(타입 [Slide](https://github.com/alvarotrigo/fullPage.js#callbacks))를 가져옵니다.
```javascript
fullpage\_api.getActiveSlide();
```
### getScrollY() & getScrollX
[데모](https://codepen.io/alvarotrigo/pen/GRyGqro) `getScrollY`는 fullPage의 Y 위치를 가져옵니다.

apper. `getScrollX`는 활성화된 가로 슬라이드의 X 위치를 가져옵니다.
```javascript
fullpage\_api.getScrollY();
fullpage\_api.getScrollX();
```
### moveSectionUp()
[Demo](https://codepen.io/alvarotrigo/pen/GJXNMN) 한 섹션 위로 스크롤합니다:
```javascript
fullpage\_api.moveSectionUp();
```
---
### moveSectionDown()
[Demo](https://codepen.io/alvarotrigo/pen/jPvVZx) 한 섹션 아래로 스크롤합니다:
```javascript
fullpage\_api.moveSectionDown();
```
---
### moveTo(section, slide)
[Demo](https://codepen.io/alvarotrigo/pen/doqOmY) 페이지를 지정된 섹션과 슬라이드로 스크롤합니다. 첫 번째 섹션의 인덱스는 1이며, 기본적으로 보이는 첫 번째 슬라이드의 인덱스는 0입니다.
```javascript
/\*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide \*/
fullpage\_api.moveTo('firstSlide', 2);
```
```javascript
//Scrolling to the 3rd section (with index 3) in the site
fullpage\_api.moveTo(3, 0);
//Which is the same as
fullpage\_api.moveTo(3);
```
---
### silentMoveTo(section, slide)
[Demo](https://codepen.io/alvarotrigo/pen/doqOeY)
[`moveTo`](https://github.com/alvarotrigo/fullPage.js#movetosection-slide)와 정확히 같지만, 이 경우 애니메이션 없이 스크롤을 수행합니다. 목적지로 즉시 이동합니다.
```javascript
/\*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide \*/
fullpage\_api.silentMoveTo('firstSlide', 2);
```
---
### moveSlideRight()
[Demo](https://codepen.io/alvarotrigo/pen/Wvgoyz)
현재 섹션의 가로 슬라이더를 다음 슬라이드로 스크롤합니다:
```javascript
fullpage\_api.moveSlideRight();
```
---
### moveSlideLeft()
[Demo](https://codepen.io/alvarotrigo/pen/gpdLjW)
현재 섹션의 가로 슬라이더를 이전 슬라이드로 스크롤합니다:
```javascript
fullpage\_api.moveSlideLeft();
```
---
### setAutoScrolling(boolean)
[Demo](https://codepen.io/alvarotrigo/pen/rVZWrR) 실시간으로 스크롤 구성을 설정합니다.
페이지 스크롤 동작 방식을 정의합니다. `true`로 설정하면 "자동" 스크롤을 사용하고, 그렇지 않으면 사이트의 "수동" 또는 "일반" 스크롤을 사용합니다.
```javascript
fullpage\_api.setAutoScrolling(false);
```
---
### setFitToSection(boolean)
[Demo](https://codepen.io/alvarotrigo/pen/GJXNYm)
섹션을 화면에 맞출지 여부를 결정하는 `fitToSection` 옵션의 값을 설정합니다.
```javascript
fullpage\_api.setFitToSection(false);
```
---
### fitToSection()
[Demo](https://codepen.io/alvarotrigo/pen/JWWagj)
뷰포트에 맞게 가장 가까운 활성 섹션으로 스크롤합니다.
```javascript
fullpage\_api.fitToSection();
```
---
### setLockAnchors(boolean)
[Demo](https://codepen.io/alvarotrigo/pen/yNxVRQ)
URL에서 앵커가 영향을 미칠지 여부를 결정하는 `lockAnchors` 옵션의 값을 설정합니다.
```javascript
fullpage\_api.setLockAnchors(false);
```
---
### setAllowScrolling(boolean, [directions])
[Demo](https://codepen.io/alvarotrigo/pen/EjeNdq) 마우스 휠, 트랙패드 또는 터치 제스처(기본적으로 활성화됨)를 사용하여 섹션/슬라이드를 스크롤할 수 있는 기능을 추가하거나 제거합니다. 키보드 스크롤은 비활성화되지 않음에 주의하세요.
이를 위해서는 `setKeyboardScrolling`을 사용해야 합니다.
- `directions`: (선택적 매개변수) 허용되는 값: `all`, `up`, `down`, `left`, `right` 또는 `down, right`와 같이 쉼표로 구분된 이들의 조합. 스크롤이 활성화되거나 비활성화될 방향을 정의합니다.
```javascript
//disabling scrolling
fullpage\_api.setAllowScrolling(false);
//disabling scrolling down
fullpage\_api.setAllowScrolling(false, 'down');
//disabling scrolling down and right
fullpage\_api.setAllowScrolling(false, 'down, right');
```
---
### setKeyboardScrolling(boolean, [directions])
[Demo](https://codepen.io/alvarotrigo/pen/GJXNwm) 키보드를 사용하여 섹션을 스크롤할 수 있는 기능(기본적으로 활성화됨)을 추가하거나 제거합니다.
- `directions`: (선택적 매개변수) 허용되는 값: `all`, `up`, `down`, `left`, `right` 또는 조합

쉼표로 구분하여 `down, right`와 같이 입력합니다. 스크롤을 활성화하거나 비활성화할 방향을 정의합니다.
```javascript
//disabling all keyboard scrolling
fullpage\_api.setKeyboardScrolling(false);
//disabling keyboard scrolling down
fullpage\_api.setKeyboardScrolling(false, 'down');
//disabling keyboard scrolling down and right
fullpage\_api.setKeyboardScrolling(false, 'down, right');
```
---
### setRecordHistory(boolean)
[Demo](https://codepen.io/alvarotrigo/pen/rVZWQb) URL의 해시가 변경될 때마다 기록을 남길지 여부를 정의합니다.
```javascript
fullpage\_api.setRecordHistory(false);
```
---
### setScrollingSpeed(milliseconds)
[Demo](https://codepen.io/alvarotrigo/pen/NqLbeY) 스크롤 속도를 밀리초 단위로 정의합니다.
```javascript
fullpage\_api.setScrollingSpeed(700);
```
---
### destroy(type)
[Demo](https://codepen.io/alvarotrigo/pen/bdxBzv) 플러그인 이벤트와 선택적으로 HTML 마크업 및 스타일을 제거합니다.
AJAX를 사용하여 콘텐츠를 로드할 때 사용하기 이상적입니다.
- `type`: (선택적 매개변수) 비워두거나 `all`을 사용할 수 있습니다. `all`이 전달되면 fullpage.js에서 사용하는 HTML 마크업과 스타일이 제거됩니다. 이렇게 하면 플러그인이 수정되기 전의 원본 HTML 마크업이 유지됩니다.
```javascript
//destroying all Javascript events created by fullPage.js (scrolls, hashchange in the URL...)
fullpage\_api.destroy();
//destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.
fullpage\_api.destroy('all');
```
---
### reBuild()
새로운 창 크기나 콘텐츠에 맞게 DOM 구조를 업데이트합니다.
AJAX 호출이나 사이트 DOM 구조의 외부 변경과 함께 사용할 때, 특히 `scrollOverflow:true`를 사용할 때 이상적입니다.
```javascript
fullpage\_api.reBuild();
```
---
### setResponsive(boolean)
[Demo](https://codepen.io/alvarotrigo/pen/WxOyLA) 페이지의 반응형 모드를 설정합니다. `true`로 설정하면 autoScrolling이 꺼지며, `responsiveWidth` 또는 `responsiveHeight` 옵션이 실행되었을 때와 정확히 동일한 결과가 나타납니다.
```javascript
fullpage\_api.setResponsive(true);
```
---
### responsiveSlides.toSections()
[Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). fullpage.js >= 3.0.1이 필요합니다.
가로 슬라이드를 세로 섹션으로 전환합니다.
```javascript
fullpage\_api.responsiveSlides.toSections();
```
---
### responsiveSlides.toSlides()
[Extension of fullpage.js](https://alvarotrigo.com/fullPage/extensions/). fullpage.js >= 3.0.1이 필요합니다.
(세로 섹션으로 변환되었던) 원래의 슬라이드를 다시 가로 슬라이드로 되돌립니다.
```javascript
fullpage\_api.responsiveSlides.toSlides();
```
## 콜백 (Callbacks)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) [여기](https://alvarotrigo.com/fullPage/examples/callbacks.html)에서 동작하는 모습을 확인할 수 있습니다.
`onLeave`와 같은 일부 콜백은 다음 속성을 포함하는 객체(Object) 타입의 매개변수를 포함합니다:
- `anchor`: \*(String)\* 항목의 앵커.
- `index`: \*(Number)\* 항목의 인덱스.
- `item`: \*(DOM element)\* 항목 요소.
- `isFirst`: \*(Boolean)\* 항목이 첫 번째 자식인지 여부.
- `isLast`: \*(Boolean)\* 항목이 마지막 자식인지 여부.
### afterLoad (`origin`, `destination`, `direction`, `trigger`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 섹션이 로드되고 스크롤이 끝난 후 실행되는 콜백입니다.
매개변수:
- `origin`: \*(Object)\* 출발 섹션.
- `destination`: \*(Object)\* 도착 섹션.
- `direction`: \*(String)\* 스크롤 방향에 따라 `up` 또는 `down` 값을 가집니다.
- `trigger`: \*(String)\* 스크롤을 유발한 원인을 나타냅니다. "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav" 중 하나일 수 있습니다.
예시:
```javascript
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(origin, destination, direction, trigger){
var origin = this;
//using index

if(origin.index == 2){
alert("Section 3 ended loading");
}
//using anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
```
---
### onLeave (`origin`, `destination`, `direction`, `trigger`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 사용자가 섹션을 떠날 때, 새로운 섹션으로 전환되는 시점에 한 번 실행됩니다.
`false`를 반환하면 전환이 일어나기 전에 이동이 취소됩니다.
매개변수:
- `origin`: \*(Object)\* 출발 섹션입니다.
- `destination`: \*(Object)\* 도착 섹션입니다.
- `direction`: \*(String)\* 스크롤 방향에 따라 `up` 또는 `down` 값을 가집니다.
- `trigger`: \*(String)\* 스크롤을 유발한 요인을 나타냅니다. 가능한 값: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".
예시:
```javascript
new fullpage('#fullpage', {
onLeave: function(origin, destination, direction, trigger){
var leavingSection = this;
//섹션 2를 떠난 후
if(origin.index == 1 && direction =='down'){
alert("Going to section 3!");
}
else if(origin.index == 1 && direction == 'up'){
alert("Going to section 1!");
}
}
});
```
---
### beforeLeave (`origin`, `destination`, `direction`, `trigger`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 섹션을 떠나기 직전, 정확히 전환이 일어나기 \*\*직전\*\*에 실행됩니다.
이 콜백에서 `false`를 반환하여 스크롤이 일어나기 전에 이를 방지하고 취소할 수 있습니다.
매개변수:
- `origin`: \*(Object)\* 출발 섹션입니다.
- `destination`: \*(Object)\* 도착 섹션입니다.
- `direction`: \*(String)\* 스크롤 방향에 따라 `up` 또는 `down` 값을 가집니다.
- `trigger`: \*(String)\* 스크롤을 유발한 요인을 나타냅니다. 가능한 값: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".
예시:
```javascript
var cont = 0;
new fullpage('#fullpage', {
beforeLeave: function(origin, destination, direction, trigger){
// 4번 스크롤할 때까지 스크롤을 방지합니다.
cont++;
return cont === 4;
}
});
```
---
### afterRender()
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 페이지 구조가 생성된 직후에 실행됩니다. 이 콜백은 다른 플러그인을 초기화하거나 문서가 준비되어야 하는 코드를 실행할 때 사용하고자 할 때 유용합니다 (이 플러그인은 결과 구조를 만들기 위해 DOM을 수정하기 때문입니다). 더 자세한 정보는 [FAQs](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions)를 참고하세요.
예시:
```javascript
new fullpage('#fullpage', {
afterRender: function(){
var pluginContainer = this;
alert("The resulting DOM structure is ready");
}
});
```
---
### afterResize(`width`, `height`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 브라우저 창의 크기가 조절된 후에 실행됩니다. 섹션들의 크기가 조절된 직후입니다.
매개변수:
- `width`: \*(Number)\* 창의 너비입니다.
- `height`: \*(Number)\* 창의 높이입니다.
예시:
```javascript
new fullpage('#fullpage', {
afterResize: function(width, height){
var fullpageContainer = this;
alert("The sections have finished resizing");
}
});
```
---
### afterReBuild()
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 `fullpage\_api.reBuild()`를 호출하여 fullpage.js를 수동으로 다시 빌드한 후에 실행됩니다.
예시:
```javascript
new fullpage('#fullpage', {
afterReBuild: function(){
console.log("fullPage.js has manually being re-builded");
}
});
```
---
### afterResponsive(`isResponsive`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 fullpage.js가 일반 모드에서 반응형 모드로, 또는 반응형 모드에서 일반 모드로 전환된 후에 실행됩니다.
매개변수:
- `isResponsive`: \*(Boolean)\* 반응형 모드에 진입했는지(`true`) 아니면 일반 모드로 돌아갔는지(`false`)를 결정합니다.
예시:
```javascript
new fullpage('#fullpage', {
afterResponsive: function(isResponsive){
alert("Is responsive: " + isResponsive);
}
});
```
---
### afterSlideLoad (`section`, `origin`, `destination`, `direction`, `trigger`)
[Demo](https://codepen.

io/alvarotrigo/pen/XbPNQv) 섹션의 슬라이드가 로드된 후, 스크롤이 종료된 시점에 콜백이 실행됩니다.
매개변수:
- `section`: \*(Object)\* 활성화된 수직 섹션입니다.
- `origin`: \*(Object)\* 출발지의 수평 슬라이드입니다.
- `destination`: \*(Object)\* 도착지의 수평 슬라이드입니다.
- `direction`: \*(String)\* 스크롤 방향에 따라 `right` 또는 `left`입니다.
- `trigger`: \*(String)\* 스크롤을 발생시킨 주체를 나타냅니다. 다음 중 하나일 수 있습니다: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".
예시:
```javascript
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( section, origin, destination, direction, trigger){
var loadedSlide = this;
//두 번째 섹션의 첫 번째 슬라이드
if(section.anchor == 'secondPage' && destination.index == 1){
alert("First slide loaded");
}
//두 번째 섹션의 두 번째 슬라이드 (#secondSlide가 두 번째 슬라이드의
//앵커라고 가정할 때)
if(section.index == 1 && destination.anchor == 'secondSlide'){
alert("Second slide loaded");
}
}
});
```
---
### onSlideLeave (`section`, `origin`, `destination`, `direction`, `trigger`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 사용자가 다른 슬라이드로 가기 위해 슬라이드를 떠날 때, 새로운 슬라이드로의 전환 과정에서 실행됩니다.
`false`를 반환하면 이동이 일어나기 전에 취소됩니다.
매개변수:
- `section`: \*(Object)\* 활성화된 수직 섹션입니다.
- `origin`: \*(Object)\* 출발지의 수평 슬라이드입니다.
- `destination`: \*(Object)\* 도착지의 수평 슬라이드입니다.
- `direction`: \*(String)\* 스크롤 방향에 따라 `right` 또는 `left`입니다.
- `trigger`: \*(String)\* 스크롤을 발생시킨 주체를 나타냅니다. 다음 중 하나일 수 있습니다: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".
예시:
```javascript
new fullpage('#fullpage', {
onSlideLeave: function( section, origin, destination, direction, trigger){
var leavingSlide = this;
//2번째 섹션의 첫 번째 슬라이드에서 오른쪽으로 떠날 때
if(section.index == 1 && origin.index == 0 && direction == 'right'){
alert("Leaving the fist slide!!");
}
//2번째 섹션의 3번째 슬라이드에서 왼쪽으로 떠날 때
if(section.index == 1 && origin.index == 2 && direction == 'left'){
alert("Going to slide 2! ");
}
}
});
```
#### 이동이 일어나기 전에 취소하기
`onSlideLeave` 콜백에서 `false`를 반환하여 이동을 취소할 수 있습니다. [`on`으로 움직임을 취소할 때와 동일합니다](https://github.com/alvarotrigo/fullPage.js#cancelling-the-scroll-before-it-takes-place).
---
### onScrollOverflow (`section`, `slide`, `position`, `direction`)
[Demo](https://codepen.io/alvarotrigo/pen/XbPNQv) 이 콜백은 fullPage.js 옵션 `scrollOverflow: true`를 사용할 때 스크롤 가능한 섹션 내부에서 스크롤이 발생할 때 실행됩니다.
매개변수:
- `section`: \*(Object)\* 활성화된 수직 섹션입니다.
- `slide`: \*(Object)\* 출발지의 수평 슬라이드입니다.
- `position`: \*(Integer)\* 섹션/슬라이드 내에서 스크롤된 양입니다. 0부터 시작합니다.
- `direction`: \*(String)\* `up` 또는 `down`입니다.
예시:
```javascript
new fullpage('#fullpage', {
onScrollOverflow: function( section, slide, position, direction){
console.log(section);
console.log("position: " + position);
}
});
```
# 문제 신고하기
1. 질문하기 전에 github 이슈 검색을 사용하여 유사한 문제가 있는지 찾아보세요.
2. 최신 fullpage.js 버전을 사용하고 있는지 확인하세요. 구버전에 대해서는 지원이 제공되지 않습니다.
3. 이슈를 생성하려면 [Github 이슈 포럼](https://github.com/alvarotrigo/fullPage.js/issues)을 사용하세요.
4. \*\*문제에 대한 독립적인 재현 과정이 필수적입니다.\*\* 가능하다면 [jsfiddle](https://jsfiddle.net/alvarotrigo/ea17skjr/) 또는 [codepen](https://codepen.io/alvarotrigo/pen/qqabrp)을 활용하세요.
# fullpage.js 기여하기
[fullpage.js에 기여하기](https://github.com/alvarotrigo/fullPage.js/wiki/Contributing-to-fullpage.js)를 참조하세요.
# 변경 로그
최근 변경 사항 목록을 보려면 [릴리스 섹션](https://github.com/alvarotrigo/fullPage.js/releases)을 참조하세요.
# Buil

d tasks
fullpage.js 배포 파일을 빌드하고 싶으신가요? [Build Tasks](https://github.com/alvarotrigo/fullPage.js/wiki/Build-tasks)를 참고해 주세요.
# 리소스
- [Gutenberg용](https://alvarotrigo.com/fullPage/wordpress-plugin-gutenberg/) 및 [Elementor용](https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/) Wordpress 플러그인.
- [Wordpress 테마](https://alvarotrigo.com/fullPage/utils/wordpress.html)
- [공식 Vue.js 래퍼 컴포넌트](https://github.com/alvarotrigo/vue-fullpage.js)
- [공식 React.js 래퍼 컴포넌트](https://github.com/alvarotrigo/react-fullpage)
- [공식 Angular 래퍼 컴포넌트](https://github.com/alvarotrigo/angular-fullpage)
- [CSS Easing Animation Tool - Matthew Lein](https://matthewlein.com/ceaser/) (`easingcss3` 값을 정의하는 데 유용함)
- [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js)
- [October CMS용 fullPage.js 플러그인](https://github.com/freestream/oc-parallax-plugin)
- [fullPage.js Angular2 디렉티브](https://github.com/meiblorn/ng2-fullpage)
- [fullPage.js angular 디렉티브](https://github.com/hellsan631/angular-fullpage.js)
- [fullPage.js ember-cli 애드온](https://www.npmjs.com/package/ember-cli-fullpagejs)
- [fullPage.js Rails Ruby Gem](https://rubygems.org/gems/fullpagejs-rails)
- [Angular fullPage.js - Angular.js v1.x용 어댑테이션](https://github.com/mmautomatizacion/angular-fullpage.js)
- [fullPage.js와 Wordpress 연동하기 (튜토리얼)](https://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/)
- [Divi용 Wordpress 플러그인](https://alvarotrigo.com/fullPage/wordpress-plugin-divi/)
- [Elementor용 Wordpress 플러그인](https://alvarotrigo.com/fullPage/wordpress-plugin-elementor/)
## fullPage.js를 사용하는 곳
![Who is using fullPage.js](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/using-fullpage.png)
- http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02
- http://medoff.ua/en/
- http://promo.prestigio.com/grace1/
- http://torchbrowser.com/
- http://www.boxreload.com/
- http://boxx.hk/
- http://www.villareginateodolinda.it
## 스폰서
스폰서가 되어 Github의 README에 귀하의 사이트 링크와 함께 로고를 노출해 보세요. [[문의하기](https://alvarotrigo.com/#contact)] | [[Patreon 후원하기]](https://www.patreon.com/fullpagejs) | [GitHub 스폰서 되기](https://github.com/sponsors/alvarotrigo)
[![Warp](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/warp.png)](http://go.warp.dev/fullPage)
[![Crawlbase](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/crawlbase.png)](https://crawlbase.com/?utm\_source=github&utm\_medium=sponsor&utm\_campaign=fullpagejs)
[![TestMu](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/testmu-ai.png)](https://www.testmu.com/?utm\_source=fullpagejs&utm\_medium=sponsor)
[![Codeless](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/codeless.png)](https://codeless.co)
[![Stackpath](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/stackpath3.png)](https://www.stackpath.com/)
[![Browserstack](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/browserstack3.png)](http://www.browserstack.com/)
[![CodePen](https://cdn.jsdelivr.net/gh/alvarotrigo/fullpage-assets/imgs/sponsors/codepen3.png)](https://codepen.com)
### 개인 후원자
[![](http://wallpapers-for-ipad.com/fullpage/imgs3/avatars/donsalvadori.jpg)](https://github.com/donsalvadori)
## 기여자
[![](https://contrib.rocks/image?repo=alvarotrigo/fullPage.js&max=400&columns=25&anon=1&v=2)](https://github.com/alvarotrigo/fullPage.js/graphs/contributors)

](https://www.w3schools.com/html/horse.ogg)

fullPage.js

파일 탐색기

# 설치 가이드

2. Node.js

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

fullPage.js

파일 탐색기

# 설치 가이드

2. Node.js

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README