posted by 내.맘.대.로 2017. 8. 24. 11:49

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

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

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

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

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

최근에 전자책 제작 강의를 많이 하고 있습니다.


완전 초보부터 윙크나 시길로 전자책을 만들다 한계에 부딪힌 분들까지 대상이 다양한데요, 전자책을 많이 만들어 봤다는 분들조차 아주 기본적인 CSS 문법을 모르는 경우가 많았습니다. 


그래서 기본적인 CSS 문법을 정리해 봅니다.


1. 선택자 만들기


선택자는 스타일의 그룹입니다. 여러개의 스타일을 하나로 묶어놓고 이 스타일의 이름을 붙이잖아요. 이걸 선택자(selector)라고 합니다. 


.my_background_color {   /* <--my_background_color가 선택자예요 */

background-color : #FF0000;

margin : 1em;

font-family : "굴림";

}


선택자를 만드는 규칙은 단순하지 않습니다. 복잡한 규칙이지만 잘 활용하면 아주 편해요. 서로 다른 스타일이지만 쓰임이 같다면 같은 이름을 줄 수 도 있지요.


예를 들어, 제목의 고딕체는 빨간색, 문단의 고딕체는 노란색으로 스타일을 적용한다면 선택자 이름을 2개 만들어야 합니다.


.title_gothic {

color : red;

}


.para_gothic {

color : yellow;

}


그런데 이렇게 만들 수도 있어요.


h1.gothic {

color : red;

}


p.gothic {

color : yellow;

}


이렇게 하면 같은 이름의 선택자라도 태그에 따라 다른 스타일이 적용됩니다.

선택자 만드는 규칙은 CSS의 가장 기본입니다. 선택자는 Cascade의 기본이기 때문에 선택자 규칙을 모르면 CSS를 제대로 만들 수 없습니다. 



선택자 만드는 규칙


1.1 태그 자체


p, h1, h2, strong, bold 등의 태그에 스타일을 직접 적용할 수 있습니다. 태그 자체에 스타일을 적용하면 태그에 클래스를 붙일 필요가 없어 편해요.


p { text-indent : 1em; }


이렇게 하면 모든 p 태그에 들여쓰기가 됩니다. 


1.2 class 선택자


사용자가 임의로 이름을 지정해서 선택자를 만들 수 있습니다. 선택자 앞에 점(.)을 붙여 사용합니다.


.my_style {


}


영문, 숫자, 언더바(_) 하이픈(-)을 조합해 어떤 이름이라도 지정할 수 있습니다. 언더바와 하이픈 이외에도 몇가지 기호를 더 사용할 수 있지만 사용할 수 없는 기호가 더 많으니 언더바와 하이픈만 이용하는게 좋아요.


선택자를 특정 태그에 종속시킬 수 있습니다. 이렇게 하면 같은 이름이라도 태그에 따라 다른 스타일을 사용할 수 있어요.


h2.title {

font-size : 1.5em;

text-align : center;

}


h3.title {

font-size : 1.2em;

text-align : right;

}


선택자를 만들다 보면 이런 저런 이름을 붙이고 더 붙일 단어가 생각 안나 스타일 이름은 뭐로 하지 고민하게 되는데 태그에 따라 같은 내용, 다른 모양이라면 이렇게 똑같은 이름을 쓸 수 있습니다.


클래스 선택자는 속성을 지정할 때 class="class_selector"라는 형식으로 태그에 값을 넣습니다.


<h2 class="title">부 제목</p>




1.3 ID 선택자


ID는 말 그대로 고유한 이름입니다. 그래서 ID는 한 챕터 안에 딱 한번 사용을 합니다. 절대로 한번 이상 나와서는 안되지요.


ID 는 속성을 지정하기 위한 목적보다 문서 내에 있는 특정 값이나 위치를 표시하기 위해 사용합니다. 예를 들어 주석을 링크로 연결한다면 이렇게 되요.


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>



여기서 ID는 <p id="foot_note01"> 입니다. a 태그에 있는 foot_note01은 ID를 지시하는 값이지 ID가 아닙니다. 만약 ID가 1번 이상 나온다면  a 링크는 어디로 가야할지 알 수 없게 되지요. 그래서 ID는 문서 내에 반드시 한번만 나와야 합니다. 


<p> ID<a href="#foot_note01">1)</a>는 문서 내에 딱 한번 사용할 수 있습니다</p>


<p id="foot_note01"> ID : Identification의 약자</p>


<p id="foot_note01"> ID : I Do의 약자</p>


그런데 이렇게 ID를 지정하고, 스타일을 바꾸고 싶을 때 어떻게 할까요? 

ID에 스타일을 적용할 수 있습니다.


#foot_note01 {

font-color : blue;

}


ID 스타일은 페이지 내에서 딱 한번만 사용할 수 있습니다. ID가 한번밖에 나올 수 없으니까요. 그리고 위 예에서 설명드린 주석 스타일을 ID로 적용하는건 권해드리지 않습니다. 주석이 10번 나온다면 각 ID마다 스타일을 지정해 줘야 하거든요.


