무료 전자책

Tip&Tech/전자책으로 읽자 2020. 10. 22. 09:15

심훈의 상록수 무료로 보세요~

 

http://193.122.179.74/book/113

 

아이디어회관 SF / 직지 프로젝트 도서(등록 완료)

http://193.122.179.74/shelf/1

 

EPUBGUIDE.NET | Shelf: '아이디어회관 SF'

 

193.122.179.74

한국문학-단편(등록중)

http://193.122.179.74/shelf/3

 

한국문학-장편(등록중)

http://193.122.179.74/shelf/2

 

전자책 뷰어가 없어도, PC에서도, 스마트폰에서도 볼 수 있습니다.

무료 전자도서관에 들어가 책을 선택하면 오른쪽 위에 다운로드와 책보기 버튼이 있어요.

전자책 뷰어가 뭔지, 전자책을 어떻게 보는지 모르는 분은 책보기 버튼 눌러 보시고,

내 기기에서 보고싶다 하는 분들은 다운로드 받아 보세요.

 

'Tip&Tech > 전자책으로 읽자' 카테고리의 다른 글

무료 전자책  (0) 2020.10.22
직지 프로젝트 무료 전자책 보러 오세요~  (4) 2020.04.24
클리너 사용할때 주의하세요.  (0) 2017.06.29

설정

트랙백

댓글

아이디어회관 SF, 한국문학 무료 web 서재

자료실 2020. 10. 16. 13:53

 

몇번 소개를 했는데, 오늘 [ㄱ] 까지 작업을 끝낸 기념으로 다시 공유합니다.

단편 목록에서 1/4정도 작업을 한 것 같아요.

속도는 느리지만 중/장편까지 모두 올리는걸 목표로 하고 있습니다.

 

