posted by 내.맘.대.로 2022. 1. 13. 09:50

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

지금까지 애써 외면하던 스타일이 하나 있습니다.

밑줄 노트 스타일.

저걸 왜 외면했는지 아는 분들은 다 아시겠지요.

밑줄을 그리면 이렇게 되거나

이렇게 됩니다.

아니면 이렇게 되고요.

그래서 저도 손을 대지 않았는데,

밑줄 노트 스타일 책이 들어오고, 시간 여유도 있어서 도전을 해 봤습니다.

음... 의외로 간단히 해결을 했네요 ㅡ.ㅡ;;

 
 
Previous imageNext image
 

화면폭, 글자 크기가 바뀌더라도 틀어짐 없이 밑줄이 생겨요.

아직 문제가 있긴 해요.

글자 크기가 바뀌면 일부 줄 두께가 2px로 표시됩니다.

그리고 직선만 가능하고 점선은 제대로 안되네요.

점선 표현하려면 linear-gradient가 아니라 이미지를 써야할 것 같아요.

그래도 원본 도서의 밑줄 색이 옅은 녹색 계열이라

두께가 달라져도 빨간색 처럼 눈에 확 들어오지 않아서 그냥 쓰기로 했습니다.

CSS 코드는 이렇습니다.

background-image: -webkit-linear-gradient(top , transparent, transparent 1.76em, #D4E6CE 0);

background-size: 100% 1.85em;

글자크기 1em, 줄간격 1.8em 일때 기준입니다.

줄간격이 바뀌면 안되니 밑줄 상자의 줄간격은 !important 쓰는게 안전합니다.

스타일의 비밀 눈치 채셨나요?

이런 배경을 넣고, 줄간격을 조절해 줄 사이에 글자를 넣는거예요.

그런데 이미지를 넣으면 글자 확대/축소를 해도 이미지 크기가 고정이라 문제가 싱기지만,

linear-gradient로 줄을 그리고 줄 간격을 em으로 잡았기 때문에 글자 크기에 맞춰 줄 간격도 조절이 됩니다.

p 태그에 직접 적용하면 됩니다.

<p>THE Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>

약간씩 차이나는 줄 두께는, 색으로 조절을 했어요.

진한 빨간색은 줄 두께 차이가 두드러지지만,

옅은 색으로 줄을 넣으면(원본 색이 옅어 다행^^;) 큰 티가 나지 않습니다.

오늘은 여기까지~

 
반응형
posted by 내.맘.대.로 2020. 9. 21. 09:03

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

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

http://193.122.179.74/read/100/epub

http://193.122.179.74/read/101/epub

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

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

반응형
posted by 내.맘.대.로 2018. 6. 27. 09:31

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

이전 내용은 이곳에서 확인하시기 바랍니다.

http://epubguide.net/245
무료 폰트를 한눈에 볼 수 있는 사이트가 생겨 더 이상 EPUB 업데이트를 하지 않습니다.
무료 폰트를 찾는 분들은 아래 사이트를 방문해 보세요.
https://noonnu.cc/

 

 

전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 

 

다운로드 https://goo.gl/98udBq
바로보기 : 

http://193.122.179.74/book/100바로보기2 http://193.122.179.74/book/101

 

 

❖ 

판올림 내용- 태폰트 3종 추가   * 태흘림   * 태조각   * 태으뜸

 

 

Set03 무료 서체 목록(일반 기업, 지자체 등)

    • 가비아 글꼴
      • 가비아 봄바람
      • 가비아 납작블럭
      • 가비아 솔미체
    • 미생체
    • 야놀자 야체
    • tvN 즐거운 이야기체
    • 아리따 글꼴
      • 아리따 부리
      • 아리따 돋움
      • 아리따 Sans(로마자)
      • 아리따 흑체(중국어)
    • 배달의민족
      • 배민 한나체
      • 배민 주아체
      • 배민 도현체
      • 배민 한나는열한살체
      • 배민 기랑해랑체
      • 배민 연성체
    • 티몬
      • 티몬 몬소리
      • 티몬 티움(영문전용)
    • 고양
      • 고양체
      • 고양덕양체
      • 고양일산체

 

  • 태폰트
    • 태흘림
    • 태조각
    • 태으뜸

 

 

 

Set02 무료 서체 목록(은글꼴)

  • 은글꼴
    • 은바탕
    • 은돋움
    • 은그래픽
    • 은궁서
    • 은필기
    • 은디나루
    • 은자모바탕
    • 은자모돋움
    • 은자모노벨
    • 은자모소라
    • 은펜
    • 은펜흘림
    • 은필기a
    • 은신문
    • 은타자
    • 은바다
    • 은옛글

 

 

Set01 무료 서체 목록(국가기관, 네이버, 구글 등)

    • 구글 노토(Google Noto)
      • Noto Sans KR
      • Noto Sans Mono KR
      • Noto Serif KR
    • 네이버 나눔 글꼴
      • 나눔명조
      • 나눔고딕
      • 나눔바른고딕
      • 나눔펜
      • 나눔바른펜
      • 나눔브러시
      • 나눔스퀘어
      • 나눔스퀘어라운드
      • 나눔바른고딕-옛한글
    • NHN 고도 글꼴
      • 고도 마음(godo Maum)
      • 고도 Rounded-L
      • 고도 Rounden-R
    • 저작권위원회 KCC 글꼴
      • KCC 김훈체
      • KCC 은영체
    • 문화체육관광부, 출판인회의 코펍(Kopub) 글꼴
      • 코펍 바탕(Kopub Batang)
      • 코펍 돋움(Kopub Dotum)
    • 만화진흥원(한국콘텐츠진흥원) 글꼴
      • 만화진흥원체
    • 서울시 서울 서체
      • 서울 남산체(정체)
      • 서울 한강체(정체)
      • 서울 남산체(장체)
      • 서울 한강체(장체)

 

 

 

1. 목차에서 글꼴의 모양을 확인할 수 있습니다.

글꼴 이름을 누르면 글꼴의 상세 정보로 이동합니다. 

 

 

2. 글꼴의 저작권 정보와 배포처, 다운로드 경로를 확인할 수 있습니다.

 

 

3. 글꼴의 상세한 내용을 확인할 수 있습니다.

한글, 옛한글, 영문, 일본어, 한자, 기타 언어(스페인, 독일, 프랑스, 러시아)의 지원 여부를 알 수 있고 특수문자 세트가 포함되어 있는지 확인할 수 있습니다. 

 

 

4. 한글, 영문 문단이 어떻게 보이는지 확인할 수 있으며 글자 크기에 따른 모양, 스타일(기울임, 진하게)을 적용했을 때의 모양을 알 수있습니다. 

 

 

5. 전자책 본문으로 썼을 때 글자가 어떻게 보이는지 알 수 있습니다. 본문 내에서 진하게, 기울임, 윗첨자, 괄호설명 등의 스타일이 어떻게 표현되는지 알 수 있습니다.

 

 

 

아직 본문 디자인은 편집중이고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨 주십시오. 확인하는 대로 추가하겠습니다.

 

반응형
posted by 내.맘.대.로 2018. 5. 14. 09:36

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

화려한 효과는 EPUB3만 가능한게 아닙니다.

EPUB2에도 표준을 지키며 간단한 애니메이션을 넣을 수 있습니다. 

스크립트를 쓰지 않고 CSS만 사용해 효과를 낼 수 있지요.

 

많은 분들이 이런 '화려한' 효과에 관심을 보입니다.

그런데 '화려한' 효과를 왜 쓰는지 잘 생각해 보셔야되요.

화려한 효과는 책을 보지 않는 사람에게는 '와~' 하는 감탄을 불러내겠지만

 

글자가 왔다 갔다 하고, 번쩍이고, 네온사인처럼 색이 바뀌면

독자들이 책에 집중할 수 있을까요?

 

'화려한' 효과는 얼마든지 넣을 수 있습니다. 어렵지 않아요.

EPUB2와 CSS3만 이용해도 본문 위에 벗꽃이 흩날리게 만들 수 있어요.

뷰어에 따라 제한이 있지만 교보, 알라딘, 리디, iBooks등의 뷰어에서 돌아갑니다.

 

애니메이션 등의 화려한 효과를 찾는 분들이 많아 샘플을 올리는데

이런 화려한 효과가 정말 책에 필요한건지 진지하게 고민을 해 보세요.

제대로 기획을 해서 꼭 필요한 곳에 이런 효과를 넣어야지 기획 없이 '화려함'만 찾는건 독서에 방해가 될 수 있어요.

 

 

첨부한 파일은 독특한 효과를 주는 CSS3 속성 샘플입니다.

 

style-sample.epub
다운로드

 

 

 

 

반응형
posted by 내.맘.대.로 2017. 12. 20. 10:20

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.


전자책에 무료로 쓸 수 있는 글꼴을 모았습니다.

글꼴의 저작권(라이선스), 제작처, 받을 수 있는 경로, 그리고 글꼴파일이 지원하는 언어(한중일, 한글 고어, 기본 특수문자 세트 등), 글자 크기별 모양 등을 한번에 확인할 수 있습니다. 




판올림 내용


- 본문 스타일을 적용했습니다.

- 저작권, 무료폰트, 이 책을 보는 방법 등 설명이 수정/추가 됐습니다.

- 코펍 폰트가 추가됐습니다.

- 목차 업데이트를 했습니다. 뷰어의 목차 기능을 이용해 원하는 글꼴을 찾을 수 있습니다.

- 본문 예제에 기울임, 진하게 스타일을 추가했습니다.

- 포함된 글꼴

   * 구글 노토  Sans, Serif 한글(KR)

   * 네이버 나눔 글꼴

   * NHN고도 글꼴

   * KCC 김훈체, 은영체

   * 코펍 서체

   * 서체는 계속 추가됩니다.


아직 본문 디자인은 하나도 하지 않은 상태고, 무료로 사용 가능한 글꼴 중 일부만 작업이 되었습니다. 시간 나는 대로 업데이트하고 있습니다. 글꼴에 대해 추가로 확인하고 싶은 내용이 있거나 더 추가하고 싶은 무료 글꼴이 있으면 언제든 댓글이나 이메일로 남겨주십시요. 확인하는 대로 추가하겠습니다.



* 글꼴파일 그룹 제작처의 라이선스 전문과 라이선스를 확인할 수 있는 경로, 글꼴 파일을 받을 수 있는 경로를 표시합니다.


* 글꼴 파일이 지원하는 언어 및 특수문자를 글꼴 디자인으로 확인할 수 있습니다. 만약 글꼴파일이 지원하지 않는 언어가 있다면 아래 [나눔명조]의 '한글 고어'처럼 글자가 깨지거나 [나눔 펜]의 한자 처럼 아무것도 나타나지 않을 수 있습니다. 이는 내용이 없는 것이 아니고 글꼴파일이 지원하지 않아 표시되지 않는 것입니다. 





* 글꼴의 글자 크기별, 꾸밈별 모양을 확인할 수 있습니다. 글자 크기는 스타일을 적용하지 않은 1em을 기준으로 합니다. 글꼴에 따라 1em의 글자 크기가 커보이거나 작아보일 수 있지만 이는 모두 1em입니다. 글자의 특성에 따라 같은 1em이라도 글자 크기가 달라보일 수 있습니다. 



(캘리버에서 캡쳐한 화면)



* 글꼴은 가장 많이 사용되는 Regular, Medium 등의 대표 글꼴 하나만 사용했습니다. 아래 글꼴 스타일은 기본 글꼴에 글자 꾸밈 태그를 적용한 것입니다. 위 이미지처럼 캘리버 같은 일부 뷰어에서 이런 스타일이 제대로 표현되지 않을 수 있습니다.

국내 유통사의 표현성에 대한 내용은 이곳을 참고하시기 바랍니다 : http://epubguide.net/241

(iBooks에서 캡쳐한 화면)



* 본문에서 글꼴이 어떻게 보이는지를 확인할 수 있습니다. 본문 편집시 많이 사용하는 윗첨자 형태의 설명이나 괄호 설명을 참고할 수 있게 스타일을 추가했습니다. 글꼴에 따라 본문 느낌이 달라져 본문 편집을 위한 원하는 글꼴을 찾을 때 참고할 수 있습니다. 



반응형