내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
|
EPUBGUIDE.NET의 핵심만 모았다. 전자책 편집자를 위한 필독서! |
|||
|
클릭 편집 탬플릿 제공, |
|
기초부터 전자책 제작 실습까지 |
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 속성 사용 빈도도 아주 높습니다.
잘 활용하면 제작 시간을 단축하고 다양한 스타일을 만들 수 있습니다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| Sigil 초보자를 위한 CSS 편집기 (0) | 2020.12.14 |
|---|---|
| [CSS 스타일 샘플] 이미지 왼쪽에 캡션 넣기 (1) | 2020.11.23 |
| [CSS 샘플]약물 간격 조정 - 습관에 길들지 않기... (0) | 2020.08.11 |
| [CSS 스타일 샘플] 간단해 보이지만 복잡했던 장제목 스타일 (0) | 2020.08.06 |
| EPUB에서 일본어 세로쓰기 (0) | 2020.07.31 |