[CSS 스타일 샘플] 큰 괄호 사이 글자

EPUB 편집 가이드/EPUB을 위한 CSS
posted by 내.맘.대.로 2020. 1. 29. 12:17

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

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

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

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

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

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

 

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.



고민 결과는 이렇습니다.

 

HTML 코드는 간단해요.

 

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

 




비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.




이 스타일 역시 HTML 코드는 간단합니다.

 

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

 

 

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

 

https://www.epubguide.net/290

 

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

 

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글

[질문&답변] 화살표 선이 들어간 제목 스타일  (0) 2020.06.10
!important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제  (0) 2020.03.18
페이지 하단에 문장 넣기  (1) 2019.08.21
모르는 사람이 의외로 많은 CSS 문법 (2)  (0) 2017.09.06
모르는 사람이 의외로 많은 CSS 문법 (1)  (0) 2017.08.24

페이지 하단에 문장 넣기

EPUB 편집 가이드/EPUB을 위한 CSS
posted by 내.맘.대.로 2019. 8. 21. 09:11

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

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

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

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

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

오랜만에 팁 하나 올립니다^^

 

전자책 편집 하면서 독자들이 신경쓰지 않을것 같은 페이지는

가독성만 보장 되면 편집은 신경을 많이 쓰지 않습니다.

그래서 이런 스타일이 나오면 그냥 상단에 가운데 정렬 정도로 편집을 했어요.

 

 

독자들이 신경쓸 것 같지 않고,

이 페이지는 1초도 안보고 넘길테니 전달하려는 내용만 확실히 전달 되면 편집 스타일은 중요하지 않다고 생각한 것이지요.

그런데 이런 부분에 신경을 쓰는 편집자가 생각보다 많더라구요.

이런건 어떻게 해야 하냐고 여러번 문의를 받았는데 그때 마다 '간단히 처리하세요' 정도로 알려드렸어요.

 

종이책과 비교하며 보지 않는 이상

페이지 위쪽에 나와도 어색하지 않아요.

페이지 위에 놓는게 싫다면 빈줄<p><br/></p> 5개 정도 추가하면 되지요.

이정도만 해도 별 문제 없다고 생각을 합니다. 

 

하지만 질문이 많이 들어온다는건 그만큼 신경쓰는 분들이 많다는 뜻이라

'간단히 처리하세요' 정도로는 부족한게 아닐까 생각이 들더라구요.

얼마 전에도 비슷한 문의가 들어와서 이번엔 제대로 스타일을 잡아봤습니다. 

 

이런 스타일은 중요한 포인트가 있어요.

 

어떤 경우라도 글자가 다음 페이지로 넘어가서는 안된다.

 

물론, 글자 크기를 엄청나게 키워서 한 페이지에 글자가 모두 담길 수 없다면 다음 페이지로 넘어갈거예요.

뷰어 높이가 아주 좁아서 한번에 2줄만 표시된다고 해도 다음페이지로 넘어가겠지요.

이런 특수한 경우가 아니라면 다음 페이지로 넘어가지 않아야 되요.

 







이런 스타일은 쉬워 보이지만 생각보다 까다롭습니다.

CSS를 잘 모르는 사람들은 vertical-align을 쓰면 된다고 생각해요.

vertical-align으로도 가능하지만, 그냥 되지는 않아요.

 

vertical-align로 직접 편집해 보세요.

팁을 드리자면 table 관련 스타일을 함께 적용해야 합니다.

 

저는 box-orient라는 속성을 사용했어요.

이 속성은 문제가 하나 있습니다. 표준 CSS 속성이 아니에요.

하지만, 국내 유통사 뷰어는 대부분 이 속성을 지원합니다.

 

box-orient는 수평 혹은 수직으로 레이어를 관리할 수 있도록 하는 속성이에요.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

 

box-pack이라는 속성과 함께 사용하면 글상자 안의 도다른 글상자나 block 속성의 태그를 좌우, 혹은 상하로 정렬할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-pack

 

그런데 세로 속성을 줄 때 문제가 생겨요.

글상자에 테두리를 그리고 높이 100%(height : 100%)을 하면, 페이지가 가득 찰 것 같은데 텍스트가 있는 부분 까지만 테두리가 생기지요.

이 문제를 해결하려면 vh라는 단위를 써야되요.

vh는 현재 디스플레이 크기에 따른 비율이에요.

현재 디스플레이 해상도의 높이가 100vh지요.

 

그래서 width : 100vh;  하면 화면 가득 테두리가 그려집니다.

하지만, 이 역시 문제가 있어요.

리디북스는 100vh가 여백을 제외하고 현재 화면 높이에 맞게 그려지는데 교보뷰어는 100vh로 할 경우 여백까지 포함해 버리지요. 현재 화면 크기가 100이고, 뷰어 기본 여백이 5라면 교보 뷰어는 105가 되는거예요. 그래서 100vh로 놓으면 교보 뷰어에서는 일부 내용이 다음페이지로 넘어갑니다.

 

이 문제는 간단한 트릭으로 해결할 수 있어요.

