이 글을 [깃든 리더] 앱을 설치하고 실행하면 맨 위에 나오는 샘플 책 내용의 일부입니다.
이 페이지는 HTML5의 <audio>와 <video> 태그를 사용했으므로, 애플 사파리나 구글 크롬, MS IE9 웹 브라우저로 열어야 아래 오디오 재생이나 비디오 재생이 제대로 작동됩니다.

EPUB3는 HTML5와 CSS3를 기반으로 제정된 표준 규약이므로, EPUB3로 작성된 이 글의 내용은 EPUB3를 지원하는 [깃든 리더]나 [아이북스] 앱에서 볼 수 있을뿐만 아니라 [사파리]나 [크롬], [IE9] 웹 브라우저에서도 볼 수 있습니다.

1. ePub3로 책 본문에 오디오 재생을 넣은 예:

위의 제목은 CSS를 사용으로 돋움볼드와 바탕볼드 글꼴을 혼용한 제목이며, 모든 iOS 기기에서 볼드체와 일반체를 돋움 글꼴과 바탕 글꼴에 사용할 수 있는 실제 예를 이 문장에서 보고 있습니다. 더 자세한 CSS 사용 보기는 제3장을 참고해 주세요.

사용한 HTML 태그:
<audio controls="controls" src="../Misc/gofunk.mp3" type="audio/mp3" />

위의 음악 재생 버튼을 누르면 이 책에 함께 포함된 mp3 음악이 재생되고, 멈춤 버튼을 누르면 중단됩니다. ePub3 규약에는 오디오 스트리밍뿐만 아니라 오디오 파일을 전자책 파일에 함께 내장하여 인터넷 연결없이 언제든지 재생할 수 있습니다.
오디오 샘플은 편의상 짧은 것으로 넣었습니다.

mp3 오디오 파일은 353KB, mp4 비디오 파일은 1.9MB를 사용했으며, .epub 파일 내부 구조는 다음 그림과 같습니다.

2. ePub3로 책 본문에 비디오 재생을 넣은 예:

사용한 HTML 태그:
<video controls="controls" src="../Misc/dance_Video.mp4" poster="../Images/dance.png" />

위의 영상 재생 버튼을 누르면 이 책에 함께 포함된 mpeg-4 영상이 재생되고, 멈춤 버튼을 누르면 중단합니다. ePub3 규약에는 비디오 스트리밍뿐만 아니라 비디오 파일을 전자책 파일에 함께 내장하여 인터넷 연결없이 언제든지 재생할 수 있습니다. 영상은 화면에 가득 차게 해서 볼 수 있습니다.
(샘플 오디오와 비디오 만든이: 원준)

3. [깃든 리더]에서 CSS를 사용한 예:

1. 스타일 정의하기:
   HTML 태그 이름에 직접 스타일을 사용할 수 있습니다. 예: p {color: red;}
   이렇게 정의하면 모든 <p> 태그로 시작하는 문단의 글씨 색깔이 빨강색으로 표시됩니다.
    
   여러 개의 태그에 하나의 스타일을 지정할 수 있습니다. 예: p,div,ul {color: red;}
    
   스타일 이름은 영어든 한글이든 다 되지만 부호나 빈칸은 사용하지 마십시오. 예: .빨강 {color: red;}
    
   마침표(.)로 시작하는 스타일 이름을 “클래스”(class)라 하고, 샵(#)으로 시작하는 스타일 이름을 “아이디”(id)라 합니다. 아이디나 클래스 스타일은 정의한 다음 본문의 특정 태그에서 지정해 주어야 사용됩니다. 예: <p id=”바탕”> 또는 <div class=”돋움”>과 같이 지정한 곳에서만 효력이 생깁니다.
    
   같은 곳에서 동일한 스타일을 지정하면 맨 나중에 지정한 스타일만 적용됩니다.
    
   아이디로 정의한 스타일이 클래스 스타일보다 우선하지만, 보통 “클래스” 스타일을 많이 사용하는 편입니다.
    
   스타일이 적용되는 우선 순위는
   1) 태그에 적용된 인라인 스타일
   2) head의 style 속성으로 지정한 스타일
   3) @import로 지정한 외부 스타일시트 (*.css)
   4) link로 지정한 외부 스타일시트 (*.css)
    
   스타일 속성에 !important를 덧붙인 스타일이 순서에 상관없이 우선 순위가 가장 높게 적용됩니다.
    
2. 바탕과 돋움 글꼴 사용:
   h1, h2 또는 p, div 태그에 <p class=”바탕”>이나 <div class=”돋움”>이라는 스타일을 지정하면 그 태그에 속한 내용 전체가 바탕 글꼴이나 돋움 글꼴로 표시됩니다.
3. 몇 글자에만 다른 글꼴 사용:
   <p class=”바탕”>이나 <div class=”돋움”>이라는 스타일을 지정하면 문단 전체에 지정된 글꼴이 사용되므로, 일부 몇 글자에만 다른 글꼴을 사용하려면 해당 글자 앞에 <span>를 지정하면 됩니다. 예: 본문 도중에 <span class=”돋움”>을 지정하면 돋움 글꼴로 표시되고 </span>로 닫으면, 그 이후부터는 원래 글꼴로 나옵니다.
   글꼴 종류에 상관없이 “진하게”(볼드체) 나오게 하려면 <span class=”볼드”> 스타일을 지정하면 됩니다.
4. 스타일 중복 사용:
   정의한 스타일 종류에 “돋움”, “바탕”, “볼드” 등의 스타일이 있다면, <p class=”바탕 볼드”>나 <div class=”돋움 볼드”>처럼 두 가지 이상의 스타일 이름을 빈칸으로 구분해서 쭉 지정할 수 있습니다.
5. 페이지 분리하기:
   지금 이 문단의 태그에 class=”pagebreak-after”라는 스타일을 지정했으므로, 이 문단이 끝나는 곳에서 실제로 새로운 페이지가 시작됩니다.
6. [깃든 리더]에 미리 정의되어 있는 스타일들:
   앱에서 이미 정의되어 있으므로 epub으로 전자책을 만드는 사람들은 스타일 정의 없이 본문에서 곧바로 사용하면 적용되는 스타일들입니다.
    
   .바탕: 바탕 글꼴을 사용할 때
   .돋움: 돋움 글꼴을 사용할 때
   .볼드: 진한 글꼴 모양을 사용할 때
   .바탕볼드: 두꺼운 바탕 글꼴
   .돋움볼드: 두꺼운 돋움 글꼴
   .center: 좌우로 가운데 정렬시킬 때
   .right: 오른쪽으로 정렬시킬 때
   .pagebreak-after: 현재 태그가 끝나는 곳에 페이지 분리시킬 때
   .pagebreak-before: 현재 태그가 시작되기 전에 페이지 분리시킬 때