posted by 내.맘.대.로 2023. 5. 3. 09:47

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

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

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

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

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

전자책을 편집하다 보면 글자가 깨지거나, 특정 글자만 폰트가 적용되지 않을 때가 있습니다.

글자가 제대로 표시되지 않는 현상은 다음과 같습니다.

 

1. 글자가 네모(□)로 표시됨

2. 라틴 계열 문자가 분리됨

    예) ė  --> e·  / Ń --> N′

3. 한글 자소가 분리됨

    예) ᄉᆞᄆᆞᆺ디〮아니〮ᄒᆞᆯᄊᆡ〮  --> ㅅㆍㅁㆍㅅ디아니ㅎㆍㄹㅆㆍㅣ

4. 글꼴이 적용되지 않음

     예) '아' 만 글꼴이 적용되고 다른 글자는 시스템 기본 글꼴로 보임

1, 3, 4번은 모두 글꼴 문제입니다.

글꼴에 해당 글자가 없으면 CSS나 시스템 설정에 따라 대체 폰트가 적용되고, 대체폰트에도 글자가 없으면 □로 보이거나 글자가 아예 나타나지 않습니다.

 

1번은 CSS 글꼴과 대체 글꼴에 글자가 포함되어 있지 않을 때 나타납니다. 글자 자리에 글자가 아닌 □가 들어가 있는 것이지요.

 

3번은 옛한글을 표현할 수 없는 글꼴일 때 나타납니다. 기본 글꼴에도 글자가 없고, 시스템 대체 글꼴에도 글자가 없으면 이렇게 보입니다.

 

4번 역시 글꼴에 없어 생긴 문제이지만, 시스템 대체 글꼴에는 글자가 있어 글자 자체는 제대로 표현되는 것입니다.

 

3번, 4번은 보는 기기에 따라 다르게 보입니다. PC는 시스템 대체 글꼴이 많아 웬만한 글자는 다 표시됩니다. 그래서 PC에서 볼 때는 4번처럼 보이는데, 스마트폰이나 전자책 전용 기기에서는 3번처럼 보일 수 있지요.

 

1, 3. 4번 해결 방법은 간단합니다. 

해당 글자가 있는 글꼴로 바꾸면 됩니다.

글자가 있는 글꼴은 어떻게 찾을까요?

https://fonts.google.com/
 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

이런 글꼴 사이트에 들어가 원하는 글자를 넣어보면 됩니다.

글자가 있는 글꼴은 제대로 보이고, 없는 글꼴은 깨져보입니다.

 

2번은 책을 만들 때 글자를 임의로 조합해서 생기는 문제입니다.

 

ė 이 글자가 없는 글꼴로 책을 만들다 ė 글자가 필요해 졌을 때, 편집자에 따라 글자가 있는 다른 글꼴을 쓰기도 하지만 e와 ·를 조합해 글자를 만들기도 합니다. 그럼 종이책에서는 ė로 보이는데, 이 글자를 복사해 다른 곳에 붙여 넣으면 조합한 글자가 분리되어 e· 이렇게 됩니다. 이 문제는 유니코드 표에서 ė를 찾아 바꿔주면 해결이 됩니다.

https://symbl.cc/en/unicode/blocks/latin-extended-a/

 

Latin Extended-A, Ā ā Ă ă Ą, 128 symbols, Unicode Range: 0100-017F (◕‿◕) SYMBL

