검색결과 리스트
2020/11에 해당되는 글 9건
- 2020.11.23 [CSS 스타일 샘플] 이미지 왼쪽에 캡션 넣기
- 2020.11.23 Sigil 1.4.2 긴급 업데이트
- 2020.11.17 Sigil 1.4.1 긴급 업데이트
- 2020.11.16 [무료 전자책] 도산 안창호, 대수양(大首陽)
- 2020.11.14 Sigil 1.4.0 버전이 나왔습니다.
- 2020.11.13 전자책 서지정보 필수 항목
- 2020.11.11 [무료 전자책] 단종애사
- 2020.11.10 [CSS 스타일 샘플] 이미지 빈 공간에 글자 채우기 - shape-outside
- 2020.11.04 [문의&답변] 초보자를 위한 Sigil용 정규식
글
[CSS 스타일 샘플] 이미지 왼쪽에 캡션 넣기
이미지는 주로 가운데, 왼쪽, 오른쪽 3가지 스타일로 작업을 많이 합니다.
그런데 간혹 아래처럼 넣어달라고 요청하는 분들이 계세요.
이미지가 세로로 길어 가운데 넣기엔 너무 커지고,
이미지 설명이 많아 왼쪽이나 오른쪽으로 float을 하자니 캡션이 다음페이지로 넘어가 가독성이 떨어질 때가 있지요.
그래서 이미지를 가운데 넣지만, 50%로 줄이고, 남은 공간에 캡션을 넣는 스타일입니다.
화면 크기가 줄어들면 이렇게 이미지도 같이 작어져요.
캡션은 텍스트기 때문에 이미지가 작아져도 캡션을 보는데 문제가 없습니다.
이런 스타일은 grid나 flex를 쓰면 되지만, grid를 쓰면 태그가 복잡해져요.
img_center 스타일을 그대로 살리면서 캡션과 이미지 영역만 조절해 표현할 수 있습니다.
.img_left_center {
width: 95%;
box-sizing: border-box;
margin: 1em auto 1em auto;
text-align: center;
}
.img_left_center img {
width : 50%;
}
.img_left_center .img_caption {
display : inline-block;
font-size: 0.8em;
font-family: "약물고딕", "기본고딕";
text-align: justify;
width : 45%;
}
이 스타일의 핵심은 display : inline-block;이에요.
이미지 옆에 텍스트가 나오려면 inline 속성이어야 하는데, inline으로 텍스트를 넣으면 이미지 하단에 한줄만 나오고 나머지는 다음줄로 내려갑니다.
이걸 해결하려면 block 속성을 써야하는데 block은 이미지 아래로 설명을 내리지요.
그래서 inline-block이라는 속성을 씁니다.
나머지 속성들은 그저 도울 뿐....
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
[질문&답변] 다양한 형태의 제목 밑줄 스타일 (2) | 2021.01.06 |
---|---|
Sigil 초보자를 위한 CSS 편집기 (0) | 2020.12.14 |
[CSS 스타일 샘플] 이미지 왼쪽에 캡션 넣기 (0) | 2020.11.23 |
문단 내(inline)에 있는 글자의 상하 여백 설정 (0) | 2020.10.15 |
[CSS 샘플]약물 간격 조정 - 습관에 길들지 않기... (0) | 2020.08.11 |
[CSS 스타일 샘플] 간단해 보이지만 복잡했던 장제목 스타일 (0) | 2020.08.06 |
글
Sigil 1.4.2 긴급 업데이트
Sigil 긴급 업데이트가 올라왔습니다.
1.4.1에서 다시 업데이트가 되었습니다.
1.4.0, 1.4.1 쓰는 분들은 꼭 업데이트 하라고 합니다.
Bug Fixes Since Sigil-1.4.0:
- critical bug fix for incorrectly xml encoding of opf metadata attributes that use entities
- fix bug in "Add Existing" files when file names would require percent encoding
- fix bug in multiple language spellchecking dialog word lookup when no language attributes used
- update de, nl, sv, ko, ru translations that missed the Sigil 1.4.0 initial release
- critical bug fix for over xml encoding html used inside metadata in the opf
- revert ctrl-f to it long standing Find and Replace behaviour
'Sigil 사용 설명서' 카테고리의 다른 글
EPUBCheck 플러그인 구버전 Java 1.6 지원 (0) | 2021.01.27 |
---|---|
Sigil 사용 설명서 - 기능편 (0) | 2020.12.17 |
Sigil 1.4.2 긴급 업데이트 (0) | 2020.11.23 |
Sigil 1.4.1 긴급 업데이트 (0) | 2020.11.17 |
Sigil에 새로 추가될 기능 (0) | 2020.09.28 |
국중 전자책 제작 교육(온라인)을 진행합니다. (1) | 2020.07.27 |
글
Sigil 1.4.1 긴급 업데이트
sigil-ebook.com/2020/11/16/sigil-1-4-1-critical-fix-release/
Sigil-1.4.1 Critical Fix Release
Sigil-1.4.1 Bug Fixes: critical bug fix for over xml encoding html used inside metadata in the opf return use of ctrl-f to its long standing functionality Please use Sigil 1.4.1 in place of Sigil 1…
sigil-ebook.com
Sigil 1.4.1 긴급 업데이트입니다.
CTRL+F 키가 잘못 연결됐나봅니다.
OPF 관련 버그도 수정되었다고 합니다.
1.4.0 사용하시는 분들은 꼭 업데이트 하세요.
'Sigil 사용 설명서' 카테고리의 다른 글
Sigil 사용 설명서 - 기능편 (0) | 2020.12.17 |
---|---|
Sigil 1.4.2 긴급 업데이트 (0) | 2020.11.23 |
Sigil 1.4.1 긴급 업데이트 (0) | 2020.11.17 |
Sigil에 새로 추가될 기능 (0) | 2020.09.28 |
국중 전자책 제작 교육(온라인)을 진행합니다. (1) | 2020.07.27 |
Sigil 한글 메뉴 파일 (0) | 2020.06.26 |
글
[무료 전자책] 도산 안창호, 대수양(大首陽)
EPUBGUIDE.NET의 무료 전자책 도서관 - 직지 도서관에
한국문학 장편 2종이 추가됐습니다.
김동인의 대수양대수양(大首陽)
이광수의 도산 안창호
보러 가기 : jikji.duckdns.org/shelf/2
무료로 EPUB을 다운로드 받을 수 있고,
웹브라우저에서 직접 책을 볼 수 있습니다.
이용 방법 : www.epubguide.net/326
무료 전자책
심훈의 상록수 무료로 보세요~ jikji.duckdns.org/book/113 아이디어회관 SF / 직지 프로젝트 도서(등록 완료) jikji.duckdns.org/shelf/1 EPUBGUIDE.NET | Shelf: '아이디어회관 SF' 193.122.179.74 한국문학-단..
www.epubguide.net
'Tip&Tech > 전자책으로 읽자' 카테고리의 다른 글
[무료 전자책] 도산 안창호, 대수양(大首陽) (0) | 2020.11.16 |
---|---|
[무료 전자책] 단종애사 (0) | 2020.11.11 |
무료 전자책 (0) | 2020.10.22 |
직지 프로젝트 무료 전자책 보러 오세요~ (6) | 2020.04.24 |
클리너 사용할때 주의하세요. (0) | 2017.06.29 |
글
Sigil 1.4.0 버전이 나왔습니다.
Sigil 1.4.0 버전이 발표됐습니다.
이번 버전에는 UI가 크게 변경됐습니다.
테마 기능이 추가됐고, 새로운 아이콘이 3개 등록되었네요.
아이콘은 SVG로 제작돼 확대를 해도 깨지지 않습니다.
기본 아이콘 외에 2개 커스텀 UI가 추가되었습니다.
UI 보다 더 반가운건,
사전을 2개 사용할 수 있게 변경된 맞춤법 검사 기능입니다.
한국어, 영어 사전을 동시에 등록해 맞춤법 검사를 사용할 수 있습니다.
인디자인 같은 원고를 변환하는 분들께는 큰 도움이 안되겠지만
전자책만 출간하는 분들께는 Sigil에서 맞춤법 교정까지 가능합니다.
글
전자책 서지정보 필수 항목
전자책을 제작할 때 서지정보 3개를 요청드립니다.
1. 전자책 출간일
2. 전자책 정가
3. 전자책 ISBN
이 정보를 요청하는 이유는, 국립중앙도서관에서 온라인자료를 납본받을 때
EPUB 같은 전자책 파일인 경우 이 중 하나라도 없으면 반려를 하기 때문입니다.
ISBN은 [국립중앙도서관 자료수집규정]에 표시하도록 되어 있습니다.
납본 불가 사유서에 보면 [자료명, 저자명, 발행처, 발행일, 가격, ISBN] 항목이 있습니다.
이 중 하나라도 표기가 안돼있으면 반려하는 것 같아요.
자료명, 저자명, 발행처는 판권면에 항상 표시돼 있어
책에서 확인할 수 없는 출간일, 정가, ISBN을 추가로 요청드립니다.
이 중 정가를 표기하지 않는 경우가 많이 있는데
이런 무서운 규정이 있어요.
물론, 지금까지 이 규정으로 과태료 받았다는 출판사는 보지 못했지만, 조심해서 나쁠건 없지요.
주요내용 및 근거 : 출판문화산업진흥법 제22조(간행물의 정가 표시 및 판매) - 전자출판물의 경우에는 출판사가 정가를 서지정보에 명기하고 전자출판물을 판매하는 자는 출판사가 서지정보에 명기한 정가를 구매자가 식별할 수 있도록 판매사이트에 표시해야 함 (* 출판법 제22조 제3항 근거, 위반 시 과태료 100만원 부과) - 도서를 최종소비자에게 판매할 때 정가대로 판매하되, 독서진흥과 소비자 보호를 위하여 정가의 15% 이내에서 가격할인과 경제상의 이익을 제공할 수 있음 (* 단, 가격할인은 10% 이내로 제한, 출판법 제22조 제4항, 제5항 근거, 위반 시 과태료 300만원 부과) |
'Tip&Tech > 실전! 전자책 제작' 카테고리의 다른 글
전자책 서지정보 필수 항목 (0) | 2020.11.13 |
---|---|
[샘플]EPUB에서 그림을 그리자~ 그림판 샘플 (0) | 2018.09.21 |
전자책 만들 때, 혹은 검수할 때 꼭 확인하고 주의해야 하는 사항들 (0) | 2018.07.27 |
제목에 테두리가 있는 글상자 만들기 (0) | 2018.06.26 |
[문의]재미있는 제목 스타일 (0) | 2018.05.28 |
분명 표지를 넣었는데 서재에서 표지 이미지가 보이지 않을 때 (5) | 2018.04.24 |
글
[무료 전자책] 단종애사
무료 전자 도서관에 단종애사 EPUB 올렸습니다.
다운로드와 브라우저로 바로 보기 가능합니다.
한국문학 장편 : jikji.duckdns.org/shelf/3
한국문학 단편 : jikji.duckdns.org/shelf/2
아이디어회관 직지 프로젝트 : jikji.duckdns.org/shelf/1
'Tip&Tech > 전자책으로 읽자' 카테고리의 다른 글
[무료 전자책] 도산 안창호, 대수양(大首陽) (0) | 2020.11.16 |
---|---|
[무료 전자책] 단종애사 (0) | 2020.11.11 |
무료 전자책 (0) | 2020.10.22 |
직지 프로젝트 무료 전자책 보러 오세요~ (6) | 2020.04.24 |
클리너 사용할때 주의하세요. (0) | 2017.06.29 |
글
[CSS 스타일 샘플] 이미지 빈 공간에 글자 채우기 - shape-outside
이미지른 넣다 보면 float : left, float: right로는 해결이 안되는 경우가 생깁니다.
이렇게 공간이 애매하게 남을 때가 있어요.
이미지가 하나로 연결돼 있어 중간을 잘라 float을 쓸 수도 없는 이미지.
이렇게 텍스트가 들어가면 조금 더 깔끔하게 편집을 할 수 있습니다.
ㅓ처럼 여러 각도로 꺾인 이미지
이런 대각선 이미지도 애매하지요.
종이책에서는 전체 이미지인데 float으로 넣으면 작아보이고
그렇다고 center로 넣자니 빈 공간이 너무 많아 보기 좋지 않습니다.
이런 그림도 마찬가지지요.
오른쪽 부분만 잘라 float : right을 쓰고 싶지만 그림이 붙어 있어 자르기 어렵습니다.
이럴 때 쓸 수 있는 속성이 shape-outside예요.
shape-outside는 크롬 브라우저에서 사용하려면 webkit 속성을 추가해야합니다.
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
shape-outside: polygon(0 0, 100% 100%, 0 100%);
국내 전자책 뷰어는 대부분 webkit을 사용하니 두 코드를 같이 넣어줘야돼요.
shape-outside에 ploygon 속성을 적용하면 이렇게 편집할 수 있습니다.
△ 모양의 이미지
ㄱ, ㄴ 같은 이미지
shape-outside는 여러 속성이 있습니다.
삼각형, 별 등 다각형을 표현할 때 polygon
원형은 circle
타원형은 ellipse,
그리고 다각형 안쪽에 글자를 넣을 수도, 바깥 쪽에 넣을 수도 있습니다.
shape-outside에 대한 설명은 여기로
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
shape-outside를 적용한 스타일은 여기를 참고하세요.
글
[문의&답변] 초보자를 위한 Sigil용 정규식
Sigil을 사용하는 이유는
HTML4, 5, CSS2, 3, JavaScript, jQuery 등 거의 모든 코드를 다 받아주는 강력한 코드 편집 기능,
그리고 정규식을 완벽히 지원하는 찾기/바꾸기 때문입니다.
이 두 기능을 안쓴다면 궂이 Sigil을 사용할 이유가 없지요.
특히 정규식을 완벽히 지원하는 찾기/바꾸기 기능은 다른 EPUB 편집기에는 없는 Sigil만의 독보적인 기능입니다.
정규식은 어려워요.
저도 어렵습니다.
제가 아는 있는 20년 다 되어 가는 최상급 개발자도 정규식이 어렵다고 합니다.
이 어려운걸 전자책 만드는데 쓰는건 얼마나 어렵겠어요.
그런데 어렵지 않습니다.
전자책 편집은 앱 개발이 아니잖아요.
기껏 해야 텍스트나 코드를 찾아 다른 것으로 바꾸는 정도예요.
그래서 몇가지만 알면 됩니다.
먼저, 아주 기본적인 PC 상식은 알아야겠지요?
\가 입력이 안되요... 라는 분은 정규식 사용을 권하지 않습니다.
1. (.*)
무엇이든 다 찾습니다.
<p>(.*)</p>
이렇게 찾기에 넣고 검색을 하면 <p>와 </p> 사이에 있는 모든 내용을 다 찾아줍니다.
다 찾는게 무슨 의미가 있지? 하고 생각하셨다면, Sigil 보다는 윙크, ebook스타일리스트를 쓰세요.
오! 하며 느낌표가 팍 오는 분들께는 신세계가 열릴거예요.
2. (\d), (\d\d), (\d+)
숫자만 찾습니다.
\d는 숫자 하나, \d\d는 숫자 두개, \d+는 갯수와 상관 없이 연속된 숫자를 모두 찾습니다.
이 두개만 잘 활용하면 전자책 제작에 필요한 정규식 90%는 해결합니다.
여기에 몇가지만 더 기억하세요.
4. 찾기에는 ()로 그룹을, 바꾸기에는 \1, \2로 찾은 값을...
예를 들어 날짜 표기 형식을 바꾼다고 생각해 보세요.
2020년 1월 1일 -> 1일 1월 2020년
2021년 2월 2일 -> 2일 2월 2021년
2022년 3월 3일 -> 3일 3월 2022년
찾기에 (\d\d\d\d)년 (\d)월 (\d)일
바꾸기에는 \3일 \2월 \1년
이렇게 해주면 됩니다.
(\d{4))
이런 것도 가능하지만, 초보자를 위한거라 넘어가겠습니다.
5. 정규식에서 사용하는 예약어, 예약 코드
(), \, .(점), [ ], ^, ?, * 등은 예약된 코드입니다.
예약코드는, 정규식을 만들 때 쓰는 코드예요.
그래서 검색창에 (를 넣고 찾으면 못찾습니다.
예를 들어
정규식(Regex)
이런 내용에 (Regex)만 찾고 싶습니다.
(.*)
이렇게 하면 못찾아요.
((.*))
이렇게도 못찾습니다.
괄호는 예약코드기 때문이에요.
예약코드를 찾을 때는 \를 써야합니다.
\((.*)\)
이렇게 하면 괄호를 포함해 괄호 안에 있는 글자를 찾습니다.
점을 찾고 싶다면 \.
물음표는 \?
곱하기는 \*
이렇게 찾으면 됩니다.
이정도만 기억하면 전자책 만들 때 필요한 정규식 95%는 해결됩니다.
5%는?
열심히 공부 해야겠지요^^
'EPUB 편집 가이드' 카테고리의 다른 글
EPUB3로 구현한 D3.js Polar Clock (0) | 13:38:16 |
---|---|
[문의&답변] 초보자를 위한 Sigil용 정규식 (0) | 2020.11.04 |
5. 편집하고 바로 읽는 EPUB 3 (0) | 2016.02.16 |
4. CSS, 전자책 편집의 시작과 끝 (2) | 2016.01.19 |
3. EPUB 제작을 위한 쉽고 간단한 HTML (0) | 2016.01.14 |
2. EPUB 만들 때 이것만은 (1) | 2016.01.11 |