EPUB2에서는 ID 스타일을 쓸 일이 많지 않습니다. 하지만 EPUB3로 사진 앨범을 만든다면 ID 스타일을 쓰게 됩니다. 


여기까지가 선택자를 만드는 가장 기본적인 방법입니다.


선택자를 만들 때 주의해야 할 점이 있어요.


a. HTML 태그가 있다면 태그를 써라.


어떤 분들은 모든 태그에 클래스 선택자를 붙입니다. 예를 들어 본문에 장제목 스타일이 딱 하나(수십번 반복될 수 있지만) 있다고 생각해 보세요.


.chap_title {

/*장제목 스타일*/

}


<h3 class="chap_title">장제목 1</h3>

<h3 class="chap_title">장제목 2</h3>

<h3 class="chap_title">장제목 3</h3>


이건 자원 낭비예요. 편집 시간도 늘어나고, 파일 용량도 늘고 코드도 복잡해집니다.

사용할 수 있는 태그가 있다면 태그를 쓰면 됩니다.


h3 {

/*장 제목 스타일*/

}


<h3>장 제목 1</h3>

<h3>장 제목 2</h3>

<h3>장 제목 3</h3>


만약 프롤로그 처럼 장 제목과 같은 레벨인데 스타일이 다르다면, 본문에 가장 많이 나오는 스타일을 h3에 지정하고, 앞과 끝에만 나오는 프롤로그 에필로그 스타일을 클래스로 지정하면 됩니다. 


b. HTML 태그와 기타 예약어는 클래스나 ID 선택자명으로 사용하지 말아라.


.strong {color : red;}


.address {font-family : "고딕"}


.button {  }


.small {   }


.img {   }


.color { }


.line-height {   }


.word-wrap {   }


보기엔 아무 문제 없어 보입니다. 그리고 이렇게 해도 문제가 생기지 않습니다. 하지만 이 선택자 이름은 전부 예약어입니다. HTML과 CSS에서 태그나 속성으로 사용하는 단어들입니다.


예약어를 써도 정상적으로 스타일이 적용되고 epubcheck에 오류가 발생하지 않습니다. 하지만 이건 가장 기본적인 규칙이에요. 너무 당연한거라 설명이 필요 없을 정도인데 생각보다 예약어를 선택자로 쓰는 분들이 많더라구요. 


한번에 정리하려 했는데 생각보다 내용이 길어졌네요.

다음 글에는 복합적인 선택자에 대해 설명하겠습니다. 언제가 될지는 모르겠지만... ^^;

반응형
posted by 내.맘.대.로 2015. 3. 11. 08:45

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

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

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

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

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