Latin Extended-A is a block of the Unicode Standard. It encodes Latin letters from the Latin ISO character sets other than Latin-1 (which is already encoded in...

symbl.cc

이런 유니코드 표에서 직접 찾아야합니다.

 

한자, 라틴 계열 문자, 그 외 외국어 문자에서 글자가 깨지거나 조합한 문자가 많이 나타납니다. 간혹 글자가 없어 이미지로 그려 넣기도 합니다. 그럴 때는 해당 글자가 포함된 글꼴을 찾고, 유니코드에서 글자를 찾아 수정을 해야 합니다.

 
 
반응형
posted by 내.맘.대.로 2023. 3. 21. 11:07

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

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

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

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

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

Sigil의 모든 기능부터 전자책 제작 실습까지 한권으로 끝낸다!

Sigil 완벽 가이드

 

Sigil 완벽 가이드 | 박웅영 | 내맘대로- 교보ebook

"Sigil 완벽 가이드"는 Sigil 전자책 편집 프로그램을 이용하여 EPUB 형식의 전자책을 만드는 방법을 상세하게 설명하는 책입니다. 책은 전자책 출판과 관련된 기본 개념부터 Sigil 프로그램의 다양한

ebook-product.kyobobook.co.kr

3년 정도 정리하던 원고를 책으로 냈습니다.

내맘대로의 epubguide.net에 담았던 Sigil, HTML/CSS, 그리고 실습을 이 한권에 정리했습니다.

Sigil의 모든기능을 담으려다 보니 업데이트 할 때마다 새로 추가되는 내용이 생겨 지금까지 출간을 미루게 됐네요.

 

Sigil의 기본 기능(1부)과 전자책 제작을 할 때 꼭 필요한 HTML/CSS(2부), 그리고 Sigil로 전자책을 직접 만들어 보는 실습편(3부)으로 구성되어 있습니다. 

반응형
posted by 내.맘.대.로 2023. 3. 6. 12:56

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

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

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

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

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

아마존 킨들인 EPUB 이외에도 몇가지 형식을 추가로 지원합니다.

아마존 킨들로 책을 보기 위해서는 EPUB이나 KPF, mobi(AZW) 등의 포멧으로 변환을 해야하지만 

아마존의 콘텐츠 등록 사이트에서 지원하는 형식은 이 보다 더 다양합니다.

그래서 EPUB이나 mobi로 만들지 않아도 됩니다.

여기에서는 많은 사람들이 사용할 수 있는 MS-Word로 아마존 킨들용 전자책 만드는 방법을 설명하겠습니다.

 

 

MS-Word로 전자책을 편집한 후 docx 파일로 등록이 가능합니다.

여기서 중요한 점!

1. docx 포멧을 권해드립니다.

2. 복잡한 편집은 지원하지 않습니다. 편집 가이드를 따르는 것이 좋습니다.

 

킨들용 MS-Word 편집 가이드

* 아래 내용은 다음 사이트 내용 중 일부를 한글판 MS-Word에 맞춰 번역/수정하였습니다.

- https://kdp.amazon.com/en_US/help/topic/G200645680

 

eBook Manuscript Formatting Guide

eBook Manuscript Formatting Guide This guide will show you how to prepare your manuscript for KDP publishing. The info below is specific to Microsoft Word 2016, but the steps are similar to other versions of Word. For directions on how to format your eBook

kdp.amazon.com

단락 들여쓰기 및 줄 간격 설정

책 본문 텍스트가 일관되게 표시되도록 하려면 단락을 들여쓰고(탭 간격은 Kindle로 변환되지 않음) 줄 간격을 설정해야 합니다. 일관성을 유지하고 시간을 절약하려면 일반 스타일을 수정하십시오. 서식이 자동으로 적용됩니다.

1. [홈] 탭 에서 [표준]을 마우스 오른쪽 버튼으로 클릭 하고 [수정]을 선택합니다 .
2. [서식(왼쪽 하단)]을 클릭 하고 [단락] 을 선택합니다 . [단락] 대화창이 새로 열립니다.
3. [들여쓰기]에서 첫 줄 들여쓰기를 5mm로 설정합니다. 값이 1줄로 되어 있어도, 단위를 mm로 입력하면 mm로 적용됩니다.
4. [간격]에서 [단락 앞]/[단락 뒤]를 [0pt]로 설정 하고 [줄 간격]을 [1줄]로 설정합니다 .
5. [확인]을 클릭합니다 .
장 제목 편집

책을 쓸 때 [제목1]을 장 제목으로 설정합니다.

1. 제목이 있는 줄에 커서를 놓습니다.
2. [홈] 탭에서 [제목1]을 클릭합니다.
3. [가운데] 정렬을 적용합니다.
4. 모든 장 제목에 동일한 스타일을 적용합니다.
차례 만들기

차례를 만들기 위해서는 [장 제목 편집]을 먼저 끝내야합니다.

1. 차례를 추가할 페이지로 이동합니다. 차례를 넣을 위치에 빈 페이지 하나를 추가하는 것이 좋습니다.
2. [참조] 탭을 클릭합니다.
3. [목차]에서 [자동 목차 1]을 클릭합니다.
4. 다시 [목차]를 클릭하고 목록 하단에 있는 [사용자 지정 목차]를 클릭합니다.
5. [페이지 번호 표시] 옵션을 해제합니다.
6. [일반]>[표시 수준]을 1로 설정합니다.
7. [확인]을 누르고 [이 목차를 바꾸시겠습니까]라고 묻는 대화창이 나오면 [확인]을 누릅니다.
8. 본문 편집 중 차례가 수정되었다면 편집을 끝낸 후 [목차 업데이트]로 업데이트를 해야합니다.
제목 페이지 추가(Front Matter)

eBook에는 표지와 본문 사이에 책 제목과 저자 이름이 있는 제목 페이지가 포함되어야 합니다.
제목 페이지에는 다음 내용을 포함합니다.

1. 책 제목
2. 저자명
3. 필요시 [판권 스타일] 형식으로 판권을 추가할 수 있습니다.

* 판권 스타일

Copyright © 2023 Author Name
All rights reserved.
뒷면 부속 페이지(Back Matter)

본문 뒤에는 다음 내용을 포함할 수 있습니다.

1. 저자 소개
2. 참고서적
표지 및 이미지 삽입

표지 및 본문 이미지는 다음 기준을 참고해 삽입합니다.

1. 이미지 요구 사항
https://kdp.amazon.com/en_US/help/topic/G200645690
페이지 나누기


새로운 장 시작, 장 이미지(도비라) 등 새 페이지에서 시작해야 하는 부분은 [페이지 나누기]를 합니다.

1. 페이지를 나눌 위치에 커서를 놓습니다.
2. [삽입] > [페이지 나누기]를 클릭해 페이지를 구분합니다.
    * 단축키 CTRL+Enter 사용 가능
외부 링크 삽입

외부 링크 삽입이 필요할 경우 링크 삽입 기능을 이용합니다.

1. 링크를 삽입할 텍스트를 선택합니다.
2. [삽입]>[링크]를 클릭합니다.
3. 삽입할 외부 링크 주소를 입력합니다.
주석(각주) 삽입

전자책에서는 각주/미주 구분이 필요하지 않습니다. 주석은 각주(footnote)로 삽입을 합니다.

1. 각주를 삽입할 위치에 서서를 위치합니다.
2. [참조]>[각주 삽입]을 클릭합니다.
3. 각주 입력창이 표시되면 각주를 입력합니다.
4. 킨들에 업로드를 하면 각주는 자동으로 미주로 변환되며 팝업 주석을 이용할 수 있습니다.
미리보기 확인

편집이 마무리 되면 킨들 Previewer로 확인을 합니다.
킨들 Creater로 변환한 후 업로드를 할 수 있습니다.

1. 킨들 Previewer
  https://www.amazon.com/Kindle-Previewer/b?ie=UTF8&node=21381691011
  MS-Word로 편집한 문서가 킨들 기기에서 어떻게 보이는지 미리보기를 할 수 있습니다. 그리고 mobi, kpf 등의 포멧으로 저장을 할 수 있습니다. 편집은 할 수 없습니다.
2. 킨들 Creater
  https://www.amazon.com/Kindle-Create/b?ie=UTF8&node=18292298011
  MS-Word 문서를 불러와 킨들용 포멧으로 저장 할 수 있습니다. 제목, 본문 등의 스타일을 수정할 수 있습니다.
3. 미리보기를 통해 편집이 제대로 되어 있는지, 킨들 전용 기기, 스마트폰, 태블릿 등에서 잘 보이는지 확인을 합니다.
4. 적합성 검사를 통해 오류가 없는지 확인을 합니다.
KDP 등록

편집이 끝난 책은 KDP를 통해 등록을 할 수 있습니다.
MS-word 문서를 그대로 등록하거나 킨들 Previewer, 킨들 Creater를 통해 KPF로 변환한 파일을 등록하면 됩니다.

1. https://kdp.amazon.com/ 에 로그인을 합니다.
2. Bookshelf에서 [Create]를 누릅니다.
3. Kindle ebook을 선택한 후 등록을 합니다.

 

KDP에 등록 후 아마존의 심사를 통과하면 아마존을 통해 전자책을 판매할 수 있습니다.

아마존은 공식적으로 한국어 콘텐츠를 지원하지 않습니다(2023년 3월 기준)

따라서 콘텐츠의 언어는 [영어]로 설정해야 합니다.

 

 

 

 

반응형
posted by 내.맘.대.로 2023. 3. 3. 10:31

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

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

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

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

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

인디자인에서 EPUB으로 저장을 하면 폰트 파일을 복호화 할 수 없다는 정보(Infomation)가 표시됩니다.

Information은 조치를 취하지 않아도 되지만 확인이 필요한 내용을 의미합니다.

 

 [폰트파일]을 복호화 할 수 없습니다.

 

이런 내용이 표시되면 그냥 둬도 상관은 없지만 뭔가 조치를 취해야 할 것 같은 생각이 들지요.

이 메시지가 표시되는 이유는 2가지입니다.

1. 폰트 파일이 알 수 없는 방식으로 암호화 되어 있어 복호화가 불가능하다.

2. 암호화 되어 있다고 표시는 했지만, 암호화 되지 않았다.

 

1번일 경우 EPUB 뷰어에서 폰트가 적용되지 않습니다. 그리고 Sigil 폰트 뷰어로 글꼴을 열면, 글꼴이 열리지 않아요.

특정 방식으로 암호화 되어 있기 때문에 유통사 뷰어에서 문제가 될 수 있으니 글꼴을 바꿔야합니다.

 

2번은 EPUB 뷰어에서 폰트가 적용됩니다. Sigil 폰트 뷰어로 열면 문제 없이 잘 보이고요.

그러니 그대로 유통을 해도 됩니다.

 

하지만, 저 메시지를 없애고 싶다.

아주 간단합니다.

 

먼저, 왜 저런 문제가 생기는지 부터 볼까요?

https://www.w3.org/TR/epub-33/#sec-container-metainf-encryption.xml

EPUB에는 암호화 파일(Encryption file (encryption.xml)) 이라는 것이 있습니다.

이 파일은 암호화 되어 있으니 뷰어에서 복호화를 해야 한다는 정보를 담고 있습니다.

  <enc:EncryptedData>
    <enc:EncryptionMethod Algorithm="http://ns.adobe.com/pdf/enc#RC"/>
    <enc:CipherData>
      <enc:CipherReference URI="OEBPS/Fonts/NanumGothic-Regular.ttf"/>
    </enc:CipherData>
  </enc:EncryptedData>

 

encryption.xml에 암호화 되어 있다는 정보가 표시되어 있을 때,

EPUBCheck는 '복호화 할 수 없다'는 메시지를 표시합니다.

사실 메시지 자체에 문제가 있습니다. EPUBCheck는 복호화 자체를 하지 않거든요.

그래서 EPUBCheck 5.0 이후 버전에서는 이렇게 내용이 변경되었습니다.

 

파일 "파일명" 이(가) 암호화되어 있어 내용을 확인할 수 없습니다.

 

이제 인디자인에서 EPUB으로 내보낸 파일의 문제를 보겠습니다.

인디자인에서 EPUB으로 내보내기를 하면 폰트 파일은 IDPF 방식으로 암호화 했다는 정보가 담깁니다.

EPUB 파일 압축을 풀고 META-INF 폴더를 열어 보면 encryption.xml 파일이 포함되어 있어요.

Sigil은 이런 정보를 편집할 수 있는 기능을 제공합니다.

폰트 파일을 선택하고 마우스 오른쪽 버튼을 누르면,

인디자인에서 EPUB으로 저장한 파일은 [글꼴 난독 처리>IDPF 방식 사용하기]가 체크되어 있습니다.

모든 폰트 파일을 확인해서 [없음]으로 체크한 후 EPUB 파일 압축을 풀면

META-INF 폴더에 encryption.xml이 사라집니다.

 

그 후 EPUBCheck를 하면 폰트 복호화 Info가 뜨지 않습니다.

 

그리고 Sigil은 폰트 복호화 정보를 처리하기 때문에,

Sigil의 EPUBCheck 플러그인은 폰트 복호화 Info를 표시하지 않습니다.

pagina EPUB-Checker 같은 외부 프로그램을 사용할 때 표시가 되지요.

 

Sigil 편집하면서 EPUBCheck 플러그인을 사용하지 않는 이유가 뭔지 모르겠지만...

 

반응형
posted by 내.맘.대.로 2023. 2. 10. 09:55

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

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

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

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

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

제목 스타일을 만들다 보면 첫번째 제목은 margin-top이 필요 없는데, 본문 내에 두번째 제목 부터 margin-top이 필요할 때가 있습니다.

귀찮아서 모두 margin-top을 주면 첫째 제목 여백이 벌어져 이상하고, 첫번째 제목만 다른 스타일로 잡기는 귀찮고...

 

이럴 때 쓸 수 있는 클래스가 :nth-child(*) 예요.

클래스 중 :가 붙는건 의사(pseudo) 클래스라고 합니다.

CSS에서 pseudo 클래스/엘리먼트(:: 2개 붙음)는 클래스/엘리먼트는 아니지만 클래스/엘리먼트에 특수한 스타일을 부여할 때 사용합니다.

:nth-child(*)는 클래스의 순서 대로 스타일을 부여할 때 사용합니다.

영어 서수로 3th, 5th 할 때의 nth지요.

 

제목을 h2 태그로 지정하고

h2 {

margin-top : 5em;

margin-bottom : 2em;

}

이렇게 스타일을 줬는데, 각 장 첫번째 제목만 margin-top을 빼고싶다.

h2:nth-child(1) {

margin-top : 0;

}

이 스타일을 추가합니다.

그럼 처음 나온 h2는 margin-top : 0이 적용되고, 두번째 부터는 margin-top: 5em;이 적용됩니다.

이 클래스는 다양하게 활용할 수 있어요.

순서대로 똑같은 스타일이 적용되어 있는데, 그 중 특정 순서 하나만 스타일을 바꿔야 할 때 사용하면 좋습니다.

반응형
posted by 내.맘.대.로 2023. 1. 19. 09:14

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

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

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

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

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

전자책 만들다 보면 다양한 테두리를 그리게 됩니다.

테두리 모양은 전부 제각각이라 초보 편집자에게 종종 질문을 받아요.

테두리는 아무리 복잡해도 '기본'만 알면 쉽게 그릴 수 있습니다.

그 기본이란,

border(border와 연결된 속성 전부)

border-image

background(background와 연결된 속성 전부)

이렇게 3개.

이 3개가 어떻게 쓰이는지 예시로 보여드릴게요.

아래 예시 이미지는 모두 왼쪽이 종이책(PDF), 오른쪽이 전자책입니다.

1. 패턴이 들어간 테두리 선, 그리고 안쪽 영역 라운딩 처리

이런 테두리는 background-image를 사용합니다.

박스를 2개 그리지요. 패턴 이미지가 있는 바깥쪽 상자, 그리고 흰색 안쪽 상자.

안쪽 상자에 border-top-left-radius를 주면 라운드 처리를 할 수 있지요.

 

2. 너무 쉬운데 의외로 그릴 줄 아는 사람이 별로 없는 테두리

이런 테두리는 아주 그리기 쉽습니다.

border와 border-radius 속성만 있으면 됩니다. 상자도 하나면 되고요.

border-radius를 어떻게 쓰는지 공부하면, 아주 쉽게 그릴 수 있는 테두리입니다.

 

이 테두리는 여러가지로 활용을 할 수 있습니다.

예를 들어 이런거.

앞쪽에 있는 반달 모양의 원형 테두리 역시 border와 border-radius로 만들 수 있어요.

위, 아래, 좌, 우, 타원형, 원형 등 어떤 형태로든 만들 수 있기 때문에

연 평균 200~300권 만들다 보면 10번 정도 쓰게 되는 스타일입니다. 이정도면 엄청 높은 빈도예요.

3. 팁상자/상자형 각주 스타일

이건 단순하게 border만 이용하면 됩니다.

너무 쉬워서 설명할 필요도 없을 것 같지만,

의외로 float 속성을 모르는 사람들이 많아 가볍게 언급합니다.

float은 이미지에만 사용하는 줄 아는 초보 편집자가 많아요. float은 block, inline 속성 태그면 어디든 쓸 수 있어요.

 

4. border로 그릴 수 없을 때는 border-image로 그리면 된다

이런 테두리는 border로 그릴 수 없습니다.

위, 왼쪽은 2줄, 각 모서리 모양이 모두 다르고, 오른쪽 아래에는 돋보기 아이콘까지 들어있지요.

이런 테두리를 그리라고 하면 상자를 여러개 중첩시킬 생각을 하는데,

그냥 border-image를 쓰면 간단해요.

 

5. border와 background의 활용

이건 2번에서 설명한 테두리와 똑같아요. border와 border-radius를 이용했지요.

그런데 왼쪽 위에 연필 아이콘이 있습니다.

이렇게 연필 아이콘이 있으면, 이미지를 직접 삽입하는 분들이 많더라구요.

그냥 background-image를 쓰세요.

왜? 간단하니까.

종이책(PDF)

전자책(EPUB)

이미지를 직접 삽입한다면 태그가

<div class="border-box">

<div class="bullet_image">

<img src="../Images/bullet.jpg" alt="bullet image">

</div>

</div>

이렇게 되고

배경이미지를 쓰면

<div class="border-box"></div>

이렇게 끝나거든요.

6. 한쪽 모양만 다른 테두리

4개 면은 border로 그릴 수 있는데 한쪽만 그릴 수 없다면?

이렇게 복잡하게 생각하지 마세요.

그냥, 이건 border-image로 그리면 됩니다.

4번이랑 이거랑 똑같아요. 4개 면이 다르던, 한쪽 면이 다르던

border로 그릴 수 없다면 border-image를 쓰면 됩니다.

 

반응형