[Reveal.js]슬라이드 쇼. 웹으로 간다

참조

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

http://lab.hakim.se/reveal-js/

 

작업 환경

OS : Windows 7 SP1 x64

Editor : Sublime Text 2

 

실행1 : 깃헙 링크를 따라가서 프로젝트를 다운받아 압축을 풀고 (혹은 git clone) index.html 을 브라우저로 실행

실행2 : 깃헙 링크에 들어가면 Full Setup 항목을 순차적으로 진행하면 됨

1. https://nodejs.org/ 에 가서 node.js 를 설치

2. 설치 완료 후 윈도우 커맨드에서 npm install -g grunt-cli 실행

3. Reveal.js 프로젝트 폴더로 이동하여 grunt serve 실행

4. nodejs 웹서버가 실행되며 기본 브라우저가 열릴 것임. http://0.0.0.0:8000

5. localhost로 실행되어야 하므로 설정 파일 편집

Gruntfile.js

아래 부분을 찾아 붉은색으로 칠해진 부분 추가

connect: {
   server: {
    options: {
     hostname: '127.0.0.1',
     port: port,
     base: '.',
                    livereload: true,
                    open: true
    }
   }
  },

6. 매번 커맨드 창 열어서 실행하기 귀찮으니 배치파일 작성

7. 텍스트 편집기를 열어 아래의 내용을 입력

@echo off
grunt serve --port 8001

run.bat 로 저장(저장 위치는 index.html과 같은 위치)

8. 이제 run.bat를 실행

 

편집 : index.html 을 텍스트 편집기로 열어서 편집

기본적인 설정은 다 되어 있는 상태이므로 head 태그 부분은 넘어감

body 태그를 보면 div와 section이 보일 것임

 

    

        

            

                CONTENTS
            
        
    

reveal 클래스 내부에 slides 클래스를 넣고 section 태그가 하나의 슬라이드 페이지가 된다.

    CONTENTS 1


    CONTENTS 2

section 태그가 형제로 나열되어 있으면 좌우 이동으로 슬라이드를 넘긴다

    
    

        CONTENTS 1
    
    

        CONTENTS 2
    

section 태그 내부에 section 태그들을 나열하면 상하 이동으로 슬라이드를 넘긴다

img 태그와 iframe 태그 등을 넣어 이미지 혹은 다른 웹페이지를 슬라이드에 첨부 할 수 있으며

슬라이드 쇼라고 해도 결국 HTML 페이지이기 때문에 iframe 태그에 들어간 페이지는 슬라이드 중에 브라우징도 가능하다

github의 설명을 보면 알겠지만 상당히 다양한 기능을 갖추고 있으며

HTML 기반이기에 멀티미디어 사용이 굉장히 편리하다

간단한 프로모션 사이트 정도는 reveal.js 만 가지고 충분히 만들어볼만하다고 생각함

github의 사용법을 훑어보기만 하고 후에 필요할때가 써먹어 볼 예정