복잡한 코드를 정리해 주는 유용한 텍스트 편집 태그

전자책을 편집하다 보면 수많은 스타일을 사용하게 됩니다. 그런데 스타일을 span 태그로 적용을 하면 코드가 복잡해지고, 스타일 선택자를 기억하기도 어렵고, 코드도 길어지고.... 불편한 점이 많아요.

영문 표기를 예로 들어 볼까요?

EPUB(electronic publication)은 국제 디지털 출판 포럼(IDPF, International Digital Publishing Forum)에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정(reflowable)이 가능하게 끔 디자인 되었다.

책에서 흔히 보는 편집입니다. 이런 편집을 span 태그로 스타일을 적용하면 이렇게 되요.

<p>EPUB<span class="txt_small">(electronic publication)</span>은 국제 디지털 출판 포럼<span class="txt_small">(IDPF, <span class="txt_italic">italicInternational Digital Publishing Forum</span>)</span>에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정<span class="txt_small">(reflowable)</span>이 가능하게 끔 디자인 되었다.</p>

깔끔함을 떠나서 입력해야 하는 태그와 속성이 너무 많습니다. 당연히 입력 시간이 오래 걸릴 수 밖에 없어요. 그리고 태그와 스타일 속성 역시 파일 크기에 영향을 줍니다. 본문 텍스트 파일은 100kb밖에 안되는데 HTML로 편집하면 200kb가 될 수도 있어요. 파일 용량이 커지면 뷰어 로딩 시간이 길어집니다. 챕터 넘어갈 때 보이는 로딩 표시를 짧게 하려면 파일 용량을 줄이는게 가장 효과적이에요.

어떤 분들은 선택자 이름이 길다고 t1, t2 이렇게 선택자 이름을 짧게 만들어요. 이것도 방법은 되겠지만 추천하고 싶지는 않습니다. 개념 잡힌 편집자(프로그래밍 개발자도 마찬가지고)라면 선택자(개발에서는 변수) 이름은 누가 봐도 쉽게 이해할 수 있는 이름을 사용합니다. 

그럼 선택자 이름을 고치지 않고 위 코드를 어떻게 정리할 수 있을까요?

<p>EPUB_{(electronic publication)}은 국제 디지털 출판 포럼_{(IDPF, <i>International Digital Publishing Forum</i>)}에서 제정한 개방형 자유 전자서적 표준이다. EPUB은 자동공간조정_(reflowable)이 가능하게 끔 디자인 되었다.

이 코드는 어때요? 훨씬 깔끔해 졌지요?

span 태그를 쓸 때보다 파일 용량도 훨씬 줄일 수 있고, 보기에도 더 깔끔해 보입니다. 그런데 '누가 봐도 쉽게 이해할 수 있는 이름'인가요?

HTML을 조금만 안다면 <sub>와 <i>태그가 의미하는 바를 정확히 알 수 있을거예요. 

그런데 <sub>는 아래첨자낳아요. 그럼 EPUB_{(electronic publication)} 이렇게 보이지 않나요?

<sub>를 그대로 쓰면 아래첨자로 보이겠지요. 그래서 CSS로 <sub>태그의 기본 스타일을 수정해 줍니다.

 sub { font-size : 0.8em; vertical-align : baseline; }

이렇게 스타일을 수정하면 아래첨자가 아니라 본문 텍스트에 맞춰 작은 글씨로 보이게 되지요.

HTML에는 이렇게 활용할 수 있는 기본 태그가 많이 있습니다.

