posted by 내.맘.대.로 2023. 12. 29. 08:33

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

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

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

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

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

전자책을 만들다 보면 애매한 길이를 잡아야 할 때가 있습니다.

폭 100%에서 2em만 빼야 한다던가...

예를 들면 이런거.

이런 스타일 만드는 방법은 여러가지예요.

그런데 저 선을 background-image, linear-gradient 조합으로 만들고

background-size로 맞춘다. 이렇게 생각했을 때 문제가 되는 부분은 선의 길이지요.

예전에는 선 길이를 3000px 정도 줬습니다. 그럼 UHD 모니터도 문제 없었지요.

그런데 지금은 3000px보다 해상도가 좋은 모니터가 나오니 문제가 됩니다.

그렇다고 5000px, 10000px... 무한대로 갈 수도 없고.

이럴 때 calc 속성을 써보세요.

100%-5em

이렇게 하면 화면 폭 100% 길이에서 5em 만큼 빠진 길이로 항상 맞춰줍니다.

이미지 폭 맞출 때,

좀 안다는 분들은

width : ...

max-width : ...

이렇게 할 거예요.

여기서 조금 더 아는 분들은

width : min(...)

이렇게 합니다.

width + max-width, width + min-width 조합을

min, max 속성으로 처리할 수 있어요.

더 자세한 내용을 알고 싶다면

https://www.w3schools.com/css/css_math_functions.asp

 

CSS Math Functions

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

 

CSS value functions - CSS: Cascading Style Sheets | MDN

CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.

developer.mozilla.org

 

반응형