EPUB 전자책 코딩을 위한 HTML : 특정 문단 및 영역만 글자 크게 만들기

 

안녕하세요 탐구소년입니다. 최근엔 일이 바빠 마치 블로그가 없는 사람처럼 지내는 시간이 이어졌었는데, 이제 좀 여유가 생겨 블로그 글 게재를 다시 시작하려 합니다. 이번 글에서는 전자책 코딩을 할 때 특정 영역만 글자 크기가 커보이게 만드는 방법을 알려드리려고 합니다. 간만에 쓰는 글이다 보니 가볍게 몸풀기 수준의 내용으로 준비했습니다.

 

일단 본문을 표시하는 HTML 코드가 아래와 같다고 가정하고 시작하겠습니다. 

 

간단한 코드이므로 설명은 생략합니다(위 코드가 어려우신 경우, 블로그의 다른 글을 참고하시면 좋을 것 같습니다^^).

 

코드를 전자책 뷰어로 본 결과는 위와 같습니다. 배경색은 눈에 띄게 하기 위해 일부러 조금 푸르게 만든 것이니 신경쓰지 않으셔도 됩니다(원래는 하얀색입니다). 여기에서 두번째 줄의 크기만 커 보이도록 코드를 수정해보겠습니다. 

 

<p> 태그는 문단 하나를 나타내고자 할 때 사용하는 HTML 마크업(태그)입니다. 그 안에 들어있는 내용들이 하나의 문단이 되는 것입니다. 따라서 두번째 <p>~</p> 영역이 두번째 문단이 되는 것인데, 이를 따로 더 커 보이게 만들기 위해서 태그가 시작하는 부분에 이런 코드를 추가해주었습니다. 

<p style="font-size:1.5em;">

이는 특정 <p> 태그에 따로 스타일을 적용해주는 방법입니다. 여기서는 font-size를 1.5em 이라고 지정했습니다. 여기서 em이 의미하는 것은 다른 <p>태그들에 적용된 사이즈를 의미합니다. 쉽게 말해, 모든 텍스트 관련 태그에 적용되어 있는 글자 크기가 1em 이라는 의미입니다. 따라서 1.5em 을 특정 태그에 따로 적용하게 되면, 다른 태그들에 비해서 1.5배 큰 글자가 되는 것입니다. 결과물을 보겠습니다.

 

글자가 정말 딱(?) 1.5배 커진 것이 확인됐습니다.

 

이런 방식을 사용하면, 강조하고자 하는 문단만 따로 커 보이게 만들어 독자의 눈에 좀 더 확 들어오게 만들 수가 있겠습니다. 예제에서는 1.5em 으로 1.5배 확대하긴 했지만, 이건 좀 많이 큰 것 같네요...^^ 사이즈는 취향에 맞게 조절하시길 바라겠습니다.