IDPF의 '공개 출판 구조(OPS) 2.0' '2.2.1 필수모듈'을 보면 xhtml에서 사용 가능한 태그 목록이 나와 있습니다(http://www.odpf.or.kr:8080/wp/?page_id=192#221) 이것만 써야 한다는건 아니고, 최소한 이 태그들을 뷰어가 표현해야 한다는 거예요.

이 태그들 중 텍스트 편집에 활용할 만한 것들을 몇가지 소개합니다. 여기 소개한 태그보다 훨씬 많지만 책 한권 편집하는데 이정도만 사용해도 span 태그를 거의 쓸 일이 없습니다. 본문 안에 다른 종류의 글자가 얼마나 많이 들어가는지 생각해 보세요. 본문, 외국어 표기, 인용구, 이미지 설명(캡션) 등등. 이런 요소가 20개씩 들어가는 책은 찾아보기 힘들잖아요. 아주 복잡한 책이 아니라면 10개 정도 스타일로 본문에 쓰인 텍스트를 대부분 표현할 수 있습니다. 

태그	기능 및 활용	스타일 예
<sub>	- 본래 기능은 아래첨자 - 스타일을 주면 외국어 병용 표기[영어English]나 괄호 설명[IDPF(국제 디지털 출판 포럼)] 처럼 본문 글자 아래쪽으로 정렬된 작은 글씨를 표현 가능	sub {  font-size : 0.8em;  vertical-align : baseline; }
<sup>	- 본래 기능은 윗첨자 - sub와 비슷하나 위로 정렬된 작은 글씨를 표현 가능 IDPF(국제 디지털 출판 포럼)	sup {  font-size : 0.8em;  vertical-align : 30%; }
<cite>	- 문장 내 짧은 인용구(HTML5에서는 작품의 제목)를 표현할 때 사용 - 기본 스타일은 이탤릭이나 CSS 수정 가능 예) 빈 센트 반 고흐 해바라기 예) IDPF(EPUB 전자책 표준을 제안했다)	cite {  font-style : normal;  font-size : 0.9em; }
<i>	- 기울임 - 기울임 스타일에 사용 - 기울임 글꼴에 다른 속성(색, 글자크기)을 지정해 사용할 수 있음 - 기울임 속성은 유지하기를 권함	i {  font-style : italic;  font-size : 1.2em;  color : blue; }
<em>	- 강조(기울임으로 표현) - 기본 스타일은 <i>처럼 기울임으로 표현되는데 '강조'를 위한 태그임 - 기울임 속성을 지우고 스타일을 지정해 '강조'가 필요한 글자에 사용 가능	em {   font-style : normal;   font-size : 1.1em;   color : red; }
<strong>, <b>	- 강조, 진한 글씨체 - 진한 글씨체로 강조를 해야할 때 사용(진한 글씨체(bold) 속성은 유지하기를 권함. 다른 속성 부여할 수 있음)	strong, b {   font-size : 0.8em;   font-family : '굴림'; }
<small>	- 본문 보다 작은 글씨체 - 작은 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음
<big>	- 본문 보다 큰 글씨체 - 큰 글씨체 속성은 그대로 유지하고 다른 스타일을 적용할 수 있음

이정도만 사용해도 웬만한 책은 편집할 수 있을거예요. 

본문보다 작은 글씨체로 외국어 동시 표기가 필요하고, 다른 스타일로 괄호 설명을 넣어야 한다면 <sub>와 <cite>를 쓰는 식으로요.

이렇게 기본 태그를 사용해도 다른 스타일이 필요하다면 그때 <span> 태그를 활용하면 되요. 

중요!!!

태그는 편집자가 CSS에서 어떤 스타일이든 적용할 수 있습니다. 예를 들어 이탤릭 태그인 <i>에 font-style : normal;을 적용하면 기울임이 사라져요. 

하지만 태그 고유의 속성은 그대로 살려두는게 좋습니다. <sub>를 아래첨자 대신 본문글씨 아래쪽에 배치된 작은 글씨체로 사용해도 되지만 본문 위쪽에 배치된 작은 글씨로 사용하는건 피해야 한다는 소리예요. 본문글씨 위쪽에 배치하려면 <sup> 태그가 있습니다. <sub> 태그에 스타일을 적용하면 윗첨자로 사용할 수 있다고 해서 윗첨자로 사용을 하면 '누가 봐도 쉽게 이해할 수 있는' 코드가 아니거든요.

<b> 태그는 진한 글씨체bold 태그인데 bold 속성을 둔 채로 기울임을 적용하는건 괜찮지만 bold 속성을 없애고 기울임 속성만 남기는건 피해야 되요. 기울임 태그<i>가 있는데 <b> 태그로 진한 글씨체 없이 기울임만 적용하면 오류가 나지는 않지만 다른 편집자가 수정할 때 당황할 수 있습니다.

오류가 나지 않는다는 보장도 없어요. 예를 들어 뷰어에서 EPUB 내부의 CSS를 무시하고 뷰어 스타일을 강제 적용 시킬 경우 태그의 원래 속성이 반영될 수 있어요. 뷰어에서 '사용자 설정'을 사용하면 전자책 자체의 스타일을 무시하기도 합니다. 그럼 이탤릭만 설정한 <b>태그가 진한 글씨로 보이게 되지요. 그래서 태그의 원래 기능은 그대로 살려두는게 좋아요.