EPUB3에서는 EPUB2에서 사용하던 TOC를 없애고 Navigation이라는 HTML 기반의 목차를 사용한다. Navigation은 일반 HTML 파일과 동일하게 편집을 하면 되지만 목차 목록을 정리하기 위해서는 <ol>과 <li> 태그를 사용하게 된다. <ol><li> 태그는 목록 편집을 간편하게 해 주지만 기본 스타일이 정해져 있어 원하는 글머리 숫자가 붙고, 하위 목록은 들여쓰기가 된다.(참고 : http://epubguide.net/27)


  1. 과일
    1. 사과
      1. 홍옥
      2. 아오리
      3. 부사
  2. 야채
    1. 토마토
    2. 오이
    3. 당근


아래에서는 목록에서 유용하게 사용할 수 있는 스타일을 설명하도록 하겠다.


1. 글머리 없애기

ol {

list-style-type : none;

}


.nav_ol {

list-style-type : none;

}


글머리가 자동으로 붙으면 편할 수도 있지만 편집에 제약이 생긴다. 글머리 스타일을 없애고 편집자가 직접 글머리를 붙이고 싶을 때 사용할 수 있는 스타일이다. ol 태그에 직접 스타일을 적용하면 스타일이 적용된 페이지의 모든 글머리가 사라진다. 목차 같은 특정 항목에만 글머리를 없애려면 클래스를 지정해서 스타일을 적용한다.


2. 들여쓰기 간격 조절

ol {

padding : 0;

list-style-type : none;

}


.nav_ol {

padding : 0;

list-style-type : none;

}


글머리 스타일은 기본으로 왼쪽 여백이 지정돼 있다. 편집자가 여백을 조절하고 싶다면 ol 태그에 padding을 0으로 준다. 그러면 기본으로 설정되어 있는 여백이 사라진다. 이후 사용자가 원하는 만큼 왼쪽 여백을 li 태그에 지정해서 사용할 수 있다.


li {

margin-left : 1em;

}


.nav_li {

margin-left : 1em;

}


이렇게 ol 태그에서 padding을 0으로 설정하고 li 태그에 margin-left를 1em 설정하면 기본 여백 대신 단계별로 1em씩 여백이 생긴다. margin 대신 margin-left를 사용한 이유는 margin을 사용하면 상하좌우 여백이 함께 지정되기 때문에 상하 간격도 벌어지기 때문이다. 필요에 따라 margin,margin-left 등을 선택해서 사용하면 된다. li 태그에 margin-left를 1em 적용하면 하위 목록으로 내려가면서 보두 1em 씩 여백이 생기고, .nav_li 처럼 클래스를 지정하면 클래스가 지정된 항목에만 1em의 여백이 적영된다.


참고로 padding을 0으로 하고 다른 여백을 두지 않으면 글머리는 아래처럼 기본 영역 바깥에 위치하기 때문에 기본으로 붙는 글머리가 표시되지 않을 수 있다. 그렇기 때문에 padding을 0으로 설정할 때는 list-style-type : none;을 함께 지정하기를 권한다.


padding : 0;을 하면 글머리는 뷰어 바깥 영역에 표시되어 글머리가 없는 것처럼 보일 수 있다.

  1. 과일
    1. 사과
      1. 홍옥
      2. 아오리
      3. 부사
  2. 야채
    1. 토마토
    2. 오이
    3. 당근



* ol 스타일 중 일부는 브라우저에 따라 다르게 표현될 수 있습니다. 정확한 스타일 확인을 위해서는 PC브라우저를 이용하길 권합니다. 

반응형
posted by 내.맘.대.로 2015. 2. 4. 09:05

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

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

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

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

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

전자책을 보면 본문은 텍스트가 가득해서 스타일이 많이 필요할 것 같지 않지만 유통되고 있는 콘텐츠의 CSS를 확인해 보면 본문에 들어가는 스타일이 가장 많다. 본문을 편집하다 보면 주석이나 설명 문구, 단락의 소제목, 단어나 문장 강조 등 다양한 스타일이 필요하다. 

CSS를 만들 때 본문 스타일을 제대로 잡아주지 않으면 전자책 소스가 아주 지저분해 지게 된다. 편집자는 책을 보는 독자만 고려해서는 안되고 유통사의 뷰어에서 얼마나 가볍고 빠르게 열릴지, 오류 가능성은 없는지, 편집이 틀어지지 않는지 등을 모두 고려해야 한다. 그렇기 때문에 뷰어에 보이는 화면 뿐 아니라 태그와 스타일이 어떻게 적용되었는지도 확인을 해야 한다. 

이번 장에서는 전자책 편집시 가장 많이 사용되는 스타일을 깔끔하게 편집에 적용할 수 있는 CSS 스타일을 설명하도록 한다. 


* 아래에 설명한 스타일은 그대로 사용하기 보다는 원하는 스타일에 맞춰 스타일을 변경해 사용하기를 권한다.


1. 본문 기본 스타일


* {

margin : 0;

padding : 0;

}


p {

text-indent : 1em;

text-align : justify;

line-height : 1.5em;

}


<p> 본문 내용 </p>

* 편집시 별도로 스타일을 지정할 필요가 없다.


본문 기본 스타일은 문서 전체에 영향을 주는 스타일이다. 그렇기 때문에 가급적 간단한 스타일을 적용하는 것이 좋다. *는 모든 클래스를 대표한다. *로 설정한 스타일은 모든 하위 스타일에 적용된다. 여기서는 상하좌우 여백만 0으로 뒀다. 뷰어에 따라 기본 여백이 있기 때문에 책을 편집할 때 다시 여백을 주게 되면 여백이 너무 많아질 수 있어 여백을 0으로 두는 것이 좋다.


<p> 태그는 문단 태그로, 거의 모든 텍스트 편집에 사용한다. 제목과 일부 특수한 경우를 제외하면 모든 글자는 <p> 태그 스타일에 영향을 받는다고 말할 수 있다. 따라서 <p> 태그에는 가장 많이 쓰이는 스타일만 간단히 적용해야 한다. 



2. 기본 편집 스타일


2.1 들여쓰기 해제 스타일

/* 들여쓰기 해제 */

.noindent { text-indent : 0; }


본문 기본 스타일에 적용한 들여쓰기를 해제해야 할 때 사용하는 스타일이다. 이 스타일은 <p> 태그에 직접 적용하고 <sapn> 태그에 적용하지 않는다. 


2.2 오른쪽, 왼쪽 정렬 스타일

/* 오를쪽 정렬 */

.txt_right { text-align : right; }


/* 가운데 정렬 */

.txt_center { 

text-align : center;

text-indent : 0;

}


오른쪽, 가운데 정렬에 사용한다.

들여쓰기가 되어 있으면 들여쓰기가 된 지점부터 오른쪽 끝의 중간을 가운데로 보기 때문에 뷰어에서는 오른쪽으로 치우쳐 보인다. 그래서 화면 정 가운데에 맞추기 위해 가운데 정렬 스타일에 text-indent : 0;을 넣었다.


2.3 주석 관련 스타일

/* [단어주1 처럼 위첨자 표시에 사용 */

sup { 

font-family : "강조를 위한 글꼴" /* 필요시 적용 */

font-size : 0.8em; /* 원하는 크기로 설정 가능 */

}


/*단어의 간단한 설명을 추가하거나 아래첨자에 사용한다.*/

sub {

font-family : "강조를 위한 글꼴" /* 필요시 적용 */

vertical-align : bottom; /* sub는 아래첨자에 쓰여 앞쪽 글자보다 아래에 위치한다. vertical-align으로 세로 위치를 조절할 수 있다.*/

}


/*단어의 간단한 설명을 추가하거나 아래첨자에 사용한다.*/

/*본문과 구분이 필요한 스타일이 여러개인 경우 클래스를 지정할 수 있다*/

cite {

font-family : "강조를 위한 글꼴" /* 필요시 적용 */

font-style : none;  /*cite 태그의 기본 스타일인 기울임을 제거한다*/

font-size : 0.8em;

color=#555555; /*필요시 글자 색을 변경한다*/

}


.txt_annotation {

font-family : "강조를 위한 글꼴" /* 필요시 적용 */

font-style : none;  /*cite 태그의 기본 스타일인 기울임을 제거한다*/

font-size : 0.8em;

color=#555555; /*필요시 글자 색을 변경한다*/

}


.txt_chiness {

font-family : "강조를 위한 글꼴" /* 필요시 적용 */

font-style : none;  /*cite 태그의 기본 스타일인 기울임을 제거한다*/

font-size : 0.8em;

color=#555555; /*필요시 글자 색을 변경한다*/

}


HTML의 기본 태그 중에 주석을 처리할 수 있는 태그가 많이 있다. 주석이 있음을 표시할 때는 윗첨자<sup>, 단어 옆에 괄호를 치고 간단한 설명을 추가하기 위해서는 <cite>나 <sub>를 사용할 수 있다. 그리고 이보다 많은 스타일이 필요하다면 클래스를 지정해 사용할 수 있다. 

주석 스타일이 여러개가 필요한 경우가 아니라면 HTML 태그 사용을 권한다. 아래 코드를 보면 HTML 태그를 사용했을 때 코드가 간결해 지는 것을 볼 수 있다.

/*HTML 코드를 사용했을 때*/

<p>IDPF<cite>International Digital Publishing Forum</cite>에서 EPUB 표준<cite>標準</cite>을 배포<cite>配布</cite>한다.</p>


/*<span> 태그에 클래스를 적용했을 때*/

<p>IDPF<span class="txt_annotation">International Digital Publishing Forum</span>에서 EPUB 표준<span class="txt_annotation">標準</span>을 배포<span class="txt_annotation">配布</span>한다.</p>



2.4 문단 단위의 인용구


/*문단 단위의 인용이나 편지글 등 본문과 구분을 위해 사용한다.*/

blockquote {

font-family : "강조를 위한 글꼴" /* 필요시 글꼴을 변경한다 */

margin : 10px 0 10px 5px;  /*본문과 구분을 두기 위해 상하 왼쪽 여백을 둔다.*/

font-size : 0.9em; /*필요시 글자 크기를 변경한다*/

color=#555555; /*필요시 글자 색을 변경한다. */

}



문단 단위의 인용구나 본문과 구분을 해야하는 단락에 사용하는 스타일이다. 본문과 구분을 두기 위해 여백, 글자색, 글자크기 등 다양한 효과를 줄 수 있다. 본문과 구분을 주기 위해 배경색, 문단 테두리 등을 적용하고자 할 때는 <div> 태그를 사용한 text_box 스타일을 참고하기 바란다. 


2.5 글자에 선을 긋는 스타일

/*글자의 위, 가운데, 아래에 선을 긋는다*/

.txt_overline {text-decoration:overline;} 

.txt_midline {text-decoration:line-through;} /*<del> 태그를 사용할 수 있다*/

.txt_underline {text-decoration:underline;} /*<ins> 태그를 사용할 수 있다*/


글자에 취소선이나 밑줄을 그어야 할 때 사용할 수 있다. 이 중 txt_midline과 txt_underline은 각각 <del>, <ins>태그를 활용할 수 있다.


2.6 첫 글자

반응형
posted by 내.맘.대.로 2014. 12. 26. 13:09

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

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

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

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

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

3. 본문 내어쓰기


드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다.

들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. 


 CSS : Style.css 

p.outdent {

text-indent : -2em;

padding : 0 0 0 3em;

}


 HTML : ch001.html 

<p class="outdent">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>



여백은 margin이 아니라 padding을 사용한다. margin과 padding의 차이는 http://epubguide.net/43 여기서 확인하기 바란다. 

margin이 아닌 padding으로 여백을 주는 이유는 글자가 테두리 안에 들어오는게 제대로 된 편집이기 때문이다. margin으로 내어쓰기의 여백을 설정하면, 눈에는 보이지 않아도 글상자 밖으로 글자가 나가게 된다. 


 CSS : Style.css 

p.outdent_padding {

text-indent : -2em;

padding : 0 0 0 2em;

border : dotted 1px red;

}

p.outdent_margin {

text-indent : -2em;

padding : 0 0 0 2em;

border : dotted 1px red;

}


 HTML : ch001.html 

<p class="outdent_padding">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>

<p class="outdent_padding">워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다. </p>


위에서 작성한 코드의 결과를 보면 이렇게 나온다. padding을 여백으로 설정하면 글상자 안에 글자가 들어가는데 margin으로 여백을 설정하면 글상자 밖으로 글자가 나온다. 테두리가 없으면 똑같이 보이지만 테두리가 보이면 차이를 알아볼 수 있다. 


▶ outdent-padding을 적용한 결과

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다.


▶ outdent-margin을 적용한 결과

워드프로세서에는 들여쓰기와 내어쓰기 기능이 구분되어 있는데 HTML과 CSS에는 들여쓰기만 있고 내어쓰기 기능이 없다. 대신 들여쓰기(text-indent) 스타일에 음수를 넣어 내어쓰기를 표현하는 방법이 있다. 들여쓰기는 text-indent 스타일만 지정하면 되는데 내어쓰기를 위해서는 여백(padding) 설정을 같이 해줘야 한다. 여백설정을 하지 않으면 텍스트가 화면 밖으로 나가거나 뷰어가 강제로 내어쓰기를 무시하게 된다.



반응형
posted by 내.맘.대.로 2014. 12. 19. 13:45

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

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

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

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

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

기본 탬플릿은 말 그대로 가장 기본이 되는 스타일이다. 기본 탬플릿으로 전자책을 만들면 나쁘진 않지만 그저 그런 정도의 결과물 밖에 얻을 수 없다. 기본 탬플릿은 초콜릿을 만들 때 쓰는 몰드 역할을 한다. 프랄린의 모양을 예쁘게 잡아 주지만 초콜릿을 녹여 몰드에 넣고 찍어내면 아무 의미가 없다. 프랄린의 진짜 가치는 프랄린 안에 들어가는 필링(프랄린 초콜릿 안에 들어있는 부드럽고 다양한 맛을 내는 재료)에 있기 때문이다.

기본 탬플릿은 틀에 불과하다. 이 틀을 어떻게 변형시키느냐에 따라 다양한 스타일을 얻을 수 있다. 이번 챕터에서는 몇가지 예를 통해 기본 탬플릿을 활용하는 방법을 설명하려고 한다.



1. 표지 이미지 스타일

표지는 여러가지 스타일이 필요하지 않다. 거의 모든 EPUB 책에서 표지에 이미지를 넣기 때문에 표지이미지를 뷰어에서 가장 잘 표현해 줄 수 있는 스타일이면 된다. 
EPUB 편집자마다 사용하는 표지 이미지 스타일이 다양하게 있는데 대부분 스타일 없이 삽입하거나 가운데 정렬을 하는 정도이다. 필자가 주로 사용하던 스타일도 좌우 가운데정렬이었다. 사용하는 속성은 조금씩 다르겠지만 유통중인 EPUB은 대부분 이런 스타일을 적용한 것으로 보인다. 

예제1) 일반적인 표지 이미지 스타일


 CSS : Style.css 

