[CSS 스타일 샘플] 유용한 몇가지 Tip
전자책 편집 할 때 많이 사용하는 유용한 팁 몇개 정리해 봅니다.
먼저, 형광펜 스타일 밑줄입니다.
span 태그로 묶고 배경색 넣으면 형광펜 스타일을 간단히 만들 수 있지만,
글자 중간에만, 아니면 아래나 위쪽에 형광펜을 칠하고 싶다면?
장 제목에서 처럼 글자 아래에만 형광펜을 칠하고 싶을 때 linear-gradient를 사용할 수 있습니다.
background-image로 배경을 넣을 때 linear-gradient를 쓰는 것이지요.
모든 장 제목에 똑같은 불릿이 붙는다면 어떻게 하시겠어요?
많은 분들이 이미지를 직접 넣을거예요.
제목이 10개든, 100개든....
제목이 100개고 100개에 모두 똑같은 불릿이 붙는다면 작업이 불편하겠지요?
EPUB에서 이렇게 보이지만, 여기엔 이미지가 하나도 들어가지 않았습니다.
<h3><span class="title_chapNo">1장</span> 지금 ETF에 주목해야 하는 이유</h3>
코드가 이렇게 깔끔해요. 불릿이 붙었지만 이미지는 없습니다.
있지만 없는, 이런 편집은 psudo 클래스를 사용합니다.
before, after psudo 클래스를 사용하면, 코드를 깔끔하게 정리하면서 원하는 불릿을 넣을 수 있습니다.
끝으로, 상자 위에 상자 걸치는 방법이에요.
[정리하기] 제목 상자는 보라색 상자 위에 살짝 걸쳐 있습니다.
EPUB에서는 이렇게 만들었어요.
같은 방법으로 화살표도 올릴 수 있는데, 안에 넣어도 깔끔하게 표현이 되서 그대로 뒀습니다.
이렇게 하려면 margin을 이용하면 됩니다. margin은 마이너스(-) 값을 가질 수 있어 이런 스타일을 표현할 수 있습니다.
