![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bfkhXh/btqHbZzzsE3/yBin1WdBLvKYZgaLRDmdVk/img.jpg)
안녕하세요 탐구소년입니다. 최근엔 일이 바빠 마치 블로그가 없는 사람처럼 지내는 시간이 이어졌었는데, 이제 좀 여유가 생겨 블로그 글 게재를 다시 시작하려 합니다. 이번 글에서는 전자책 코딩을 할 때 특정 영역만 글자 크기가 커보이게 만드는 방법을 알려드리려고 합니다. 간만에 쓰는 글이다 보니 가볍게 몸풀기 수준의 내용으로 준비했습니다. 일단 본문을 표시하는 HTML 코드가 아래와 같다고 가정하고 시작하겠습니다. 간단한 코드이므로 설명은 생략합니다(위 코드가 어려우신 경우, 블로그의 다른 글을 참고하시면 좋을 것 같습니다^^). 코드를 전자책 뷰어로 본 결과는 위와 같습니다. 배경색은 눈에 띄게 하기 위해 일부러 조금 푸르게 만든 것이니 신경쓰지 않으셔도 됩니다(원래는 하얀색입니다). 여기에서 두번째 줄..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Rw8G3/btqEIIGySW7/W9bvcGA3RjG7oVsZGUdpC0/img.png)
안녕하세요 탐구소년입니다. epub 전자책 코딩을 위한 HTML/CSS, 세번째 글입니다. 두번째 글을 쓴지 일주일쯤 지난 시점에 세번째 글을 작성하게 되었네요. 오늘은 전자책을 꾸미기 위해 사용하는 태그 몇 가지에 대해 정리를 해보려고 합니다. 긴말 않고, 바로 시작하겠습니다. 태그 : 텍스트 감싸기용 태그 태그는 태그 자체가 가진 기능은 아무 것도 없는 태그입니다. 그러나 특정 영역을 구분짓는 데 곧잘 사용되는 상당히 유용한 태그입니다. 위와 같은 코드에 태그를 사용해 특정 영역을 묶어보도록 하겠습니다. '정말정말' 부분을 묶어주었습니다. 그러나 이렇게만 한다고 해서 전자책의 모습이 달라지는 것은 아닙니다. 현 코드에서 전자책의 모습을 보겠습니다. 정말로 달라진 게 없죠? 그러나 태그에 특정 속성을 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ly2YE/btqEvxtdes6/KwhPFWrro85KFb2iB4WYnK/img.png)
안녕하세요 탐구소년입니다. 시길(sigil)을 사용해서 전자책 만들기! 의 일환으로 작성하는 'epub 전자책 코딩을 위한 HTML/CSS' 두번째 글입니다. 오늘은 텍스트를 표시하는 HTML 태그들에 대한 내용을 준비했습니다. 태그 : 제목 표시용 태그 제목을 표시할 때 사용하는 태그이입니다. 그러나 꼭 제목을 표시할 때만 사용해야 하는 것은 아닙니다. 단지 일반 텍스트 태그보다 좀 더 진하고 크게 텍스트를 표시할 뿐이죠. 알파벳 h 뒤에 붙는 숫자는 크기를 의미하는데, 1일 때가 가장 크고 6일 때가 가장 작습니다. 아래는 ~ 태그 안에 작성된 코드와 그 결과물입니다. 태그 : 문단 표시용 태그 텍스트를 표시할 때 가장 많이 사용되는 태그입니다. 전자책에 들어가는 일반 텍스트는 모두 이 태그를 사용하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dkvfG8/btqEo8eShtw/r83kYFkoJIyRPJTrnNkRgk/img.png)
안녕하세요 탐구소년입니다. 오랜만에 시길 관련 글을 작성하네요. 여러가지 개인적인 일들로 바쁘기도 했고, 딱히 소재가 생각이 안 나서 글을 거의 안 올리고 지냈는데, 블로그의 성장을 위해 이제부터라도 다시 정신을 차려서 블로그 관리에 힘을 좀 쏟아볼까 생각하고 있는 중입니다. 본론으로 들어가서, 오늘은 시길로 전자책 코딩을 해서 아래와 같은 글상자를 만드는 방법에 대해 기록해보려고 합니다. 이 글상자는 제가 좋아하는 리처드 파인만의 명언 중 하나를 전자책 화면에 표시해 본 것인데요. 붉은 테두리와 밝은 색의 배경색을 통해 명언을 좀 더 빛나보이게(?) 하는 효과를 기대하고 만들어 보았습니다. 이런 식으로 강조하고 싶은 내용을 글상자 안에 넣어두면, 독자로 하여금 책을 읽을 때 해당 메시지가 좀 더 깊게 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bc3sZh/btqC78VyIPB/KFeU3WP7elJ1dC0D40fBGk/img.jpg)
안녕하세요 탐구소년입니다. 오늘은 시길(sigil)로 전자책을 제작할 때에 목차는 어떻게 지정하는지에 대해 정리해보도록 하겠습니다. 전자책에서 목차는 무척이나 중요합니다. 전자책은 콘텐츠 특성상 한번에 여러 페이지를 넘기는 것이 불가능한데, 지정된 목차가 있다면 목차에서 원하는 위치를 선택하여 해당 페이지로 이동하는 게 가능해집니다. 따라서 전자책에서 목차는 필수라고 할 수 있습니다. 목차 지정을 위해서, 여러 장(chapter)으로 구성된 샘플 전자책을 준비해보도록 하겠습니다. 사용 프로그램은 당연히 시길(sigil)입니다. 일단 시길로 새로운 epub 파일을 열어주었습니다. 챕터 수를 늘리기 위해서, 왼편의 'Book Browser'에 있는 Text 폴더에 파일을 추가해줍니다. xhtml 확장자 파일..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Dg5Y9/btqCFySTnlz/tXDU4nqoKJ4t3f6oVyvFQ0/img.jpg)
안녕하세요 탐구소년입니다. 오늘은 시길(sigil)을 사용해서 전자책의 메타데이터를 설정하는 방법을 소개해보겠습니다. 메타데이터는 전자책에 대한 설명을 의미합니다. 전자책이 상품으로서 고객에게 서비스가 되려면 책의 제목이라던지 작가명, 출판사 등등의 데이터가 제공이 되어야 합니다. 그러한 데이터를 파일 내부에 기입해주는 것이 바로 메타데이터 설정인 것입니다. 그러면 메타데이터 설정을 바로 한번 시작해보겠습니다. 일단 전자책 파일을 시길(sigil)로 열어줍니다. 메타데이터 설정이 되어있지 않은 전자책입니다. 시길이 열려있는 상태에서 메타데이터 설정 창을 열어주면 되는데요. 키보드의 F8 버튼을 누르거나 프로그램 윗줄 메뉴의 Tools에서 메타데이터 편집기를 누르시면 창을 열 수가 있게 됩니다. 열린 창입..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dRCFqN/btqCwW2pgbV/HgK0z5ejVkSZFQzEZPDpzk/img.png)
안녕하세요 탐구소년입니다. 전자책 제작 프로그램 시길(sigil) 사용법 시리즈는 계속됩니다. 오늘은 본문에 이미지를 추가하여 좀 더 잘 읽히고 상품성 좋은 전자책을 만드는 방법에 대해 알아보도록 하겠습니다. 먼저 준비물입니다. 전자책에 추가하고자 하는 이미지를 하나 준비해야 하고요. 당연한 얘기지만 전자책 파일(epub)이 필요합니다. 위의 이미지는 무료 이미지 서비스 페이지인 pixabay라는 웹페이지에서 아무거나 골라 다운로드한 것입니다. 샘플 파일의 본문 코딩은 위와 같이 되어 있습니다. 미리보기로 보면 아래와 같습니다. 위 파일을 만드는 방법은 제 블로그의 다른 글( https://penguingoon.tistory.com/148 )에서 확인해보실 수 있습니다. 이렇게 달랑 글자만 적혀 있는 전..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/ShIl5/btqCylUi2eJ/TM6rE3uKy3mmnIjY3KJ201/img.jpg)
안녕하세요 탐구소년입니다. 전자책 제작 프로그램 시길의 사용법을 계속해서 올리고 있습니다. 오늘은 간단한 스타일시트 코드를 작성해보고, 코드 해석도 덧붙이도록 하겠습니다. 스타일시트 코드를 통해 전자책의 본문을 예쁘게 꾸미면, 좀 더 상품성 있는 전자책을 만들 수가 있습니다. 본문 내용을 작성하는 법이나 시길의 잡다한 사용법 등에 대한 설명은 생략하고 진행합니다. 혹시나 기본적인 사용법을 잘 모르신다면 이 블로그에 있는 다른 글들을 읽어보시길 추천해요^^! 그럼 시작합니다. 자 그럼 가장 먼저, 새로운 시길 파일을 열고 아래와 같이 작성해보도록 하겠습니다. 태그와 태그만으로 이루어진 간단한 본문 파일을 작성해주었습니다. 위의 본문을 미리보기로 보면 아래와 같습니다. 글꼴의 이름은 사실 잘 모르겠습니다만,..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b9rryK/btqCpQn5Q5U/nYmmw8yWvs7ZFhxkwoAnik/img.jpg)
안녕하세요 탐구소년입니다. 시길(sigil) 사용법 꾸준히 올리기를 실천하고 있는데, 여태까진 나름대로 잘 하고 있습니다. 오늘은 시길(sigil)로 전자책을 만들 때 원하는 글꼴을 적용하는 방법에 대해 알아보겠습니다. 가장 먼저 필요한 것은, 바로 글꼴 파일입니다. 글꼴 파일은 원하는 것으로 사용하시면 되지만, 여기서는 누구나 사용할 수 있는 무료 폰트인 제주명조체를 사용해보도록 하겠습니다. 제주명조 파일은 아래의 사이트에서 다운로드하실 수 있습니다. http://www.jeju.go.kr/jeju/symbol/font/infor.htm 위 링크에 들어가셔서 스크롤을 내리시다 보면 아래와 같은 부분이 나옵니다. 여기에서 '수동설치버전'을 눌러주세요. 그러면 압축파일이 다운로드됩니다. 그 파일의 압축을 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/eN6XLp/btqCoSxLJU2/tpjvBvsGaUxYFlRVX3suZ1/img.jpg)
안녕하세요 탐구소년입니다. 오늘은 전자책 제작 프로그램 시길(sigil)로 전자책을 제작할 때 표지를 추가하는 방법은 어떻게 되는지를 정리해보겠습니다. 이미지는 무료 이미지 사이트인 픽사베이(pixabay)에서 그냥 아무거나 받은 겁니다. 일단 표지가 추가되지 않은 epub파일과 표지로 사용할 이미지를 준비해줍니다. epub파일 만드는 법을 전혀 모르시는 경우에는 아래의 링크를 먼저 보시고 오셔야 합니다. => https://penguingoon.tistory.com/142 시길(sigil)로 전자책 만들기 기본 안녕하세요 탐구소년입니다. 오늘은 전자책(epub) 제작 프로그램 중에서도 대중적으로 가장 잘 알려져 있는 시길(sigil)을 이용해서 아주 간단한 한 페이지 짜리 전자책 만드는 방법을 정리해보..