[실전문제]:before :after로 제목 편집 간단히 끝내기

이전 글 [반복작업 줄여주는 두가지 Tip(http://epubguide.net/187)]에서 가족관계와 :before, :after에 대해 설명을 드렸습니다. 이 태그를 이용하면 제목 태그(h1 ~ h6)만 써도 제목에 반복되는 다양한 패턴을 추가할 수 있다고 설명드렸습니다. 오늘은 이 두 태그가 실제로 어떻게 쓰이는지 보여드리려고 합니다.

종이책을 EPUB으로 변환하는데 이런 스타일이 나오네요.

1. 반복되는 절 제목

토네이도 출판사의 '내 인생 10년 후'라는 책으로 5개 장, 34개 절로 구성돼 있습니다. 아래 이미지가 34개 절 중 하나입니다. 

<종이책의 절 제목>

여기엔 두가지 편집이 필요합니다.

 

1. 절 제목 위, 아래에 1픽셀짜리 세로줄

2. 제목 아래 첫번째 단락에 들여쓰기(두번째 단락부터는 들여쓰기가 1자입니다)

많은 분들이 이런 코드를 사용할거예요.

[Images]

h_lime_50.png /*50픽셀짜리 세로줄*/

h_line_100.png /*100픽셀짜리 세로줄*/

[STYLE] /*글꼴 등 다른 스타일은 생략합니다*/

.h_line_center {

text-align : center;

...

}

h3 {

text-align : center;

margin-bottom : 2em;

...

}

.indent_3em {

text-indent : 3em;

}

[HTML]

<div class="h_line_center">

<img src="../Images/h_line_50.png" /> 

</div>

<h3>일자리가 사라지다</h3>

<div class="h_line_center"> 

<img src="../Images/h_line_100.png" />

</div>

<p class="indent_3em">인간의 일자리가....</p>

조금 더 센스있는 분이라면 가로*세로 1픽셀짜리 이미지를 넣고 이미지의 height를 50, 100픽셀로 조절하시겠지요. 

그런데 34개의 절을 모두 저렇게 복잡한 태그를 사용해 표현해야할까요? 조금씩 코드는 다르겠지만, 제목 윗쪽과 아랫쪽에 이미지를 2개 넣다보면 코드가 복잡해집니다. 이걸 34번 반복하는 것도 번거로운 일이에요. 찾아바꾸기를 써서 반복작업을 줄일 수도 있겠지만...

이 코드를 :before와 :after 코드를 사용해 깔끔하게 정리해 볼게요.

[Images]

h_lime_50.png /*50픽셀짜리 세로줄*/

h_line_100.png /*100픽셀짜리 세로줄*/

[STYLE]

h3 {

text-align : center;

margin-bottom : 2em;

}

h3:before {

content : url("../Images/h_line_50.png");

display : block;

}

h3:after {

content : url("../Images/h_line_100.png");

display : block;

}

h3 + p {

text-indent : 3em;

}

[HTML]

<h3>일자리가 사라지다</h3>

<p>인간의 일자리가....</p>

스타일은 복잡해졌습니다. 그런데 스타일은 딱 한번만 들어가니 아무리 복잡해도 편집 시간이 크게 늘어나지는 않습니다. 대신 HTML 태그를 비교해 보세요. 34번 반복해야 하는 HTML 태그가 깔끔하게 정리됐습니다. 

일반적인 코드	:before, :after를 사용한 코드
<div class="h_line_center"> <img src="../Images/h_line_50.png" />  </div> <h3>일자리가 사라지다</h3> <div class="h_line_center">  <img src="../Images/h_line_100.png" /> </div> <p class="indent_3em">인간의 일자리가....</p>	<h3>일자리가 사라지다</h3> <p>인간의 일자리가....</p>

왼쪽 코드를 34번 넣는 것 보다 오른쪽 코드가 훨씬 편하겠지요?

두번째 코드의 미리보기 화면입니다.

2. 반복되는 소단락 제목

이 편집을 처음 보고 어떤 편집이 좋을지 고민을 했어요. 왼쪽 줄에 이미지를 넣어야 하나? 첫번째 단락에 :before를 써서 줄을 넣을까? 여러가지 방법이 있을거예요. 다른 분들은 이런 스타일을 어떻게 편집할지 궁금하네요. 제목 왼쪽에 붙은 줄은 표현이 쉽지만 본문 첫째줄까지 들어가야하니 조금 까다롭습니다.

이 책의 소단락은 각 절별로 5개 안팎으로 있습니다. 35개 절 * 5개 소단락이니 150번 이상 반복이 됩니다. HTML 코드가 복잡하면 편집 시간이 크게 늘어날 수 밖에 없어요. 그래서 편집 역시 HTML 코드를 간단히 처리할 수 있도록 CSS를 짰습니다. 

CSS는 한번, HTML 코드는 150번 이상 반복해야되니 HTML과 CSS 중 하나를 간결하게 표현하라면 HTML을 선택하는게 좋아요. 물론 무조건 HTML을 선택해야 한다는건 아닙니다. CSS가 너무 복잡해지면 뷰어에서 편집이 깨질 수 있거든요. 

[STYLE]

h4 { /*글꼴 등 기본 스타일은 생략*/

border-left : 1px solid #000000;

height : 6em;

margin : 2em 0 -1.5em 1em;

padding-left : 0.5em;

line-height : 1.8em;

...

}

h4 + p {

text-indent : 1.5em;

}

[HTML]

<h4>‘일터의 점령자’<br/>인공지능</h4>

<p>내가 신문기자로 입사한 건 1988년이다...</p>

이 코드에서 관심있게 봐야할 부분은 제목(h4) 태그의 margin입니다. 

margin : 2em 0 -1.5em 1em;

margin 태그는 [margin : 윗쪽 오른쪽 아랫쪽 왼쪽] 순서로 여백을 넣습니다. 

위 스타일을 잘 살펴보면 아랫쪽 스타일이 -1.5em 입니다. 음수가 들어갔어요. 이렇게 음수를 넣으면 윗쪽과 아랫쪽 단락이 겹치게 됩니다.

윗쪽과 아랫쪽 단락 테두리를 그리면 위 이미지처럼 서로 겹치는걸 볼 수 있어요. 그럼 여기서 테두리를 없애고, 윗쪽 단락 왼쪽에만 테두리를 그리면 어떻게 될까요? 위 이미지의 왼쪽 빨간색 점선만 남고 다른 선들은 모두 지워지겠지요? 이 방법을 이용해서 본문 첫번째 단락 앞까지 줄을 그을 수 있습니다.

34개의 절, 150개의 소단락 제목 스타일을 간단한 HTML 코드로 편집할 수 있는 실전 Tip이었습니다 ^^