100vh가 아닌 80vh 정도로 놓으면 되요. 80vh ~ 85vh 정도면 문제 없을거예요.

 

그래서 이런 스타일이 나옵니다.

 

<body>

<div class="box_license">

<div class="box_bottom">

<p>화면 하단에 놓일 내용</p>

</div>

</div>

</body>

 

.box_license {

height : 80vh;

 

display: box;

box-orient: vertical;

box-pack: end;

box-align: center;

 

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-box-pack: end;

-webkit-box-align: center;

 

display: -moz-box;

-moz-box-orient: vertical;

-moz-box-pack: end;

-moz-box-align: center;

}

높이의 80%만 적용되서 화면 아래가 살짝 뜨긴 해요.

그래도 빈 줄을 10개씩 넣어가며 화면 아래에 맞추는 것 보다는 깔끔하게 처리될거예요.

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글

!important - 리디북스 PC 뷰어에서 div-margin 안먹는 문제  (0) 2020.03.18
[CSS 스타일 샘플] 큰 괄호 사이 글자  (1) 2020.01.29
모르는 사람이 의외로 많은 CSS 문법 (2)  (0) 2017.09.06
모르는 사람이 의외로 많은 CSS 문법 (1)  (0) 2017.08.24
1.2.7.5 CSS 템플릿 활용하기 - 목록 스타일 편집  (0) 2015.03.11

무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide

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

 

 

 

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

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > CSS 자료실' 카테고리의 다른 글

[CSS 스타일 샘플] 노트 같은 밑줄 스타일  (0) 2022.01.13
무료로 사용할 수 있는 전자책 글꼴 GUIDE  (0) 2020.09.21
[CSS3] EPUB2에 애니메이션, 그라데이션 등 다양한 효과 주기  (0) 2018.05.14
무료로 사용할 수 있는 전자책 글꼴 Guide v0.4  (0) 2017.12.20

[CSS3] EPUB2에 애니메이션, 그라데이션 등 다양한 효과 주기

EPUB 편집 가이드/CSS 자료실
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
다운로드

 

 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > CSS 자료실' 카테고리의 다른 글

[CSS 스타일 샘플] 노트 같은 밑줄 스타일  (0) 2022.01.13
무료로 사용할 수 있는 전자책 글꼴 GUIDE  (0) 2020.09.21
무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide  (0) 2018.06.27
무료로 사용할 수 있는 전자책 글꼴 Guide v0.4  (0) 2017.12.20

무료로 사용할 수 있는 전자책 글꼴 Guide v0.4

EPUB 편집 가이드/CSS 자료실
posted by 내.맘.대.로 2017. 12. 20. 10:20

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

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

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

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

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

다운로드 링크는 v0.5 업데이트 내용을 확인해 주세요 : http://epubguide.net/247


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

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




❖ 판올림 내용


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

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

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

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

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

- 포함된 글꼴

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

   * 네이버 나눔 글꼴

   * NHN고도 글꼴

   * KCC 김훈체, 은영체

   * 코펍 서체

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


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



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


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





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



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



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

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

(iBooks에서 캡쳐한 화면)



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



반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > CSS 자료실' 카테고리의 다른 글

[CSS 스타일 샘플] 노트 같은 밑줄 스타일  (0) 2022.01.13
무료로 사용할 수 있는 전자책 글꼴 GUIDE  (0) 2020.09.21
무료로 사용할 수 있는 전자책 글꼴(무료 폰트) Guide  (0) 2018.06.27
[CSS3] EPUB2에 애니메이션, 그라데이션 등 다양한 효과 주기  (0) 2018.05.14

모르는 사람이 의외로 많은 CSS 문법 (2)

EPUB 편집 가이드/EPUB을 위한 CSS
posted by 내.맘.대.로 2017. 9. 6. 10:58

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

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

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

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

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

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.

 

1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용

 

여기에 추가로, 

 

1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.

 

는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ

 

이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.

 

1. @page Rule

 

전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.

 

@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)

 

@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 

 

전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.

 

@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page

 

2. * 전체 선택자

 

앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.

 

* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}

 

전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.

 

책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.

 

3. Pseudo-class 선택자(가상 클래스 선택자)

 

가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.

 

링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄

 

링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}

 

이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 

 

문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?

 

이럴 때 가상 클래스 선택자를 사용할 수 있습니다.

 

a:link {

/*링크가 걸린 텍스트의 스타일*/

}

 

a:visited {

/*방문했던 링크 텍스트의 스타일*/

}

 

a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}

 

a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}

 

이 외에도 다양한 가상 클래스 선택자가 있습니다.

 

p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}

 

p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}

 

p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}

 

가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp

 

오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글

[CSS 스타일 샘플] 큰 괄호 사이 글자  (1) 2020.01.29
페이지 하단에 문장 넣기  (1) 2019.08.21
모르는 사람이 의외로 많은 CSS 문법 (1)  (0) 2017.08.24
1.2.7.5 CSS 템플릿 활용하기 - 목록 스타일 편집  (0) 2015.03.11
1.2.7.4 CSS 템플릿 활용하기 - 다양한 본문 편집 스타일  (0) 2015.02.04

티스토리툴바