.cover {

text-indent : 0;

text-align : center;

margin : 0;

padding : 0;

width : 100%;

}


img {

width : 100%;

margin : 0;

padding : 0;

}


 HTML : Cover.html 

<p class="cover"><img alt="표지이미지" src="../Images/cover.jpg" /></p>


이 스타일은 이미지가 가로 가운데 정렬이 되고, 화면 크기에 맞춰 이미지가 확대된다. 그러나 세로는 항상 위쪽에 붙기 때문에 뷰어가 세로로 길어질 경우 이미지가 위쪽으로 치우치게 된다. 최근에 나오는 모바일 기기들은 3:4 비율은 거의 없고 9:16 이상의 비율을 갖는 경우가 많아 이미지가 위쪽으로 치우치면 좋아보이지 않는다. 그래서 상하 좌우 가운데 정렬이 되도록 하는 스타일을 소개한다. 이 스타일은 필자가 만든게 아니고 넥서스 출판사에서 만든 EPUB의 표지이미지 스타일을 참고한 것임을 밝힌다. 


예제2) 상하 좌우 가운데 정렬된 표지 이미지 스타일


 CSS : Style.css 

div..cover {

width: 100%;

height: 100%;

text-align : center;


display: box;

box-orient: horizontal;

box-pack: center;

box-align: center;


display: -webkit-box;

-webkit-box-orient: horizontal;

-webkit-box-pack: center;

-webkit-box-align: center;


display: -moz-box;

-moz-box-orient: horizontal;

-moz-box-pack: center;

-moz-box-align: center;

}


 HTML : Cover.html 