아이디어회관 직지 프로젝트(https://sf.jikji.org/) 도서는 모드 등록했고,

위키문헌의 한국 근대문학 단편을 EPUB으로 재편집해 등록합니다.

 

http://lesiles.synology.me

 

보고싶은 책 선택 후 오른쪽을 보면 작은 아이콘 2개가 있습니다.

하나는 EPUB 다운로드. 다른 하나는 브라우저에서 바로 볼 수 있는 아이콘입니다.

바로 보기는 PC와 모바일 모두 지원하니 전자책 체험하고 싶은 분들 이용하세요.

 

아이디어회관이 명맥만 유지하고 있어 이를 계속 유지할 생각으로 시작했는데 혼자 작업하려니 느리네요.

 

전자책 원고 출처는 아이디어회관과 위키문헌입니다.

 

아이디어회관 SF - 직지 프로젝트 1999

http://sf.jikji.org

 

아이디어회관 SF - 직지 프로젝트 1999

 

sf.jikji.org

위키문헌 원고를 EPUB으로 만들어 보내주시면 서재에 등록하겠습니다.

작은 프로젝트지만 참여하곳 싶은 분들은 언제든 쪽지나 메일 보내주세요.

https://ko.wikisource.org/wiki/%EB%B6%84%EB%A5%98:%EB%8B%A8%ED%8E%B8%EC%86%8C%EC%84%A4

 

분류:단편소설 - 위키문헌, 우리 모두의 도서관

 

ko.wikisource.org

 

 

참....

생각하고 계신 그 ID와 패스워드로는 절대 로그인 안됩니다.

로그인 안해도 100% EPUB으로 다운로드 되고, 책도 볼 수 있어요.

로그인 하려고 괜한 고생 하지 마세요.

 

설정

트랙백

댓글

문단 내(inline)에 있는 글자의 상하 여백 설정

Q: 문단 안에 있는 글자에 여백을 주려고 하는데

좌우(margin-left, margin-right) 여백은 적용되지만 상하 여백이 적용되지 않습니다.

<p><span>문단 내 상하 여백</span> 문단 내 글자의 상하 여백 설정은 display:inline-block; 속성으로</p>

span {

color : #00F;

margin-right : 5em;

}

이렇게 margin-left, margin-right는 잘 적용되지요.

하지만 상하 마진을 주면 어떨까요?

span {

color : #00F;

margin-bottom : 5em;

margin-top : 5em;

}

상하 5em을 줬는데 아무 변화가 없습니다.

코드를 아무리 들여다 봐도 문제가 없는데 스타일이 적용되지 않지요.

이건 태그의 속성 때문입니다.

display 속성을 기준으로 보면 태그는 인라인 태그와 블럭 태그 2종류가 있어요.

블럭 태그는 <p>, <div>, <h1> 같은 태그고

인라인 태그는 <span>, <sub>, <b> 같은 태그입니다.

태그 종류만 봐도 둘의 차이가 무엇인지 파악되시나요?

블럭 태그는 독립적으로 사용할 수 있는 태그예요.

<p>본문</p> (O)

이렇게 사용할 수 있습니다.

인라인태그는 독립적으로 사용을 할 수 없어요.

<sub>아래첨자</sub> (X)

이렇게 쓰면 오류가 납니다.

반드시 블럭 태그 안에 써야합니다.

<p><sub>아래첨자</sub></p> (O)

진하게, 기울임, 밑줄 등 글자를 꾸미는 태그는 대부분 인라인 태그예요.

블럭 태그는 <div>처럼 블럭 안에 다시 블럭을 사용할 수 있는 태그와 불럭 안에 블럭을 넣을 수 없는 태그로 구분돼요.

<div><div><p>문단</p></div></div> (O)

div는 이렇게 태그 안에 여러개의 블럭 태그를 쓸 수 있습니다.

<h1><p>제목</p></h1> (X)

h1이나 p태그는 div처럼 블럭 태그지만 태그 안에 블럭 태그를 쓸 수 없습니다.

블럭태그와 인라인 태그를 설명하려는게 아니니 여기서 마무리 하고.

블럭 태그는 상하좌우 마진을 적용할 수 있습니다.

하지만 인라인 태그는 좌우 마진은 적용할 수 있지만 상하 마진은 적용할 수 없습니다.

왜?

그렇게 하기로 약속이 되어 있어서 그렇습니다.

블럭 태그와 인라인 태그는 기본 속성이 다르고 지정할 수 있는 속성도 다릅니다.

블럭 태그는 강제로 줄바꿈을 하지만 인라인 태그는 줄바꿈이 없지요.

이 외에도 블럭 태그 안에는 인라인 태그를 쓸 수 있지만, 인라인 태그 안에는 인라인 태그만 써야 하고

상하정렬(vertical-align)은 인라인 태그만 적용되고 블럭 태그는 쓸 수 없는 등의 여러가지 차이가 있습니다.

그럼 인라인 태그에 상하 정렬을 꼭 해야한다면 어떻게 할까요?

인라인 태그를 블럭태그로 만들어 주면 됩니다.

span {

color : #00F;

display : block;

margin-bottom : 5em;

margin-top : 5em;

}

이렇게 하면 span 태그는 블럭태그 속성을 갖게 됩니다.

하지만 블럭 태그는 강제 줄바꿈이 기본 속성이기 때문에 이런 문제가 생기지요.

줄바꿈은 없이 상하 여백을 주고 싶을 때,

다시 말해 블럭 속성이면서 인라인 속성을 함께 부여하고 싶을 때가 있을거예요.

그럴 때 inline-block 속성을 사용할 수 있습니다.

span {

color : #00F;

display : inline-block;

margin-top : 5em;

margin-bottom : 5em;

}

inline-block 속성은 블럭 속성이기 때문에 margin을 적용할 수 있지만

inline 속성도 함께 갖고 있어 줄바꿈은 되지 않습니다.

display 속성은 여러개가 있습니다.

block, inline, inline-block, flex, grid, lint-item 등 다양합니다.

전자책 만들 때 display 속성 사용 빈도도 아주 높습니다.

잘 활용하면 제작 시간을 단축하고 다양한 스타일을 만들 수 있습니다.

설정

트랙백

댓글

Calibre 5.0.1 메이저 업데이트

전자책 출판정보 2020. 9. 28. 10:08

전 세계에서 가장 인기있는 뷰어 중 하나인 캘리버 전자책 뷰어가 메이저 업데이트를 했습니다.

뷰어 화면이 많이 바뀌었어요.

좌측에 배치됐던 메뉴가 사라져 깔끔해 졌습니다.

주석창도 보기 좋게 바뀌었습니다.

메뉴는 오른쪽 버튼을 누르면 튀어나옵니다.

검색 기능이 강력해졌다고 공식 업데이트 설명에 나오네요.

정규식을 완벽히 지원해서 원하는 내용을 쉽게 찾을 수 있다고 합니다.

이번 업데이트에서 가장 큰 변화는 형광펜 기능인 것 같아요.

형광펜과 메모를 간단히 추가할 수 있습니다.

이 외에도 다크모드 지원, 콘텐츠서버의 브라우저 뷰어 동기화 기능이 추가되었습니다.

그리고 Python3 업데이트가 되었습니다.

이로 인해 일부 플러그인이 작동하지 않을 수 있다고 하네요.

설정

트랙백

댓글

Sigil에 새로 추가될 기능

Sigil 사용 설명서 2020. 9. 28. 09:50

Sigil에 재미있는 기능이 추가될 것 같습니다.

최근 업데이트에서 아이콘 모양이 산뜻하게 바뀌었는데

이번엔 아이콘 테마 기능이 추가될 것 같아요.

기본 아이콘 테마는 Default, Fluent, Google 3개인 것 같고

사용자가 아이콘을 만들어 추가할 수 있을 것 같습니다.

메뉴 명만 보고 짐작한거라 다른 형태일 수 있어요.

 

설정

트랙백

댓글

무료로 사용할 수 있는 전자책 글꼴 GUIDE

무료로 사용할 수 있는 전자책 글꼴 GUIDE

http://193.122.179.74/read/100/epub

http://193.122.179.74/read/101/epub

noonnu.cc 사이트가 생기면서 작업을 중단했지만 전자책 만드는 분들께 도움이 될까 싶어 올립니다.

용량이 커서 로딩 시간이 오래 걸립니다.

설정

트랙백

댓글

[CSS 샘플] 영문으로 인한 자간 문제

카테고리 없음 2020. 9. 16. 12:28

본문에 한글과 영문이 섞여 있을 때, 특히 영문이 길면 영어 단어가 다음줄로 내려가면서 자간이 벌어집니다.

 

해결할 방법이 딱히 없어 이럴 경우 word-break를 사용했어요.

word-break를 쓰면 영어 단어가 강제로 잘리면서 줄바꿈이 됩니다.

그런데 이럴 때 문제가 생겨요.

 

나는 duckbill을 좋아한다.

 

word-break를 쓰면 이 문장이 이렇게 잘릴 수 있습니다.

 

나는 duck

bill을 좋아한다.

 

의미가 완전히 바뀝니다.

 

duckbill이 붙어있으면 '오리너구리'가 되는데

duck bill은 '오리 부리', 네이버 파파고에서는 '어음을 환수한다'고 번역이 되네요.

 

영어는 한 단어를 잘라 줄바꿈 할 때 하이픈을 넣습니다.

 

나는 duck-

bill을 좋아한다.

 

이렇게 하면 duck bill이 아니고 duckbill이라는 뜻이에요.

 

어떻게 하면 자동으로 하이픈을 넣을 수 있을까요?

 

CSS에 hyphens: auto; 라는 스타일이 있지만, 이 스타일은 제대로 적용이 안됩니다.

 

이 문제를 해결 할 방법이 없을까 고민하다 재미있는 코드를 하나 찾았어요.

 

&shy;

 

이걸 안써본건 아닙니다. 예전에 이 코드를 시도해 봤어요. 그런데 EPUB에 쓸 수 없는 코드였지요.

그러다 별 생각 없이 눌러 본 Sigil에서 특수 문자 삽입 창에서 shy를 우연히 발견했습니다.

'왜 쓸 수 없는 shy가 들어있는거지?'

생각하며 눌렀는데, 헉... 이게 먹히네요.

&shy;는 안먹히는데, 코드 번호로 넣으니 되더라구요.

그랬지. &nbsp; 대신 &#160;을 쓰도록 바뀌었지... 하며 깨달음이 오네요 ㅜ.ㅜ

 

이제 이렇게 편집이 가능합니다.

 

교보와 리디 모바일 뷰어에서도 확인을 했어요.

 

영어 단어 강제로 잘라야 할 일 있을 때는 word-break;가 아닌 shy를 사용하세요~~

설정

트랙백

댓글

  • 이새의나무 2020.09.16 13:06 ADDR 수정/삭제 답글

    오 완전 꿀팁인데요~

  • 김재홍 2020.09.22 14:47 ADDR 수정/삭제 답글

    안녕하세요, 선생님. 예전 국립중앙도서관에서 강의하셨을 때 들은 이후로 수시로 참조하고 있습니다. 출간하신 책도 틈틈이 참조하고 있구요. 혹시 sigil 고급편은 언제 출간이신지 알 수 있을까요 ?
    늘 좋은 컨텐츠 공유해주셔서 감사드립니다. ^^

[CSS 샘플]약물 간격 조정 - 습관에 길들지 않기...

글꼴에 따라 꺽쇠, 괄호 같은 약물이 눈에 거슬릴 때가 있습니다. 제가 즐겨 사용하는 구글 Noto Serif 글꼴은 약물의 간격이 넓어 전자책을 만들고 나면 이렇게 보여요. 글자와 약물 사이에 공백이 없는데 공백이 들어간 것 처럼 보이지요.

공백을 없애면 이렇게 깔끔해집니다.

어떤 분들은 약물 간격을 전자책 특성이겠거니 생각하고 그냥 지나가고, 어떤 분들은 아래처럼 약물 간격을 조정해 달라고 하세요.

약물이 가끔 나오는 책은 저도 별로 신경쓰지 않았습니다. 하지만 약물이 많이 나오는 조정이 필요합니다. 그리고 제작을 맡기는 분들에 따라 약물에 민감한 경우가 있어요. 약물 때문에 글자 간격이 벌어지면 가독성이 좋지 않으니 조정하는게 좋지요.

하지만 약물을 조정하려면 다른 글꼴을 적용해야 합니다.

약물 간격 조정할 일이 많지 않기 때문에 저도 별 생각 없이 늘 하던대로 약물 간격을 조정했습니다.

이렇게요.

약물 몇개 없을 때 이렇게 조정을 해 놓고, 그 뒤로 습관이 돼서 계속 이 방법을 사용했습니다.

그러다 약물이 엄청나게 많이 포함된 책을 편집하게 됐어요.

그 책의 코드를 보니 너무 지저분하더라구요.

 

이때 갑자기 깨달았어요. 내가 아무 생각 없이 약물을 처리했구나.

훨씬 편한 방법이 있는데 생각 없이 습관 대로 편집을 했구나... 하고요.

편집자가 요청하지 않아도 약물 처리를 해야 하는데 

요청이 없을 때는 아무 생각 없이 신경을 쓰지 않았지요.

습관이 돼서 습관대로 하다 보니 더 좋은 방법이 있어도 찾아 볼 생각도, 고칠 생각도 안하게 된거였어요.

 

안좋은 습관을 깨닫고 나니, 해결 방법이 바로 떠오르더라구요. 그래서 적용해 봤습니다. 

span 태그를 없애고, 약물 간격도 정리한 코드예요.

이렇게 하면 훨씬 편하고, 편집자가 요청하지 않아도 약물 간격을 조정해 편집을 할 수 있습니다.

당연히 이렇게 해야하는 건데 습관 때문에 관성에 밀려 신경을 쓰지 못한거였지요.

 

이렇게 편집하는 방법?

저처럼 습관에 길들지 마시고, 직접 찾아보세요.

생각보다 간단합니다.

 

이 코드는 전자책 제작 강의에서 알려드릴게요^^

생각해 봐도 방법을 찾지 못한 분들은 전자책 제작 강의 신청하세요~

설정

트랙백

댓글

디지털북센터 하반기 정규 교육프로그램 수강생 모집 공고(8월 18일부터)

카테고리 없음 2020. 8. 9. 11:43

http://www.kdpub.org/sub0401_view.php?idx=87

 

디지털 북센터 정규 교육 공지 공유드립니다.

전자책 제작 교육도 있으니 전자책 제작에 관심있는 분들은 8월 18일 기억해 두셨다가 신청하세요~

초급, 중급 2개 과정이 있는데 중급 과정은 제가 진행합니다.

상반기 교육은 수강생의 제작 경험 편차가 심해 초급도, 중급도 아닌 애매한 교육이 되어버렸어요.

초급 수업 끝나고 중급 수업이 진행돼야 했는데, 코로나 이슈로 밀리고, 일정이 꼬여 중급을 먼저 시작했어요.

하반기 교육은 수강생 수준 보다는 교육 과정에 충실하려고 합니다.

전자책 제작 경험이 없는 분들은 초급을 신청하시고,

중급은 Sigil 사용법, HTML과 CSS의 기초 정도는 아는 분들이라 생각하고 수업 난이도 조절 없이 강행(?) 하겠습니다^^

Sigil 사용법도 모르는 분들은 초급 과정을 신청해 주세요.

중급 수업에서는 메뉴 설명도 하지 않을 생각입니다.

참... 압축파일 어떻게 푸는지, 다운로드 받은 파일이 어디 있는지도 모르는 분들은 초급을 들으세요.

상반기 수업은 이런 부분까지 설명을 했지만, 하반기 수업에서는 이런 설명 절대 안합니다 ^^

전자책 제작 경험이 있는데,

더 잘 만들고, 더 빠르게 만들고 싶지만 벽을 만나 어려움을 느끼는 분들이 신청하셨으면 좋겠어요.

10일 후 부터 모집 진행합니다.

저한테 가끔 고급진(?) 질문 하는 수준의 전자책 편집자 분들과 만났으면 하는 바람입니다~

설정

트랙백

댓글

[CSS 스타일 샘플] 간단해 보이지만 복잡했던 장제목 스타일

어떻게 스타일 잡을까 고민하느라 시간이 한참 걸렸네요.

PDF로 보면 이런 모양입니다.

이 스타일이 까다로왔던 이유는

상단 굵은 줄과 장제목, 제목 사이의 빨간 줄이 글자 크기가 바뀔 때 같이 움직여야 해서였어요.

글자 크기 바꾸면 장번호도 크거나 작아져야 하는데, 그에 맞춰 상단 줄과 중간 빨간 줄이 같이 움직여야 하지요.

거기에 폭이 바뀌면 제목쪽만 움직여야 하니 여러 조건을 한번에 맞춰야 했습니다.

요즘 grid를 많이 쓰네요.

처음에 table로 작업할까 했는데, 제목 처리 하려면 헤딩 태그를 써야하니 테이블은 제외시켰고,

몇가지 방법을 생각해 하나씩 적용해 보다 그나마 코드가 간단한 방식을 찾은게 grid입니다.

<div class="ChapLine">

<div class="ChapLineRed"></div>

<div class="ChapLineGrey"></div>

</div>

<h3><span class="ChapTXT">CHAPTER</span><span class="ChapNo">10</span> <span class="ChapTitle">첫 번째 파이프라인<br/> PDF 전자책</span></h3>

===

h3 {

display : grid;

grid-template-areas :

"ChapTXT ChapTitle"

"ChapNo ChapTitle";

grid-template-columns : 2.5em auto;

grid-template-rows : 0.5em;

font-size : 2em;

align-content: center;

margin-bottom : 5em !important;

}

.ChapLine {

display : grid;

grid-template-areas :

'ChapLineRed ChapLineGrey';

grid-template-columns : 2.5em auto;

grid-template-rows : 5px auto;

font-size : 2em;

margin-bottom : 15px;

}

.ChapLineRed {

grid-area: ChapLineRed;

background-color : #EA5A4F;

}

.ChapLineGrey {

grid-area: ChapLineGrey;

background-color : #BFC0C0;

}

.ChapTXT {

font-size : 0.4em;

color : #EA5A4F;

justify-content: left;

}

.ChapNo {

display: flex;

grid-area: ChapNo;

box-sizing: border-box;

font-size: 1.8em;

color : #EA5A4F;

line-height : 1em;

align-items: flex-start;

justify-content: left;

}

.ChapTitle {

display : flex;

grid-area : ChapTitle;

box-sizing: border-box;

font-family: "제목고딕";

border-left : 1px solid #EA5A4F;

padding-left : 0.5em;

line-height : 1em;

}

설정

트랙백

댓글