내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다. 한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. |
오랜만에 스타일 팁 올립니다.
어떤 분이 테이블 안쪽 여백과 테이블 가운데 정렬 방법을 물으셨어요.
테이블(table) 태그는 기본 속성(attribute)을 몇개 갖고 있습니다.
글자 영렬(align), 테두리 모양(border), 배경색(bgcolor), 폭(width)...
전자책 만들 때 이런 속성은 사용하지 마세요!!!!!
태그 기본 속성을 사용해도 별 문제는 없습니다. 그런데 W3C에서도, IDPF에서도 스타일 편집은 CSS로, 그것도 외부 CSS로 하도록 하는 추세입니다.
만들어 놓은거라 써도 상관은 없는데 앞으로는 이런거 전부 없앨거야~
그래서 이런 속성들 대부분은 HTML5에서 지원을 하지 않습니다.
그럼 이런건 어떻게 해야할까요?
아래 표를 보세요. 위쪽 표는 테두리 색과 border-collapse 만 적용했습니다. 확인이 편하게 하려고 적용한 속성이고 이 두 속성을 제외하면 아무 스타일도 적용하지 않았을 때 테이블이 이런 모습으로 보여요.
이런 테이블을 아래쪽 표처럼 안쪽 여백을 주고, 테이블 자체를 가운데 정렬하려면 어떻게 해야할까요?
안쪽 여백이니 padding,가운데 정렬이니 text-align : center;를 주면 되겠지요?
그런데 이게 안먹힙니다.
여기서 2가지 문제가 생겨요. padding을 어디에 줘야 하는지, 그리고 text-align으로 가운데 정렬이 되지 않을 때 어떻게 가운데 정렬을 하는지.
먼저 스타일 코드를 보세요.
table, tr, td {
border : 1px solid #FF0000;
border-collapse: collapse;
}
.cell_padding {
padding : 1em;
}
.table_center {
display : table;
margin-left : auto;
margin-right : auto;
}
<table class="table_center">
<tbody>
<tr>
<td class="cell_padding">
안쪽 여백, 테이블 가운데 정렬
</td>
<td class="cell_padding">
안쪽 여백, 테이블 가운데 정렬
</td>
</tr>
<tr>
<td class="cell_padding">
안쪽 여백, 테이블 가운데 정렬
</td>
<td class="cell_padding">
안쪽 여백, 테이블 가운데 정렬
</td>
</tr>
</tbody>
</table>
1. padding은 셀(td)에 적용한다.
테이블에서 글자가 들어가는 곳은 tr 태그 안쪽입니다. table, td는 테이블의 구조를 만드는 태그고, td가 텍스트가 들어가는 셀을 만드는 태그예요. 그러니 텍스트가 들어가는 셀에 여백을 주고 싶다면 td 태그에 스타일을 적용해야겠지요.
2. 테이블을 가운데 정렬하기
테이블이나 div같은 상자를 가운데정렬 할때는 text-align 속성이 제대로 적용되지 않습니다.
적용할 방법이 없는건 아닌데 그럼 코드가 복잡해져요.
이럴 때 margin-left : auto; margin-right : auto;를 사용해 보세요.
div 박스일때는 display : table; 혹은 display : box; 속성도 같이 지정해야 합니다.
여기서는 display :table;이 없어도 되지만, 확실히 해주기 위해 추가했어요.
끝으로... 테이블을 오른쪽 정렬 하고싶다면?
.table_center {
display : table;
margin-left : auto;
}
이렇게 스타일을 바꿔보세요. 그럼 가운데 있던 테이블으 오른쪽으로 정렬됩니다.
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
| [문의] 대논쟁 철학베틀 스타일 (0) | 2018.03.21 |
|---|---|
| [문의]패턴(웨이브)을 넣은 테두리 (1) | 2018.03.21 |
| ttf vs otf 폰트 (2) | 2017.07.18 |
| 글꼴 암호화(난독) 처리 (2) | 2017.06.22 |
| 단위 em의 의미, 그리고 이미지로 글자 넣을때 편리한 팁 (4) | 2017.06.20 |