<html>

<head>

<style>

html, body { height : 100%; margin : 0; padding : 0; }

</style>

</head>

<body>

<div class="cover"><img alt="표지이미지" src="../Images/cover.jpg" /></div>

</body>

</html>


* 표지 이미지를 화면에 가득 채우기 위해 페이지 전체 높이(height)를 100%로 줘야 한다. 그래서 html과 body에 스타일을 지정했다. 하지만 html과  body에 스타일을 지정하는건 표지에 한정되어 있기 때문에 인라인 스타일이나 내부 스타일로 지정을 하였다. 



반응형
posted by 내.맘.대.로 2014. 12. 12. 09:10

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

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

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

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

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

2. 제목 스타일 꾸미기

책의 제목 스타일은 다양하다. 여기서는 시중에 판매되고 있는 책의 제목 스타일을 CSS로 어떻게 표현할 수 있는지 설명을 하려고 한다. 전자책을 종이책과 똑같은 스타일로 맞추는 것은 권하지 않는다. 전자책과 종이책은 각각의 특성이 있기 때문에 똑같이 만들기 보다는 특성에 맞춰서 독자들이 편하게 읽을 수 있도록 편집을 해야한다. 

여기서 책의 제목 스타일을 그대로 구현하는 것도 책 스타일을 전자책에 옮기려는 목적에 있는게 아니고 CSS 스타일을 어떻게 적용하는지 설명을 위해서일 뿐이다. 



