Reveal.js는 HTML과 CSS를 사용하여 인터랙티브한 프레젠테이션을 만들 수 있는 오픈 소스 프레임워크입니다. 이번에는 Reveal.js를 사용하여 인터랙티브한 표와 그래프를 만드는 방법에 대해 알아보겠습니다.

1. Reveal.js 설치하기

먼저, Reveal.js를 설치해야 합니다. 다음 명령어를 사용하여 Reveal.js를 다운로드 받을 수 있습니다.

git clone https://github.com/hakimel/reveal.js.git

다운로드가 완료되면 index.html 파일을 이용하여 기본적인 프레젠테이션을 생성합니다.

2. 인터랙티브한 표 만들기

Reveal.js에서 인터랙티브한 표를 만들기 위해 data-chart 속성을 사용할 수 있습니다. 이 속성을 이용하여 표의 데이터를 정의하고, 표의 디자인을 설정할 수 있습니다.

다음은 Reveal.js에서 인터랙티브한 표를 만드는 예제입니다:

<section>
  <h2>인터랙티브한 표</h2>
  <table data-chart="bar">
    <caption>월별 판매량</caption>
    <thead>
      <tr>
        <th scope="col">월</th>
        <th scope="col">판매량</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1월</th>
        <td>100</td>
      </tr>
      <tr>
        <th scope="row">2월</th>
        <td>150</td>
      </tr>
      <tr>
        <th scope="row">3월</th>
        <td>200</td>
      </tr>
    </tbody>
  </table>
</section>

위 예제에서 data-chart="bar" 속성은 막대 그래프를 생성하도록 설정합니다. <caption> 요소는 표의 제목을 정의하며, <thead> 요소와 <tbody> 요소는 각각 표의 헤더와 내용을 정의합니다.

3. 인터랙티브한 그래프 만들기

Reveal.js에서 인터랙티브한 그래프를 만들기 위해 data-chart 속성을 사용할 수 있습니다. 이 속성을 이용하여 그래프의 종류와 데이터를 정의할 수 있습니다.

다음은 Reveal.js에서 인터랙티브한 그래프를 만드는 예제입니다:

<section>
  <h2>인터랙티브한 그래프</h2>
  <figure data-chart="line">
    <figcaption>일일 방문자 수</figcaption>
    <canvas></canvas>
  </figure>
</section>

위 예제에서 data-chart="line" 속성은 선 그래프를 생성하도록 설정합니다. <figcaption> 요소는 그래프의 제목을 정의하며, <canvas> 요소는 실제 그래프를 그리는 역할을 합니다.

4. 추가적인 설정

Reveal.js에서 표나 그래프를 더욱 커스터마이징하고 싶다면, 다양한 옵션을 사용할 수 있습니다. 예를 들어, 표나 그래프의 스타일을 변경하거나 동적인 업데이트를 적용할 수 있습니다.

Reveal.js의 공식 문서에서 자세한 설정 방법을 확인할 수 있습니다.

이상으로, Reveal.js를 사용하여 인터랙티브한 표와 그래프를 만드는 방법에 대해 알아보았습니다. Reveal.js는 다양한 기능을 제공하므로, 꼭 한번 써보시기 바랍니다!