내맘대로의 EPUB 제작 가이드

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

http://epubguide.net/245

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

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

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

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

스타일을 잡다 보면 이런 글상자가 종종 나옵니다. 

글상자 제목과 내용이 있는 아주 일반적인 형태의 글상자입니다.

책 만들 때 많이 쓰이기도 하고요.

글상자 자체는 만들기 어렵지 않습니다.

아래처럼 제목에 꾸밈을 주는 경우가 있어요.

꾸밈의 형태는 다양합니다. 포스트잇을 붙여놓은 것 같은 스타일도 있고

제목 앞에 전구나 물음표 같은 불릿이 들어가기도 합니다.

그리고 이렇게 제목이 가운데 나오고, 양 옆으로 특정 패턴의 선이 나오기도 하지요.

이런 패턴은 좀 까다롭습니다.

글자에 맞게 제목 상자 크기가 바뀌어야 되요.

종이책에서는 한번 고정되면 그만이지만 전자책은 가로 폭이 일정하지 않습니다.

그래서 전자책은 제목 상자 옆에 있는 줄이 폭에 맞춰 자동으로 조정되야 하지요.

이런 스타일을 만드는 방식은 여러개예요.

예전에 소개한 적이 있는데

선을 긋고

margin-top을 (-)로 줘서 제목 상자를 선 위로 올리는 방법이 가장 간단합니다.

테이블을 이용할 수도 있어요.

왼쪽, 가운데, 오른쪽 3개짜리 테이블을 만든 후

가운데 셀에 border로 테두리를 그리고 왼쪽, 오른쪽에 선을 그을 수도 있습니다.

하지만 테이블은 셀 크기 조절이 까다로와요.

테이블과 비슷하지만 셀 크기 조절이 쉬운 방법으로는

flex 속성을 이용하는거예요. div 태그를 가로로 3개 늘어놓고 가운데 셀만 flex : 1;을 주면(0이었나???) 가운데 셀은 글자 크기에 맞게 칸이 조절되고, 좌우 셀은 크기가 동일하게 배치됩니다.

오늘 설명드릴건 이보다 조금 쉬운 방식이에요.

테두리 모양은 여러가지로 응용이 가능합니다. 

줄무늬, 물결무늬, border-bottom을 쓰면 아래에만 줄을 그을 수 있어요.

이 스타일만 있으면 제목 상자 테두리에 특정한 무늬가 들어간 대부분의 글상자를 만들 수 있습니다.

뿐만 아니라, 특정한 테두리를 가진 제목에도 활용할 수 있지요.