예제1) 

* 100명 중 98명이 헷갈리는 우리말 우리문장 중에서


▷ 위 스타일에서 필요한 속성

1. 원형 테두리가 있는 장 번호 : border, radious, background-color

2. 필기체 스타일의 글꼴 : font-family

3. 점선 밑줄 : border-bottom

4. 가운데 정렬 : text-align

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다.  


필요한 스타일이 정해졌다면 CSS로 각 스타일을 정리하고 적절한 값을 찾는다.

위 제목 스타일을 적용하기 위해서는 2개의 스타일이 필요하다. 하나는 원형의 장 번호, 다른 하나는 제목 텍스트의 스타일이다. 원형의 장 번호를 이미지로 처리하면 텍스트에 필요한 스타일만 적요하면 된다. 

CSS만으로 원형 장번호에 말풍선처럼 화살표를 넣기는 어렵다.말풍선 화살표가 필요하다면 이미지를 배경으로 사용하는게 좋다.



 CSS : Style.css 

h2 { 

font-family : 필기체;

border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;

text-indent : 0;

text-align : center;

}


div.ch_no{

display : table;

margin-left : auto;

margin-right : auto;

font-size : 2em;

text-align : center;

background: #ff6633;

width: 35px;

height : 35px;

border-radius: 50%;

}




 HTML : title.html 

<html>

<head>

<link href="../Styles/style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="ch_no">1</div>


<h2>맞춤법이 뭐예요?</h2>

</body>

</html>



예제2)


▷ 위 스타일에서 필요한 속성

1. 글자 색 지정 : color

2. 아래쪽 점선 : border-bottom

* 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

h3 {

font-size : 1.4em;

color : #ff6633;


border-bottom : dotted 2px #ff6633;

display : table;

margin-left : auto;

margin-right : auto;


text-indent : 0;

}


 HTML : title.html 

<h3>맞춤법은 소리 나는 대로 적는 것이다?</h3>



예제3)



▷ 위 스타일에서 필요한 속성

1. 원 안에 든 글번호 : border, border-radious

2. 글번호 우측 정렬 : display : flex, flex-flow

2. 제목 줄 바꾸기 : display : block

3. 슬래시(/) 자동으로 넣기 : ::before

    * 이 외에 boder의 크기를 글자에 맞추기 위해 display 와 margin 속성이 사용된다. 


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.css 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br />몇점일까?</h2>



예제4)

아래 예제는 '예제3'에서 아래쪽에 본문과의 여백을 두는 스타일이다. 본문과 여백을 두는 스타일은 쓰임이 많기 때문에 따로 설명을 한다. 



▷ 위 스타일에서 필요한 속성

1. 여백 설정 : margin 혹은 margin-bottom

    * 제목이나 문단에 여백을 줄 때는 padding보다 margin을 사용하는 것이 좋다.


 CSS : Style.css 

div.title { /*div 태그로 만든 원형 글상자를 오른쪽 정렬 시킴*/

display: flex;

flex-flow: row-reverse wrap;

}


div.ch_no{ /*장 번호를 위한 원형 글상자*/

font-size : 1.5em;

text-align : center;

background: #aaaaaa;

width: 30px;

height : 30px;

border-radius: 50%;

}


h2 { /*장 제목*/

text-align : right;

margin : 0 0 10% 0; /* margin-bottom : 10% 혹은 margin-bottom 20px 사용 가능*/

}


h2::before{ /* 장 제목 앞에 슬래시'/'를 자동으로 추가*/

content : "/";

display : block;

}


 HTML : ch001.html 

<div class="title">

<div class="ch_no">1</div>

</div>

<h2>나의 돈 관리 능력은<br/>몇 점일까?</h2>


* 전자책은 스마트폰, 태블릿, PC 등 하나의 파일로 여러 기기에서 사용을 한다. 그래서 상하 여백을 둘 때 화면 크기를 고려해야 한다.

