em의 사용과 IE 버그

em의 필요성

일반적으로 폰트의 크기를 지정하기 위해서 px, 혹은 pt 와 같은 단위를 습관적으로 사용 해 왔습니다만 Screen display의 경우에는 플랫폼간의 부조화나 브라우저에서 폰트 사이즈를 인위적으로 조절하는 것이 불가능한 경우가 생기기 때문에 이를 지양하고 em 과 같은 상대 단위를 사용하는 것이 좋습니다.

em의 크기는 어떻게 가늠하는가.

em은 대문자 M의 폭을 기준으로 그 사이즈가 정해지는 상대적 단위이기 때문에 원하는 크기를 지정하기 위해서는 상위 엘리먼트로 거슬러 올라가야 합니다. 마치 부모와 자식과의 관계처럼 자식은 부모에게 영향을 받는 속성을 갖고 있죠.

/* CSS */
#parent {
  font-size:20px;
  }

<!-- HTML -->
<div id="parent">
  <div id="child">Who Am I?</div>
</div>

위의 예(이해를 돕기 위해 px 단위를 사용 했습니다)를 보면, Who Am I? 의 기본 크기는 별다른 지정이 없으므로 20px로 표현이 됩니다. 만약 child 엘리먼트의 폰트 사이즈를 1em으로 지정 했을 경우 Who Am I?는 parent의 100% 크기인 20px로 나타나고, child가 2em 라면 40px, 0.5em 라면 10px로 나타나게 되는 형식이 em의 원리 입니다.

처음 크기는 무엇으로 결정 되나?

앞서 얘기 한데로 em은 상대적 단위 이기 때문에 상위 엘리먼트의 값을 참조하게 됩니다. body 그리고 html까지 올라가서 그 값을 참조하게 되는 것이죠. 그렇다면 최상위 엘리먼트는 무엇을 참조하게 될까요? 네, 브라우저의 설정 값을 참조하게 됩니다. 바꿔 얘기하자면 브라우저의 설정 값을 변경하면 페이지의 폰트 크기들을 조절할 수 있게 되는 겁니다. (참고로 Opera나 IE7의 경우에는 줌 브라우징이 가능하고 Fire Fox는 절대 단위 폰트들도 resizing이 가능하므로 em은 IE6를 위한 선택이라 해도 과언이 아닙니다.)

일반적으로 브라우저의 기본 크기는 12pt (16px)로 설정 되어 있기 때문에 12pt를 기준으로 페이지 전체를 디자인 해야 하고, 또한 기본 설정의 변경에 따라 변화되는 모습을 융통성 있게 제작하는 것이 무엇보다 중요 합니다.

Resizing bug in IE6

em을 사용하여 텍스트 크기 조절이 가능토록 디자인 해야 하는 주된 이유는 사용자 편의성에 있습니다. 만일 시력이 좋지 않은 사용자라면 작은 글씨로 된 텍스트는 읽을 수가 없으므로 이를 적당히 키워 읽기 편하도록 만들자는 것이 그 목적 이죠. 그런데 단순히 em의 사용만으로는 IE6 에서 확대/축소율의 문제점이 발생합니다. 폰트가 지나치게 커지거나 지나치게 작아져서 오히려 더욱 불편해 지는 문제 입니다.
파이어폭스의 모습과 비교한 아래 이미지를 보시면 그 차이를 느끼실 수 있을 겁니다.

이 문제는 최상위 엘리먼트의 폰트 사이즈 단위를 %로 지정하여 간단히 해결할 수 있습니다. 만약 font-size를 body부터 시작 했다면 html을 추가해 % 값을 지정해 주십시오.

html {
  font-size:100%;
  }

폰트의 크기를 브라우저 기본값의 100%로 보여주라는 코드라 이론상으로는 아무런 의미가 없지만 사이즈의 근본을 em이 아닌 %로 우회하여 IE에서도 확대, 축소의 비율을 적당하게 적용 시킬 수 있도록 한다는 원리 입니다.

만일 html 에 이미 폰트 사이즈를 지정했거나 html이 아닌 다른 곳에 %를 지정하고 싶다면 폰트가 지정된 최 상위 엘리먼트(보통은 body가 되겠죠)의 수치와 단위를 em 에서 %로 변경 해 주시면 됩니다.

body {
  font:75%/1.6 'Trebuchet MS', Helvetica, sans-serif;
  }

그 밖의 문제

IE에서 하이퍼링크를 클릭할 경우 본문의 텍스트 크기가 순식간에 줄어들거나 커지는 증상도 앞서 얘기한 것처럼 최상위 단위를 %로 지정해 줌으로써 해결이 가능할 것 같습니다. 그렇지만 확실한 것은 아니고, 어디까지나 추측일 뿐인데, 일단은 제 환경에서는 재현이 되지 않기 때문에 혹시라도 이런 증상이 나타나시는 분은 테스트를 부탁 드립니다.

티스토리 툴바

1upz