[javascript] Reveal.js 키보드 및 마우스 제어 설정하기

27 Nov 2023

Reveal.js는 HTML 기반의 프레젠테이션 도구로, 웹 브라우저에서 동작하는 다양한 효과를 가진 슬라이드 쇼를 만들 수 있습니다. 이번에는 Reveal.js를 사용하여 키보드 및 마우스 제어를 설정하는 방법에 대해 알아보겠습니다.

슬라이드 네비게이션

Reveal.js는 다양한 방법으로 슬라이드를 네비게이션할 수 있습니다. 기본적으로 키보드의 방향키를 사용하여 슬라이드를 이동할 수 있습니다. 또한 슬라이드를 네비게이션하기 위해 중앙 마우스 버튼을 사용할 수도 있습니다.

슬라이드를 이동할 때에는 data-navigation 속성을 사용하여 속성값으로 left, right, up, down을 지정할 수 있습니다. 예를 들어, 다음과 같이 설정하면 키보드의 오른쪽 방향키로 슬라이드를 다음으로 이동할 수 있습니다.

<section data-navigation="right">
  <!-- 슬라이드 내용 -->
</section>

슬라이드 쇼에서 특정 키를 눌렀을 때 추가적인 기능을 설정하는 것도 가능합니다. Reveal.js에서는 key 이벤트를 사용하여 키보드의 특정 키를 감지할 수 있습니다.

Reveal.configure({
  keyboard: {
    83: function() { // 키보드의 'S' 키를 눌렀을 때 실행될 콜백 함수
      // 내용
    }
  }
});

위의 예제에서는 키보드의 ‘S’ 키를 눌렀을 때 콜백 함수가 실행됩니다. 이를 활용하여 특정 키를 눌렀을 때 슬라이드를 이동하거나 추가 작업을 수행할 수 있습니다.

Reveal.js는 사용자가 설정할 수 있는 다양한 속성을 제공합니다. 아래의 속성들을 사용하여 키보드 및 마우스 제어에 대한 세부적인 설정을 조정할 수 있습니다.

자세한 사용 방법 및 속성 설정은 Reveal.js 공식 문서를 참고하시면 됩니다.

Reveal.js를 사용하여 키보드 및 마우스를 사용하여 슬라이드를 제어할 수 있습니다. 기본적인 방법은 Reveal.js에서 제공하는 기능을 사용하는 것이지만, 추가적인 제어나 커스텀 기능을 구현하려면 key 이벤트와 속성 설정을 활용하면 됩니다.

참고 자료: