[TIP]반복작업 줄여주는 두가지 Tip

#‎전자책‬ ‪#‎CSS‬ ‪#‎sigil‬

‪#‎전자책_편집을_위한_HTML_CSS‬ 해시태그로 간단한 HTML CSS 강의를 시작합니다. 전자책 편집을 하는 분들에게 자주 받은 질문을 정리하려고 해요. 아주 쉬운 내용인데 모르면 헤매는 내용이라 초보 편집자들에게 유용하리라 생각합니다. 

전자책 편집을 하다 막히는게 있거나 궁금한 점이 있으면 댓글을 남겨주세요. 단, 질문은 '제대로' 해주셔야해요. 본인만 이해할 수 있는 질문 말고, 답변할 사람이 이해할 수 있는 질문으로요^^

편집기는 Sigil을 사용합니다. 하지만 모든 편집기에서 동일하게 적용할 수 있습니다.

책을 만들다 보면 일정한 패턴이 있는 편집을 자주 접합니다. 출판사나 편집자의 취향에 따라 조금씩 다를 수 있지만 시중에 나와있는 책 3권 중 한권씩은 편집에 패턴이 들어갑니다. 그 중 가장 자주 접하게 되는 패턴이 있어요. 장이나 절의 첫 문단 강조하기.

* 각 장의 첫 문단에 회색 점이 세로로 3개 찍힌 패턴

(무엇이 평범한 그들을 최고로 만들었을까/토네이도 중에서)

--------------

* 각 절의 첫 문단은 들여쓰기를 하지 않고 둘째 문단부터 들여쓰기가 되어있는 패턴

(무엇이 평범한 그들을 최고로 만들었을까/토네이도 중에서)

패턴의 형태는 다양합니다. 첫 글자를 키울 수도 있고, 5글자 이상 들여쓰기를 할 수도 있습니다. 특별한 기호를 넣을 수도 있지요. 목차가 10개의 장으로 끝난다면 직접 스타일을 넣어 주면 됩니다. 그런데 10개 장에 각각 10개의 절이 있다면? 똑같은 스타일을 100번 넣어줘야하지요.

이런 스타일의 코드를 머릿속으로 생각해보세요. 많은 분들이 이런 코드를 상상하셨을거예요.

<h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3>

<p><br/></p>

<p><br/></p>

<p><br/></p>

<p class="img_float_left"><img src="../Images/bullet.jpg></p>

<p class="text_indent_5em">흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p>

<p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>

이 책은 7개의 장으로 이루어져 있습니다. 각 장마다 3개~4개의 절이 있고요. 

7개의 장 * 4개의 절 = 28개의 절제목과 본문 사이에 코드를 복사/붙여넣기 해야합니다. 28개정도면 할만 하다고요? 그럼 다음은 어떨까요?

이런 코드가 떠오르겠지요?

 <h4>| 자동조종 모드가 중요하게 다루는 것</h4>

<p><br/></p>

<p class="no_indent">뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p>

<p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>

문단 시작 부분에 클래스 하나 넣는 것 정도야...

그런데 이 책은 7개 장으로 구성되어 있고, 각 장마다 3개~4개의 절이 있습니다. 그리고 각 절마다 예로 든 것 같은 소단락이 5개 안팎으로 있습니다. 

7개 장 * 4개 절 * 5개 소단락 = 140개의 소단락입니다. class="no_indent"를 140번 복사/붙여넣기 해야합니다. 그것도 위치를 하나씩 찾아가면서요.

이런 반복작업을 아주 간단히 처리해 줄 수 있는 CSS 속성이 있습니다.

설명을 하기 전에 제가 짠 코드를 보여드릴게요.

구분	실제 편집 코드	비교를 위한 예제 코드
절	<h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3> <p>흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p> <p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비를 ‘의도 설정’이라고 부른다. 마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>	<h3>왜 매일 같은 것만 보이고<br/>같은 일만 반복될까</h3> <p><br/></p> <p><br/></p> <p><br/></p> <p class="img_float_left"><img src="../Images/bullet.jpg></p> <p class="text_indent_5em">흔히 바쁜 하루를 보낼 때 사람들은 마치 기계처럼 일이 끝나자마자 곧바로 다음 일에 착수한다. ...혹은 ‘그게 인생이지, 뭐’라는 식으로 자신을 위로하기도 한다.</p> <p>그러나 나는 운에 의지하지 않고 의지만으로 충분히 좋은 결과를 낼 수 있다고 말하고 싶다. ...마음의 준비는 곧 하루에 대한 접근 방식을 의도적으로 설정하는 과정이기 때문이다.</p>
소단락	<h4>| 자동조종 모드가 중요하게 다루는 것</h4> <p>뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p> <p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>	<h4>| 자동조종 모드가 중요하게 다루는 것</h4> <p><br/></p> <p class="no_indent">뇌의 자동 체계는 중요한 정보와 걸러낼 정보를 구별하기 위해 몇 가지 규칙을 따른다....그 일과 직접적으로 연관된 일은 자연히 인식하게 되지만 그렇지 않은 일은 전혀 인식하지 못한다는 사실이다.</p> <p>최근의 연구 결과를 예로 들어보겠다. ...고릴라를 정면으로 쳐다보면서도 눈치채지 못했다는 사실이다.</p>