상하 여백을 비율(%, em)로 설정하면 화면 크기에 맞춰 간격이 조절된다. 아이패드 처럼 큰 화면에서는 상하 간격이 넓어지고, 스마트폰에서는 상하 간격이 줄어든다. 하지만 화면에 따라 간격이 항상 바뀌기 때문에 편집 의도와 다른 결과를 보여줄 수도 있다. 

상하 여백을 고정값(px)으로 적용하면 제목과 본문 사이의 간격이 일정하게 유지된다. 하지만 화면 해상도에 따라 간격이 크게 벌어질 수 있고, 화면 크기에 따라 차이가 심하게 날 수 있다. 




예제5)

아주 간단하지만 많이 사용하는 스타일이다. 본문과 다른 글씨체를 사용하고, 위와 아래 여백을 둔다. 주의해야할 점은 들여쓰기이다. 기본 설정으로 들여쓰기가 되어 있으면 제목에도 영향을 줄 수 있다. 그렇기 때문에 제목에 들여쓰기를 할 것인지 확인하고 들여쓰기가 필요 없다면 들여쓰기 스타일을 빼줘야 한다.



▷ 위 스타일에서 필요한 속성

1. 글꼴 : font-family

2. 들여쓰기 설정 : text-indent

3. 상하 여백 : margin 혹은 margin-top, margin-bottom


 CSS : Style.css 

h3 {

font-family : "굴림";

text-indent : 0; /* 기본 들여쓰기가 되어 있어도 0으로 최화 됨. 들여쓰기를 원하면 지정할 수 있음.  */

margin : 10% 0 10% 0;

/* margin-top : 10%; margin-bottom : 10%; 여백 단위는 % 대신 px 등을 사용할 수 있음 */

}


 HTML : ch001.html 

<p>또 다른 주말에는 용서와.....</p>

<h3>결정적인 체험</h3>

<p>하루는 강사가 이런 말로...</p>




예제6)

아래같이 두단의 서로 다른 스타일 제목을 표현할 때는 <p> 태그로 묶은 후 다른 클래스로 스타일을 지정하는 방식을 많이 사용한다.


<p class="title_top">삶을 위한</p>

<p class="title_bottom">선택</p>


이렇게 표현을 하면 쉽게 스타일을 적용할 수 있는 반면, 제목 텍스트가 2개로 나뉜다는 문제점이 있다. 만약 이 페이지를 목차에 포함시키고 싶다면 어떻게 될까? 이 페이지의 목차는 '삶을 위한'이 된다. TOC를 수정한다 해도 권할 만한 방식은 아니다. 



▷ 위 스타일에서 필요한 속성

1. 글자색 : color

2. 줄바꿈 : display : block;


 CSS : Style.css 

h3 {

font-size : 1.4em;

margin-bottom : 10%;

}


.title {

display : block; /* br 태그를 쓰지 않고도 다음 줄로 내릴 수 있음 */

color : #777777;

}


 HTML : ch001.html 

<h3>삶을 위한 <span class="title">선택</span></h3>



** 시간이 오래 걸려 정리되는 대로 공개를 하겠습니다. 아래쪽도 계속 채울 예정입니다. **

예제7)

제목이나 제목 번호에 이미지로 글번호를 넣는 방법은 두가지이다. 하나는 이미지별로 번호를 넣어 사용하는 방식이다. 별다른 스타일을 적용할 필요 없어 편하긴 하지만, 목차가 100개쯤 되면 파일 용량도 커지고, 이미지가 많아 편집 시간이 오래 걸릴 수 있다. 

다른 하나는 배경에 이미지를 넣는 방식이다. 배경으로 이미지를 넣으면 이미지는 하나만 사용하고, 번호에 맞는 이미지를 찾는 시간도 절약할 수 있다. 하지만 편집이 복잡해 질 수 있기 때문에 글자를 확대/축소할 때 틀어질 수 있다.

이미지별로 글번호를 넣는 방법은 간단하기 때문에 여기서는 이미지를 배경으로 넣는 방법을 설명하겠다. 


▷ 위 스타일에서 필요한 속성

1. 배경이미지 : background-image

2. div 글상자에서 글자 정렬 : position, left, top


 CSS : Style.css 

div.bullet {

        background-image: url("bags.jpg");


        font-size : 35px;  /* 배경 이미지 크기는 고정이기 때문에 글자 크기를 조절할 수 없도록 px를 사용했다 */

        color : #FFFFFF;

            

        margin-left : auto;

        margin-right : auto;

        

        width: 67px;

        height : 80px;  

  }


  p.bulletNo { /* 글자의 위치를 고정시켜 화면 크기가 바뀌더라도 배치가 틀어지지 않는다 */

        position : relative; 

        left : 17px;

        top : 35px;

  }


  h2 {

        font-size : 1.5em;

        text-align : center;

  }


 HTML : ch001.html 

  <div class="bullet">

    <p class="bulletNo">01</p>

  </div>


  <h2>현명한 부모는 공부보다<br />

  운동을 먼저 시킨다</h2>



