posted by 내.맘.대.로 2022. 7. 27. 14:43

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

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

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

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

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

728x90

전자책 편집하다 보면 테두리를 그릴 때가 많습니다.

상하좌우 같은 모양의 테두리는 쉽게 그리는데,

네 모서리 모양이 다르면 어려워 하는 분들이 많은 것 같아요.

이렇게 네 모서리 모양이 다를 때는 어떻게 할까요?

테두리 그리는건 쉽게 생각하세요.

물론, 어려운 테두리도 있습니다.

일정한 패턴 없이 중구난방인 선으로 테두리를 그리면 CSS로 처리하기 어렵지요.

하지만 네 모서리만 모양이 다르다면 어렵지 않아요.

테두리 그리는 법은 여러번 설명했는데,

border-image를 사용합니다.

선이야, 그냥 border 쓰면 되고,

border로 그릴 수 없는 테두리는 border-image를 사용하지요.

border-image 사용법을 익히면 이런 테두리는 어렵지 않게 그릴 수 있어요.

border-image 사용법은 여기에...

https://www.w3schools.com/cssref/css3_pr_border-image.asp

반응형

댓글을 달아 주세요

posted by 내.맘.대.로 2022. 7. 27. 09:42

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

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

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

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

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

728x90

이런 스타일입니다.

chapter 1 ──────

이렇게 제목 번호 뒤에 선이 있습니다.

이 선을 그릴 때 예전에 쓰던 스타일은

<div class="chapNo">chapter 1</div>

이렇게 하고

chapNo의 중간에 선으로 된 배경 이미지를 넣고

안쪽 span을 흰색 배경을 채워 chapter 1쪽우로 넘어온 배경선을 숨겼지요.

그런데 이렇게 하면 배경색을 바꿨을 때 chapter 1 부분이 하얗게 보이는 문제가 있었습니다.

이를 해결하려고

<div class="chapNo"><span>chapter 1<span><span></span></div>

이렇게 한 후 chapNo에

display : flex;

앞쪽 span에 적당한 width, 뒤쪽 span에 선배경

이렇게 처리를 했습니다.

그런데 태그가 너무 복잡해졌지요.

그러다 문득, calc가 생각이 났네요.

그래서

<div class="chapNo">chapter 1</div>

이렇게 한 후

chapNo에

배경선을 집어 넣는 것 까지는 똑같이 하지만

background-size를 (100% - 적당한 글자 길이),

background-position 을 가운데 오른쪽

해서 넣으니 간단히 해결이 됐습니다.

뭔 소리인지 모두 이해 하셔지요 ^^b

잘 안되시면 본인이 직접 장성한 스타일과 태그를 올려주세요.

그러면 어떤 부분이 문제인지 답변드리겠습니다.

반응형

댓글을 달아 주세요