실제 편집 코드는 제가 전자책을 만들면서 사용한 것이고, 예제 코드는 유통사에 등록된 많은 전자책에 사용된 유형입니다. 제가 사용한 코드가 훨씬 간결해 보이지요?

그런데 자세히 살펴보면, 제 코드에는 어떤 스타일도 들어있지 않습니다. 코드만 보면 제목과 본문 줄간격도 벌어져 있지 않고, 세로 점 3개도 넣은 흔적이 없습니다. 들여쓰기도 되어있지 않고요. 소단락을 보면 첫번째 단락과 두번째 단락이 동일합니다. 첫번째 단락에 들여쓰기가 없어야 하는데 들여쓰기를 없애주는 클래스가 보이지 않습니다. 

이거 사기 아냐? 하는 분들을 외해 Sigil 화면을 코드와 함께 올려드려요 ^^

아래 코드를 보시면 위와 동일한데 미리보기 화면에는 들여쓰기, 회색점이 모두 찍혀있답니다. 

* 미리보기를 보면 들여쓰기, 회색 점이 모두 찍혀있음

* 소단락 제목 바로 아래 문단은 들여쓰기가 없지만 두번째  문단은 들여쓰기 되어 있음

1. 클래스를 추가하지 않고 스타일을 적용하는 방법

먼저 들여쓰기의 비밀부터 알려드릴게요.

h4 {

   font-family: "기본글꼴";

   font-weight: bold;

   font-size: 1.2em;

   margin-bottom: 1em;

   margin-top: 1em;

}

h4+p {

   text-indent: 0;

}

이게 실제 스타일 코드입니다.

CSS에는 가족관계가 있습니다. 가족관계에 대해 궁금하신 분은 왼족 검색창에 [CSS의 상속]으로 검색을~~

h4+p { ... }

이건 h4 태그와 p 태그의 인접형제를 의미합니다. h4의 인접형제, 다시 말해 h4 태그 바로 다음에 나오는 p 태그에 text-indent : 0; 속성을 부여하라는 의미입니다. 다른 p 태그에는 전혀 영향을 주지 않고 h4 태그 다음에 나오는 p 태그에만 영향을 줍니다. 그래서 h4 다음에 나오는 p 태그는 클래스를 추가하지 않아도 들여쓰기 0의 속성을 줄 수 있습니다.

2. 첫번째 문단에 이미지를 추가하는 방법

눈치 빠른 분이라면 '아!'하고 머리 위에 전구가 깜빡이겠네요. 절(h3)에 적용한 것 역시 소단락(h4) 처럼 인접형제를 이용해 스타일을 적용했습니다. 

h3 {

    text-align: right;

    line-height: 1.8em;

    font-size: 1.4em;

    font-family: "기본글꼴";

    margin-bottom : 3em;

    font-weight: bold;

}

h3+p {

    text-indent : 0em;

}

h3+p:before {

    content : url("../Images/bullet_dot.jpg");

    margin-right : 4em;

}

h3+p는 설명이 필요 없을 것 같고, 이미지를 어떻게 추가했는지 설명드릴게요.

CSS에는 :before와 :after라는 선택자가 있습니다. 이 두 선택자는 혼자 사용할 수 없고 다른 선택자에 붙어 보조역할을 합니다. :before는 글자나 문단 앞에, :after는 뒤에 특정 콘텐츠를 추가해 줍니다. 

여기서는 

1. h3 바로 다음에 나오는 p 태그의 앞에 (h3+p:before)

2, bullet_dot.jpg 파일을 삽입하고 (content : url("../Images/bullet_dot.jpg");

3. 4글자 만큼 간격을 띄운 후 본문을 표시 (margin-right : 4em;)

하라고 스타일을 지정했습니다. 

이렇게 지정을 하면 h3 태그 바로 다음에 오는 p 태그에는 클래스를 붙이지 않아도 bullet_dot.jpg라는 이미지가 붙고 이미지에서 4em 만큼 떨어져서 본문이 시작됩니다.

+기호와 :before 속성 2개를 이용해 160번 넘게 복사/붙여넣기 해야 하는 작업을 줄일 수 있었습니다. 가족관계( >, +, *, ~ 등)와 :before, :after는 익혀두면 아주 유용하게 활용할 수 있습니다. 저도 전자책 편집할 때 많이 사용하고요. 예전에는 지원을 안하는 뷰어가 있었지만 최근에는 대부분 지원합니다.