반응형
헤드 부분과 바디 부분 작성하기
<head>
<title>전자책 1인 출판 가이드</title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<p> </p>
<h1> 저자 소개</h1>
<br/>
<br/>
<br/>
<p>OOO</p>
<p>저자 설명... </p>
<p></p>
</body>
스타일 CSS 추가하기
스타일 CSS가 없으면 문서가 밋밋합니다. 메모장에 글을 쓴 것처럼 됩니다. 스타일을 추가해주면 H1, H2, P 이런 태그들을 사용하여 문서 서식을 지정할 수 있습니다.
다음은 인터넷에서 가져온 전자책 CSS 입니다. 복사해서 붙여넣기 하거나 필요한 부분을 수정해서 사용하기 바랍니다.
출처 : http://bbebooksthailand.com/developers.html
/*===Reset code to prevent cross-reader strangeness===*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
ol, ul, li, dl, dt, dd
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/*===GENERAL PRESENTATION===*/
/*===Body Presentation and Margins===*/
/* Text alignment is still a matter of debate. Feel free to change to text-align: left; */
body
{
text-align: justify;
line-height: 200%;
}
/*===Headings===*/
/* After page breaks, eReaders sometimes do not render margins above the content. Adjusting padding-top can help */
h1
{
text-indent: 0;
text-align: center;
margin: 2.0em 0 0 0;
font-size: 1.6em;
font-weight: bold;
page-break-before: always;
line-height: 150%; /*gets squished otherwise on ADE */
}
h2
{
text-indent: 0;
text-align: center;
margin: 1.5em 0 1.5em 0;
font-size: 1.4em;
color: #4AA8D8;
font-weight: bold;
page-break-before: always;
line-height: 135%; /*get squished otherwise on ADE */
}
h3
{
text-indent: 0;
text-align: left;
margin: 1.0em 0 1.0em 0;
font-size: 1.2em;
font-weight: bold;
}
h4
{
text-indent: 0;
text-align: left;
margin: 0.5em 0 0.5em 0;
font-size: 1.0em;
font-weight: bold;
}
h5
{
text-indent: 0;
text-align: center;
font-size: 0.9em;
font-weight: medium;
}
h6
{
text-indent: 0;
text-align: left;
font-size: 1.0em;
font-weight: bold;
}
/* Hyphen and pagination Fixer */
/* Note: Do not try on the Kindle, it does not recognize the hyphens property */
h1, h2, h3, h4, h5, h6
{
-webkit-hyphens: none !important;
hyphens: none;
page-break-after: avoid;
page-break-inside: avoid;
}
/*===Paragraph Elements===*/
/* Margins are usually added on the top, left, and right, but not on the bottom to prevent certain eReaders not collapsing white space properly */
/*first-line indent paragraph for fiction*/
p
{
text-indent: 1.25em;
margin: 0;
widows: 2;
orphans: 2;
}
/* block type paragraph for non-fiction* /
/*
p
{
text-indent: 0;
margin: 1.0em 0 0 0;
widows: 2;
orphans: 2;
}
*/
/* for centered text and wrappers on images */
p.centered
{
text-indent: 0;
margin: 1.0em 0 0 0;
text-align: center;
}
/* section Breaks (can use centered-style for non-fiction) */
p.centeredbreak
{
text-indent: 0;
margin: 1.0em 0 1.0em 0;
text-align: center;
}
/* First sentence in chapters following heading */
p.texttop
{
margin: 1.5em 0 0 0;
text-indent: 0;
}
/* Use for second sentence to clear drop cap's float */
p.clearit
{
clear: both;
}
/* 1st level TOC */
p.toctext
{
margin: 0 0 0 1.5em;
text-indent: 0;
}
/* 2nd level TOC */
p.toctext2
{
margin: 0 0 0 2.5em;
text-indent: 0;
}
/*==LISTS==*/
ul
{
margin: 1em 0 0 2em;
text-align: left;
}
ol
{
margin: 1em 0 0 2em;
text-align: left;
}
/*===IN-LINE STYLES===*/
/* Recommend avoiding use of <b>, <i>, and <u>. Use span tags instead */
span.i
{
font-style: italic;
}
span.b
{
font-weight: bold;
}
span.u
{
text-decoration: underline;
}
span.st
{
text-decoration: line-through;
}
/*==in-line combinations==*/
/* Using something like <span class="i b">... may seem okay, but it causes problems on some eReaders */
span.ib
{
font-style: italic;
font-weight: bold;
}
span.iu
{
font-style: italic;
text-decoration: underline;
}
span.bu
{
font-weight: bold;
text-decoration: underline;
}
span.ibu
{
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
/* This fixes the bug where the text-align property of block-level elements is not recognized on iBooks
example: html markup would look like <p class="centered"><span class="ipadcenterfix">Centered Content</span></p> */
span.ipadcenterfix
{
text-align: center;
}
/*==IMAGES==*/
img
{
max-width: 100%;
}
/*==TABLES==*/
table
{
margin: 1.0em auto;
}
tr, th, td
{
margin: 0;
padding: 2px;
border: 1px solid black;
font-size: 100%;
vertical-align: baseline;
}
/* Superscripted Footnote Text */
.footnote
{
vertical-align: super;
font-size: 0.75em;
text-decoration: none;
}
/*==DROP CAPS==*/
span.dropcap {
font-size: 300%;
font-weight: bold;
height: 1em;
float: left;
margin: 0.3em 0.125em -0.4em 0.1em;
}
/*==PULL QUOTE==*/
div.pullquote
{
margin: 2em 2em 0 2em;
text-align: left;
}
div.pullquote p
{
font-weight: bold;
font-style: italic;
}
div.pullquote hr
{
width: 100%;
margin: 0;
height: 3px;
color: #2E8DE0;
background-color: #2E8DE0;
border: 0;
}
/*==BLOCK QUOTE==*/
div.blockquote
{
margin: 1em 1.5em 0 1.5em;
text-align: left;
font-size: 0.9em;
}
/*==eBook Specific Formatting Below Here==*/
박스 넣어주기
<div style="border:1px dotted; padding:10px; margin:10px;">
<p> 내용 추가 </p>
</div>
밀리의 서재에서 읽을 수 있습니다.
반응형