2012-02-15
HTML5와 CSS3의 등장으로 웹페이지에서도 플래시 없이도 상당히 그럴듯한 플리젠테이션을 만들수 있다.
필자가 최근 관련 예제를 찾아보다가 간편하게 구현되어 있는것이 있어서 이렇게 올려본다.

Hakim El Hattab / hakim.se 에서.. 제작 했다고 하는데, 우선 예제를 보자
링크 :http://hakim.se/experiments/css/slideshow/#/

이런식으로 되어 있는 슬라이드쇼이다.

해당 페이지의 기본적인 사항에 대해서 알려주면,
1. 수평 수직으로 되어 있는 슬라이드 쇼이다.
2. 해당 페이지는 방향키로 이동한다.
3. 하나의 페이지는 <section>태그로 구분된다.
4. <section>태그 안에 <section>태그를 삽입하여 수직 슬라이드를 구성한다.
5. <div id="main">태그 안에 <section>을 삽입해야 적용되게 만들어져 있다.
6. <script src="slideshow.js"></script>파일은 마지막에 적어놓아야 한다.
(만든사람이 그렇게 해놓은것이기 때문에.. 불편하다면 수정하기 바란다.. ㅎㅎ)

간단한 예제를 하나 보여주자면,
<html>
<head>
<title>CSS 3D Slideshow</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="main">

<section>
 1페이지
</section>

<section>
 <section>
  2-1페이지
 </section>
 <section>
  2-2페이지
 </section>
<section>

</div>
<script src="slideshow.js"></script> 
</body>
</html>
해당 슬라이드는 수평 1, 2 페이지와 수직 2-1, 2-2 페이지로 되어 있는 슬라이드 쇼이다.
설명은 이정도로 하겠다. 첨부파일의
main.css
slideshow.js
와 필자가 살짝 개조해놓은 index.html파일을 참조하여, 자신이 원하는 슬라이드 쇼를 만들어 보기 바란다.