1. 먼저 Intro.js 라이브러리를 웹 페이지에 추가합니다. 이를 위해서는 Intro.js의 CDN 링크를 사용하거나 Intro.js 라이브러리를 다운로드하여 웹 페이지에 포함시킬 수 있습니다.

예시:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.2.2/intro.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.2.2/introjs.min.css" rel="stylesheet">

1. 투어를 설정하려는 웹 페이지의 요소에 대해 선택적으로 데이터 속성을 추가하여 해당 요소에 대한 설명과 순서를 지정할 수 있습니다.

예시:

<button data-intro="This is a button" data-step="1">Click me</button>

1. Intro.js를 사용하여 투어를 시작하고 원하는 순서와 조건에 따라 투어를 진행합니다. 아래 예제에서는 start 함수를 사용하여 투어를 시작하고, 투어를 원하는 페이지 요소에 대해 설정한 데이터 속성을 기반으로 투어가 진행됩니다.

예시:

introJs().start();

이와 같이 Intro.js를 사용하여 웹페이지 내에서 선택적으로 투어를 진행할 수 있습니다.

참고 자료:

• Intro.js 공식 문서: https://introjs.com/docs/intro/