[CSS 스타일 샘플] 큰 괄호 사이 글자

연 초부터 재미있는 스타일(?)로 편집된 책이 많이 들어오네요.

스타일을 어떻게 잡을까 고민하는 재미는 있지만, 제작 시간(ㅜ.ㅜ)이 늘어나 납기 맞추느라 애먹고 있습니다.

책 한권을 2~3일에 끝내야 하는데 스타일 고민하며 장난(?)하다 보면 한두시간이 금방 지나가네요.

 

PDF에서 캡쳐한 이미지입니다.

이렇게 제목 좌우를 커다란 중괄호로 감싼 스타일이에요.

이미지로 넣으면 간단하겠지만, 이미지 보다는 텍스트가 깔끔하기 때문에 어떻게 넣을가 고민해 봤습니다.

고민 결과는 이렇습니다.

 

HTML 코드는 간단해요.

 

<h3 class="title_prologue"><span class="title_prologue_body">프롤로그</span></h3>

참 쉽지요^^?

이렇게 쉬운데 방법을 생각하는데까지 시간이 오래 걸리네요.

 

비슷한 스타일이 또 있습니다.

목차 페이지에서는 장 제목을 이렇게 감쌌어요.

PDF 캡쳐 이미지입니다.

이 스타일 역시 HTML 코드는 간단합니다.

 

<p class="TOC_chap_title_orange"><span class="TOC_chap_title">1장_ <br/>여기 여자들도 일하고 있습니다</span></p>

 

 

이런 스타일을 만들 때 신경써야 할 부분은 상하 중앙 정렬이에요.

중앙 정렬은 한번 설명한 적이 있으니 궁금하신 분은 참고하세요.

 

https://www.epubguide.net/290

 

HTML 코드가 단순하다는 것은 CSS가 복잡하다는 뜻입니다.

보기엔 간단해 보이지만 CSS는 좀 복잡해요.

어려운 CSS 속성이 들어가지는 않았습니다.

제가 한번 이상 설명한 속성들 뿐이지요.

그런 속성을 어떻게 조합하느냐에 따라 다양한 효과를 낼 수있어요.

 

전자책 책공장 회원님들은 이런 스타일을 어떻게 표현하시겠어요?