예제8)

아래 제목은 아주 단순하기 때문에 특별히 스타일을 적용할 필요는 없다. 그런데 제목 앞에 별표(★)가 있다. 제목에 항상 이런 특수한 기호나 단어가 들어간다면 CSS로 간단히 처리하는 방법이 있다. 제목을 쓸 때마다 별표를 하지 않아도 자동으로 추가되고, 표시를 변경할 때도 CSS만 수정하면 된다. 



▷ 위 스타일에서 필요한 속성

1. 앞쪽에 기호나 문장 삽입 :  ::before

* 뒤쪽에 들어가는 기호나 문장은 ::after를 사용한다.


 CSS : Style.css 

  h4 {

        font-size : 1.2em;

  }

  h4::before {

content : "★"; /* "참고", "주의!" 등 글자가 올 수도 있다 */

  }


 HTML : ch001.html 

  <h4>아이가 어릴수록 영수보다 운동을 시켜라</h4>



예제9)

아래처럼 제목 앞에 큰 이미지가 오고 이미지의 상하 중앙에 제목을 넣어야 하는 경우가 있다. 간단한 스타일이지만 복잡하게 생각하는 편집자들이 많이 있는 것 같다. div로 이미지를 감싸고 float을 써서 텍스트에 어울림 처리를 생각했다면 아래 스타일을 참고하기 바란다. 



▷ 위 스타일에서 필요한 속성

1. 이미지와 텍스트 상하 정렬 : vertical-align


 CSS : Style.css 

p.mtitle {

color : #5E6A70;

font-size : 1.1em;

padding : 1.3em 0em 0em 0px;

}

img.chakra{

vertical-align : middle;

padding : 0 10px 0 0;

}


 HTML : ch001.html 

  <p class="mtitle"><img class="chakra" src="../chakra.jpg" / alt="bullet">마시 시모프</p>



예제9)

아래 같은 편집은 전자책에서는 아주 까다롭다. 스타일 자체는 복잡하지 않은데 화면 크기도 제각각이고 글자 크기가 변경되기 때문에 본문 한줄만 이미지 아래에 걸치게 조절하기가 어렵다. 아래 코드는 글자 크기에 따라 처음 몇줄이 이미지 위에 걸치도록  했다. 글자 크기에 따라 이미지 위에 걸치는 본문 줄수가 1줄 ~ 3줄 이상이 될 수도 있다.


▷ 위 스타일에서 필요한 속성

1. 이미지 왼쪽으로 글자 배치 : float : left;


 CSS : Style.css 

img.bar {

float : left;

margin : 0;

padding : 0 10px 0 0;

}


h3 {

font-size : 1.5em;

margin-bottom : 280px; /* 이미지 세로 길이가 366px 이었기 때문에 본문이 이미지에 걸쳐질 수 있도록 아래쪽 여백을 조절했다 */

}

.chNo {

color : #AAAAAA;

font-size : 0.5em;

display : block;

}


 HTML : ch001.html 

<h3><img class="bar" src="../Images/bar.png"/><span class="chNo">두번째</span> 평생의 친구를 찾아라</h3>

<p>인생의 현자들을 만나 "오랫동안 행복한 결혼을 할 수 있었던 비결이 뭡니까?"하고 물었을 때 가장 먼저 나온 대답이 바로 "제일 친한 친구와 결혼을 했지."였다. 반대로 결혼에 실패한 사람들 중에는 이렇게 대답한 사람이 많았다. "우린 연인으로서는 좋았지만 친구가 되는 법을 알지 못했어."</p>


예제9)


아래 제목은 제목 아래에 이미지로 된 선이 그어져 있다. 이런 경우 간단히 표현을 하려면 이미지를 포기하고 비슷한 색으로 밑줄을 그어 주는 방법을 이용할 수 있다. 만약 밑줄 이미지가 편집에 중요하다면 이미지를 테두리로 표현할 수도 있다. 


▷ 위 스타일에서 필요한 속성

1. 텍스트 길이에 맞춰 글상자 크기 조절 : display : table;

2. 테두리 이미지 : border-image

3. 테두리 밑줄 : border-bottom


 CSS : Style.css 

h2.line { 

border-bottom : solid 2px #718F3F;

display : table;

}


h2.image { 

-webkit-border-image:url(underline.png) 0 0 5 0 round;

border-image:url(underline.png) 0 0 5 0 round;

display : table;

}


 HTML : ch001.html 

<h2 class="line">두번째 평생의 친구를 찾아라</h2>

<h2 class="image">두번째 평생의 친구를 찾아라</h2>


* border-image : border-image는 글상자 테두리를 이미지로 그려주는 스타일이다. 

border-image:url(underline.png) 0 0 5 0 round;

   앞쪽부터 이미지 url, 위 오른쪽 아래 왼쪽 테두리, 이미지 적용 방식으로 값을 지정한다. 


반응형