[Sigil] 전자책 편집에서 글꼴 더 들어가기

전자책 편집에서 글꼴 더 들어가기

전자책 편집기인 Sigil에서 글꼴 사용에 대한 내용을 더 들어가겠습니다. 전 시간에 소개한 '한국출판인회'의 'KoPubWorld 서체' 적용했던 내용에서 한 걸음 더 들어가 보겠습니다.

시스템 글꼴이 적용된 위의 경우와 달리 스타일시트가 적용된 KoPubWorld 서체가 적용된 아래 문서는 차이가 있습니다. 여기서 클래스를 적용합니다.

여기까지 전 포스팅에서 학습했습니다. 이번 포스트에서는 특정 부분을 강조하는 방법부터 학습하겠습니다.

Sigil에서 세세한 편집은 '클래스 선택자'를 이용하여 접근할 수 있습니다. 클래스 선택자는 맨 앞에 '.(마침표)' 기호를 사용합니다.

잘 보이지 않는군요. 아래에 본래 이미지를 첨부할게요. '.emphasis'가 클래스 선택자입니다. 이 선택자를 본문에 적용한 것입니다.

<body>
<h1> h1 제목입니다.</h1>
<h2> h2 제목입니다.</h2>
<h3> h3 제목입니다.</h3>
<h4> h4 제목입니다.</h4>

<p> <span class="emphasis">본문</span>입니다.</p>
</body>

"emphasis"는 임의로 부여한 클래스 이름입니다. 되도록이면 그 클래스가 하는 역할과 관련지어 이름을 지었을 뿐입니다. 이름을 다른 것으로 바꿔도 적용 결과는 같습니다.

문단을 구분하는 p 태그의 기본값은 normal입니다. 'bold'로 설정하면 굵게 표현됩니다. 본문에서 강조할 내용을 span 태그를 사용하여 변경합니다. span이란 '범위'를 의미하는 것으로 특정 범위를 지정하여 특별한 효과를 지정할 때 사용합니다.

소월의 시에서 '나 보기가 역겨워'만 강조한다면 그 부분만 span 태그로 묶어 emphasis 클래스로 강조할 수 있습니다. 이런 세세한 편집을 통해 질 높은 전자책 출판이 가능해집니다.

스타일시트(CSS)에는 다양한 글꼴 관련 속성들이 있습니다. 속성 이름과 역할과 기본값 등을 표로 정리하겠습니다.

속성 이름	역할	기본값	지정값
font-style	글꼴의 기울기	normal	normal, italic, oblique(기울어진 글자)
font-weight	글꼴 두께	normal	normal, bold, bolder(부모 요소보다 두껍게), lighter(얇게)
font-size	글꼴 크기	medium	em(비례 단위), px(픽셀)
line-height	한 줄의 높이	normal	em(비례 단위), px(픽셀) 또는 %
font-family	글꼴 이름(서체)

Sigil에서 폰트를 불러들여 사용할 때는 그 소스 경로를 밝혀야 바르게 적용됩니다. 'src url('../Fonts/폰트이름')' 과 같이 경로를 기록할 때 대소문자 구별을 하고 띄어쓰기도 정확해야 합니다.

본문에서 사용될 기본 글꼴을 body 태그 요소 안에 'font-family'로 설정합니다. 제목으로 쓰이는 h1, h2, h3, h4는 한꺼번에 'font-family'를 적용할 수 있습니다.

글꼴에 관한 내용을 정리하고 한 걸음 더 들어갔습니다. 클래스 선택자를 통해 부분 적용하는 방법을 emphasis 클래스 선택자로 실습을 했습니다.

스타일시트에 관한 내용은 많습니다. 여기서는 필요한 내용만을 추려서 올렸습니다.

[Sigil] 전자 편집에서 줄 간격과 배경색 설정하기 (6)	2023.03.29
[Sigil] 전자책 편집에서 문장 정렬은 어떻게 하는가요? (14)	2023.03.28
[Sigil] 전자책 편집에 한국출판인회의 글꼴 설정하기 (21)	2023.03.26
[Sigil] 전자책 편집에서 글꼴 설정은 어떻게 하나요? (4)	2023.03.25
[HTML] 코딩으로 웹브라우저에 Hello world! 출력하기 (6)	2023.03.23