내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.
종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.
한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다. 자세한 내용은 여기로: https://www.epubguide.net/notice/309오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.
제목 스타일을 만들다 보면 첫번째 제목은 margin-top이 필요 없는데, 본문 내에 두번째 제목 부터 margin-top이 필요할 때가 있습니다.
귀찮아서 모두 margin-top을 주면 첫째 제목 여백이 벌어져 이상하고, 첫번째 제목만 다른 스타일로 잡기는 귀찮고...
이럴 때 쓸 수 있는 클래스가 :nth-child(*) 예요.
클래스 중 :가 붙는건 의사(pseudo) 클래스라고 합니다.
CSS에서 pseudo 클래스/엘리먼트(:: 2개 붙음)는 클래스/엘리먼트는 아니지만 클래스/엘리먼트에 특수한 스타일을 부여할 때 사용합니다.
:nth-child(*)는 클래스의 순서 대로 스타일을 부여할 때 사용합니다.
영어 서수로 3th, 5th 할 때의 nth지요.
제목을 h2 태그로 지정하고
h2 {
margin-top : 5em;
margin-bottom : 2em;
}
이렇게 스타일을 줬는데, 각 장 첫번째 제목만 margin-top을 빼고싶다.
h2:nth-child(1) {
margin-top : 0;
}
이 스타일을 추가합니다.
그럼 처음 나온 h2는 margin-top : 0이 적용되고, 두번째 부터는 margin-top: 5em;이 적용됩니다.
이 클래스는 다양하게 활용할 수 있어요.
순서대로 똑같은 스타일이 적용되어 있는데, 그 중 특정 순서 하나만 스타일을 바꿔야 할 때 사용하면 좋습니다.
'EPUB 편집 가이드 > EPUB을 위한 CSS' 카테고리의 다른 글
CSS math function - calc, max, min (0) | 2023.12.29 |
---|---|
투명한 배경색을 넣고 싶을 때 (0) | 2023.10.26 |
[CSS 스타일 샘플] 다양한 테두리(글상자) 샘플 (0) | 2023.01.19 |
글자 위에 점 찍기... 이런 훌륭한 속성을 모르고 있었다니 ㅜ.ㅜ (0) | 2022.11.15 |
인라인(inline), 내부(internal), 외부(external) CSS 사용하기 (1) | 2022.10.27 |