em의 사용과 IE 버그
Posted 2007/10/24 12:08, Filed under: Web Standardsem의 필요성
일반적으로 폰트의 크기를 지정하기 위해서 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에서 하이퍼링크를 클릭할 경우 본문의 텍스트 크기가 순식간에 줄어들거나 커지는 증상도 앞서 얘기한 것처럼 최상위 단위를 %로 지정해 줌으로써 해결이 가능할 것 같습니다. 그렇지만 확실한 것은 아니고, 어디까지나 추측일 뿐인데, 일단은 제 환경에서는 재현이 되지 않기 때문에 혹시라도 이런 증상이 나타나시는 분은 테스트를 부탁 드립니다.
Trackback URL : http://1upz.com/trackback/95
-
웅..그렇군요.
웹폰트 조절할 때 em을 요즘 쓰는데..영향을 받는 게 신기하다 했어요.
속성이군요.
px보다 조금은 세밀하게 조절할 수가 있는 거 같아서 자주 em으로 고쳐서 쓰게 되는..-
어차피 스크린의 최소단위는 픽셀이기 때문에 px단위보다 세밀하다는 말은 무의미합니다 ^^; 오히려 작업하기에는 px이나 pt의 사용이 편하죠.
그런데 이글루스로 옮기신건가요? 이글루스 블로그가 아니었던것 같은데... -
예전엔 당연히 태터였더랬죠.ㅎㅎ
티스토리를 잠시 접고 간단한 이글루에서 생활하는 중올습니다. 오랜만이에요. 인사가 늦었네요^^;
+ 웹폰트 조절할 때 보니까 em이 서로의 영역에 간섭하면서 영향받아서 커졌다 줄어들었다 하는 모양이 pt보다 조금 세분화된 것처럼 느껴지더라구요. 실제로는 무의미하다. 그런 거군요. 암튼 em 단위로 쓰면 좀 신기하던 차였습니다.ㅎㅎ
-
-
또 한 가지 버그가 더 있는데
항상 그런건 아니고 부분적으로 분명히 절대적인 수치상으로 9pt에 해당하는 크기인데
영문은 정상적으로 9pt로 나오고 한글만 12pt로 보이는 버그가 발생할 때가 있습니다.
이것은 어떻게 할 때 발생하는건지 감도 안와서 한동안 em을 기피했었어요.
그리고 em과는 상관없지만 ie가 멍청해서인지 몰라도
9pt와 12pt 사이 (10pt, 11pt) 의 크기는 인식을 못해서 무조건 12pt로 나오더군요. (px로 대체해도 같은 증상)-
9pt와 12pt는 그냥 보기에도 그 크기의 차이가 엄청날텐데, 그런 버그가 있었나요? 우선순위로 지정된 영문폰트 때문에 한글 출력이 엉망이 되는 듯 합니다만 만약 소스가 있으시다면 보내주세요~~^^
-
-
css도 html도 결코 쉽게 보면 안되는군요.
새로운 사실 하나 알아갑니다.-
쉬우면 좋을텐데 말이죠..ㅜㅜ
-
-
흠..그렇군요..좋은 정보입니다.사실 전 이렇게 전문적이지는 않아서 px 로만 사용을 하고 있는데, 이런 차이도 있었네요..
-
em의사용은 솔찍히 어렵습니다. 모든 브라우저에서 줌 브라우징이 가능하게되길 기대해봐야겠죠
최근에 파이어폭스3을 설치해봤는데 오페라 처럼 구현되더라고요. 앞으로 점점 이런 모습들로 바뀔 것 같습니다
-
-
통상적으로 font-size:100%; 라 한다면, IE6에서 "보기-텍스트크기-보통(M)"을 의미할까요?
저 같은 경우에는 em으로 글자의 크기를 결정하지만 처음 기준 설정값을 키워드로 설정을 합니다.
font-size:small%; 이렇게요. 그 다음 em을 사용하지요.
키워드와 %의 상관 관계를 잘 몰라서... 그럽니다만... 위의 글을 보면서 문득 이런 생각을 했습니다.
키워드 small이면 %로 몇 %가 될까요.
저도 클릭을 할 때마다 제 블러그의 글씨가 작아지며 깜빡거려서... 수정을 해 보고 싶어서요.
그리고 최초의 기준 폰트만 %로 지정하고 이후에는 em을 그대로 쓰는 것은 아마도 문제가 없지 않을까 싶습니다. 그러면 키워드 small의 % 값만 고치면 될 듯 싶은데 맞는 생각일까요?
참 어디선가 제가 읽은 책에서는 font-size:100%;면 대부분의 브라우저에서 약 16px 정도가 된다고 하는데 맞는 말일까요? 그럼 키워드 smoll은 몇 px일까? 갑자기 기억나서요.
좋은 글보고 질문만 하고 가네요.
가능하시면 답변 부탁드립니다.
미리 감사드립니다.-
font-size:100%는 자기 자신이 갖고있는 폰트 사이즈의 100% 라는 의미 입니다. 고로 부모 앨리먼트로 부터 물려받은 그대로의 크기를 나타내죠.
IE6에서 '텍스트 크기-보통' 은 16px의 크기를 갖고 있으며 앨리먼트의 폰트 값이 100%라면(다른 부모로부터 값을 상속받지 않았을 경우) 16px의 값을 갖게 됩니다.
그리고 small, x-small, xx-small 과 같은 키워드 수치는 단계마다 120% 씩 차이가 있습니다만 브라우저마다 미세한 차이를 보이고 있어 썩 권장하는 속성은 아닙니다. 제 기억으로는 디폴트 값에 해당하는 small은 12px~13px 사이의 값을 갖고 있는 걸로 기억합니다. 아마 small 사이즈에 굴림을 지정했다면 13px 정도의 크기로 랜더링 될 것이라 생각 되네요. 1px 보다 작은 수치를 표현할 수 없기 때문에 유사치의 값을 표현이 되는 현상인데요, 정확한 값의 출력과는 자간이나 행간의 차이가 있겠죠? ^^
-
-
아 그렇군요. 아직 정식으로 블러그를 오픈하기 전이라 스킨을 가다듬으며 이것저것 준비 중인데 좋은 정보 얻어갑니다.
말씀하신 데로 제가 수정하려면 font-size:small;의 경우에는 16px이 100%니까 13px은 약 81%정도 되겠네요.
고로 간략하면 font-size:80%;
스킨은 처음 만드는 것이라 제공해 주신 텍스트큐브의 coolant 스킨을 해독해 가며 제 취향에 맞게 어느 정도 정착시킨 스킨을 완성해 나가고 있는 데, 주신 정보는 많은 도움이 될 것 같습니다.
좋은 정보 감사드립니다. -
비밀댓글 입니다
-
앵? 그런거 아니었는데요 ㅜㅜ;; 따듯하지 못한 답변, 미안합니다 ㅜㅜ 흑..
-
-
비밀댓글 입니다
-
글을 자주 쓰지는 못하고 있어서 자주 놀러오시라고는 큰소리로 할 수가 없네요~
살살 놀러오세요~^^;;
-
-
^^
-
^^?;;
-
-
아..예전 제로보드 포럼에서인가에서 em 단위에 대해 많은 의견이 오고가는것을 보았던 기억이 나는것 같습니다..
역시 문제는 한글글꼴..다양한 브라우져,다양한 폰트사이즈에 맞춰서 일일이 수정한다는게 정말 쉬운일은 아닐꺼라는 생각이 드네요,,css를 배우느는 저에게는 정말 유용한 정보입니다,,^ ^
아..또 슈터즈에 있었으면서도 한번도 인사도 못드렸어요,,너무 늦게 인사드리는것은 아닌지
항상 유용한 정보 감사하게 구독하고 있습니다.
추운계절에 몸건강하시구요,,앞으로 자주 인사드릴께요..~*..,,^ ^-
저 슈터즈에서 방출되기 일보 직전 입니다. 아님 암묵적으로 이미 그리 됐을지도....ㅜㅜ;
-
-
하하. 역시 좋은 포스트군요. 한가지 알려드리면 px는 상대크기입니다... 아주 뒤늦은 뒷북이군요. :)
http://www.w3.org/TR/CSS21/syndata.html#value-def-length
