내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
이미지에 적용할 수 있는 스타일은 그리 많지 않다. CSS3를 활용하면 이미지 갤러리처럼 다양한 효과를 낼 수 있지만 일반적인 책 편집에는 간단한 스타일이 주로 사용된다.
전자책 편집에서 많이 사용하는 스타일은 정렬과 float(HWP의 어울림 기능)이 있다.
이미지 정렬 기능은 문단 정렬과 다르지 않다. 그래서 문단 정렬을 위해 만든 스타일을 그대로 사용할 수 있다. 만약 이미지에 테두리나 그림자를 두고 싶다면 border 속성을 사용할 수 있다.
▶ 문단 정렬 스타일 예시
.txt_center {
text-align : center;
}
.txt_right {
text-align : right;
}
.txt_left { /* 기본 정렬이 왼쪽으로 되기 때문에 왼쪽 정렬은 없어도 된다 */
text-align : left;
}
.img_border {
border : solid blue 2px;
margin : 0;
}
왼쪽 정렬 <p class="text_left"><img src="sample.jpg /></p>
가운데 정렬 및 테두리 <p class="text_center"><img class="img_border" src="sample.jpg /></p>
오른쪽 정렬 <p class="text_right"><img src="sample.jpg /></p>
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다. float 스타일은 이미지에만 사용할 수 있는게 아니다. 문단의 왼쪽이나 오른쪽에 보충설명을 위한 텍스트상자를 넣고 싶을때도 유용하게 사용할 수 있다.
책을 편집하다 보면 이미지에 설명을 추가해야 하는 경우가 있다. 이때 caption 스타일을 미리 만들어 두명 유용하게 활용할 수 있다.
▶ float 스타일 예시
img {
width : 100%; /*이미지가 할당한 영역보다 크다면 이미지 크기를 할당 영역에 들어가도록 해야함*/
}
.float_left {
float : left;
}
.float_right {
float : right;
border : solid 1px grey;
}
.txt_float_left { /*float을 활용한 보충 설명용 텍스트 상자 */
float : left;
width : 30%;
border : solid 1px grey;
margin : 5px; /*테두리 바깥쪽 여백*/
padding : 10px;/*테두리 안쪽 여백*/
}
.caption {
font-size :0.8em;
color : red;
text-align : center;
display :block;
}
▶ float 스타일 적용 결과
float:left 적용
float:right 적용
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
□ 이미지 정렬 코드 예시
<p class="float_left"><img src="sample.jpg" /><span class="caption">float:left 적용</span></p>
<p class="float_right"><span class="caption">float:right 적용</span><img src="sample.jpg" /></p>
<p>전자책을 편집할 때 정렬보다 더 많이.....</p>
<p>전자책을 편집할 때 정렬보다 더 많이.....</p>
<p class="txt_float_left">전자책을 편집할 때 정렬보다 더 많이.....</p>
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
전자책을 편집할 때 정렬보다 더 많이 사용하는 스타일이 float이다. float 스타일을 적용하면 HPW에서 어울림으로 이미지를 처리했을 때와 같은 효과를 낼 수 있다. float 스타일 역시 다른 스타일과 함께 사용해서 이미지를 꾸밀 수 있다.
이 외에도 이미지에 활용하기 좋은 스타일로 box-shadow가 있다. box-shadow는 이미지의 상하좌우에 그림자를 그려주는 스타일로 잘 활용하면 이미지에 멋진 효과를 줄 수 있다.
.img_shadow {
float :left;
box-shadow: 10px 15px 5px grey;
border : solid 1px grey;
}
box-shadow는 테두리 주위에 그림자를 나타내 주는 스타일이다.
그림자 효과를 잘 활용하면 보다 입체적인 편집을 할 수 있다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
| 1.2.7.2 CSS 템플릿 활용하기 - 제목 꾸미기 (2) | 2014.12.12 |
|---|---|
| 1.2.7 CSS 템플릿 만들기 - 기본 탬플릿 (0) | 2014.10.17 |
| 1.2.6.5 CSS 기초 - 여백 설정 (0) | 2014.09.24 |
| 1.2.6.4 CSS 기초 - 테두리와 글상자 (0) | 2014.09.12 |
| 1.2.6.3 CSS 기초 - 글꼴(폰트) 속성 (0) | 2014.08.20 |