[CSS 스타일 샘플] 간단하지만 디테일을 살리는 편집

제목을 작업하다 보면 이렇게 양쪽에 불릿이 들어갈 때가 있습니다.

종이책은 전부 1줄로 편집되어 있어 이렇게 편집하면 문제 없어 보이지요.

그런데 전자책에서는 이정도로 끝내면 문제가 생길 수 있습니다.

​

 

​

이렇게 화면이 좁아지면 어떤가요?

종이책이야, 자간, 장평 조절해서 한줄로 넣으면 되지만 전자책은 화면 폭, 글자 크기가 바뀔 수 있어 2줄이 될 수도, 3줄이 될 수도 있습니다.

이렇게 둬도 나쁘지는 않아요.

하지만 종이책을 편집한다고 생각해 보세요. 이렇게 편집하시겠어요?

​

​

약간의 추가 스타일을 넣어 이렇게 편집을 했습니다.

불릿을 양쪽 옆에 놓고 글자만 행갈이가 되도록 했지요.

​

이렇게 편집하려면 태그가 조금 복잡해져요.

table로 넣어도 되지만, 제목은 heading을 쓰는게 좋아요. 그래서 헤딩 태그를 사용했습니다.

 

<h4 class="title_section"><span class="title_L">❍</span> <span class="title_sBody">부딪쳐보지 않으면 결코 알 수 없다</span> <span class="title_R">❍</span></h4>

그리고 flex 속성을 줬어요.

flex는 전자책 편집 할 때 아주 많이 사용합니다.

공부를 해 두면 스타일 편집 레벨을 한 단계 업 할 수 있어요.

​

이것 말고도 몇가지가 더 있습니다.

왼쪽이 종이책, 오른쪽이 전자책입니다. 종이책에서는 한줄이기 때문에 본문 스타일을 사용합니다.

하지만 전자책에서는 행갈이가 될 수 있어 내어쓰기를 했지요.

 

​

이것도 위와 비슷한 예입니다.

책의 모든 소제목은 한줄로 되어 있어 내어쓰기가 없지만

전자책은 내어쓰기를 적용했습니다.

 

아주 사소하고 CSS 속성 2개만 더 추가하면 끝날 정도로 쉬운 스타일이지만

종이책에 없어도 전자책에 이런 편집을 해 주면 조금 더 정성을 들였다는 느낌을 줄 수 있지요.

​

물론, 내어쓰기를 적용할 것인지 여부는 책에 따라 다릅니다. 어떤 책은 내어쓰기 대신 들여쓰기를 없애기만 하고, 어떤 책은 본문과 똑같이 들여쓰기를 할 수도 있어요.

​

책의 내용에 맞게 가독성을 높일 수 있는 편집이 가장 중요하지요.