단위 em의 의미, 그리고 이미지로 글자 넣을때 편리한 팁

전자책 편집을 하다보면 em, px, %, pt, cm 등 다양한 단위가 나옵니다. 그 중에 가장 많이 나오는 단위가 em과 px에요.


px는 큰 이슈가 없습니다. 절대적인 크기이기 때문에 변하지 않습니다. 뷰어에 따라 글자크기나 일부 설정이 변경될 수 있고, 해상도에 따라 같은 화면크기(예를 들면 5")에서 1px의 크기가 다를 수는 있지만, 어째든 1px이라는건 변함 없지요.


그런데 em은 가변적인 크기입니다. 그기가 마음대로 변해요. 이런 가변크기는 %도 있어요. 글자 크기를 얘기할 때 100%를 1em이라고 설명하곤 합니다. 


font-size : 100%; = font-size : 1em;


강의를 듣는 분들이 대부분 초보라 %와 em의 차이를 설명하면 더 혼란을 느끼실 것 같아 이렇게 얘기하는데 엄밀히 두 단위는 차이가 있습니다. 


1em은 '시스템 기본 글자 크기'라고 설명할 때도 있습니다. 하지만 이것도 정확한 1em의 의미는 아니에요.


아래 예를 볼까요?


.test_1em {

font-size : 1em;

}


.test_2em {

font-size : 2em;

}


.font_change {

font-size : 1em;

}


<div class="font_change">

<p class="test_1em">em의 의미</p>


<p class="test_2em">em의 의미</p>

</div>


두 문단의 글자 크기는 어떻게 보일까요?

test_1em의 글자 크기는 1em입니다.

test_2em의 글자 크기는 2em이고요.

그런데 div의 font_change의 글자 크기는 1em이에요.


1em이 시스템의 기본 글자 크기라면 두 문단의 글자 크기가 같아야되요.

그런데 text_2em의 글자 크기는 2em으로 나옵니다. 아래 이미지 1번이 test_1em, 2번이 test_2em이에요.


1em의 정확한 의미는 '현재의 글자 크기'예요. 


이러면 또 설명이 어려워집니다.


test_1em 속성(font-size : 1em;)이 지정된 문단에서 1em은 위 이미지 1번 크기예요. test_2em(font-size 2em;)이 지정된 문단에서 1em은 2번 크기예요.


한번에 이해를 하신 분도 계시겠지만 좀 헷갈릴 수 있어요. test_2em은 분명 2em으로 글자 크기가 지정돼 있는데 1em이 2em 크기라는 얘기잖아요.


다시 예를 들어볼게요.(font_?em이 font-size : ?em이라 생각해 주시고...)


이런 글자 크기의 문장을 만들고 싶어요.


<p>이런 <span class="font_2em">글자 크기</span>의 문장을 만들고 싶어요</p>


이건 이해가 쉽게 되지요? 기본 글자보다 큰 글씨니까 2em을 주면 되잖아요. 


이런 글자 크기의 문장을 만들고 싶어요.


<p class="font_2em">이런 <span class="font_?em">글자 크기</span>의 문장을 만들고 싶어요">


이건 어떤가요? font_?em 속성의 글자 크기는 몇 em일까요?(글자 크기가 1/2라고 가정하고)


1em이라고 생각한 분은 틀렸습니다.

0.5em이라고 생각한 분이 맞아요.


본문 글자 크기가 2em인데, 글자 크기를 1/2로 줄이려면 1em이어야 하지 않나요? 그런데 1/4인 0.5em이 되야한다니요?


1em의 글자 크기는 '현재 글자 크기'입니다. 그러니 <p class="font_2em">으로 감싸인 부분의 글자 크기가 '현재의 글자 크기'가 됩니다. 따라서 <span class="1em">은 <p class="font_2em">과 같은 크기인거예요.


설명이 무지 복잡하고 난해하지요? ㅜ.ㅜ 

설명 능력이 부족해 이보다 쉽게는 설명을 못하겠네요. 직접 스타일을 만들어 테스트해 보면 쉽게 이해하실거예요.


em은 %와 다릅니다.


em은 글자 크기를 기준으로 해요.

%는 단위가 적용된 개체를 기준으로 하고요.


따라서 글자 크기 1em은 100%와 같습니다. 1em은 글자크기이고, 글자에 적용된 100%는 글자 크기를 기준으로 하기 때문이에요.


그런데 이미지에 적용되면 둘은 큰 차이를 보입니다. 





이 이미지는 가로 46px, 세로 28픽셀 이미지예요. 이 이미지에 em과 %를 지정해 볼게요.


.img_h_1em {

height : 1em;

}

.img_h_100p {

height : 100%;

}


<p><img class="img_h_1em" alt="img" src="../Images/img.png"/>의 의미(이미지 height 1em)</p>

<p><img class="img_h_100p" alt="img" src="../Images/img.png"/>의 의미(이미지 height 100%)</p>


결과



이미지 height : 100%;와 이미지 height : 1em;일때 두 이미지의 결과를 보세요.


이걸 보고 '아!' 하고 무릎을 탁 치는 분이 계셨으면 좋겠어요.


느낌이 팍! 하고 오지 않나요?

저는 이걸 깨닫고 그동안 만들었던 많은 책을 떠올리며 '전부 수정했으면 좋겠다'는 생각을 했거든요.


무슨 얘기냐고요?


폰트에 없는 특수 한자, 특수 문자, 이미지로 된 글머리 기호...


예를 들어 훈민정음 언해본을 EPUB으로 만든다고 생각해 보세요.

언해본을 위해 폰트를 넣을 수 없는 상황이고.

텍스트로 넣으면 이렇게 보입니다.



나눔 옛한글 글꼴이 배포되기 전에는 훈민정음 언해본을 제대로 표현할 수 있는 폰트가 많지 않았어요. 그리고 유료였지요. 전자책 만들려고 비싼 유료 폰트를 사기 힘든 영세 출판사에서는 글자를 이미지로 만들어 넣을 수 밖에 없었습니다. 그럼 이런 문제가 생겨요.



글자 크기를 키우면 이미지로 된 글자가 너무 작아지고,



글자 크기를 줄이면 이미지로 된 글자만 너무 켜지고


좀 과장이 섞여있지만 경험해 보신 분들은 100% 공감하실거예요.


이럴때 em을 쓸 수 있어요.



글자 크기에 따라 이미지가 커졌다가



글자 크기가 작아지면 이미지도 작아짐


sample.epub 파일을 첨부하니 참고하세요.


1em은 '현재 글자 크기'의 단위입니다.

현재 문단의 글자가 3em이라면, 이 문단 안에 스타일을 넣을 때는 3em이 1em의 글자크기라 생각하고 스타일을 적용해야되요. 설명이 깔끔하지 못하지만, 연습해보시면 이해 할 수 있을거예요.


그리고 em은 이미지에도 사용할 수 있습니다.

이미지와 글자 크기를 딱 맞춰야 할 때 em을 쓰면 글자 크기가 변경되도 이미지가 그에 맞춰 변경되요. 대신 글자를 이미지로 넣었다면 이미지 크기는 기본 글자 크기의 4배 정도로 크게 넣어주세요. 그래야 독자들이 글자 크기를 키워도 이미지가 깨지지 않아요. 기본 글자 크기에 이미지를 딱 맞추면 글자를 키웠을 때 이미지 글자가 깨져보입니다. 


설정

트랙백

댓글


티스토리 툴바