이미지가 아닌 텍스트로 웹페이지의 자료를 입력할 경우,
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.
기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 2가지 수준이고.
사이즈는 최소 사이즈가 11픽셀입니다. 그 이하는 찌그러져 버리지요.
영문은 11픽셀 이하 9픽셀도 깨지지않고 표현되며, 선택할 수 있는 폰트의 숫자도 많습니다.
그래서 이미지를 쓰지 않고 최대한 텍스트를 활용하여 페이지를 작성할 때 '돋움체 11픽셀'의 활용도는 매우 높습니다.
열심히 코딩을 하다가 익스플로러 계열의 브라우저들이 한글 폰트사이즈의 11픽셀을 읽어내지 못하는 문제를 발견했습니다.
한참을 뚫어지게 소스를 보고 나서야 문제점을 발견했습니다.
익스플로러에서는 font 속성에 폰트이름을 정해주지 않고, 사이즈만 11픽셀로 지정하면, 영문 이외의 폰트는 12픽셀로 출력된다는 것이였습니다. 아놔!! 이런 변태적인 경우가!! 익스플로러 하여튼!!
하지만 숨겨진 문제가 또 하나 있으니!
다음의 경우를 봅시다.
이 예제와 같이 letter-spacing: -1px 을 사용하는 경우가 생깁니다.
letter-spacing: -1px 을 사용하면, 한글 가독성도 조금 떨어지긴 하지만 보기 싫은 정도는 아닙니다. 디자이너분들 중에서도 포토샵 자간 -100 ~-75 정도를 즐겨 사용하는 분들이 계시고 그걸 코딩으로 간단하게 처리하는 방법이 letter-spacing 을 -1px 해주는 방법일 것입니다.(em 등의 활용은 일단 이 포스트와 크게 관련이 없으므로 언급하지 않겠습니다). 헌데 문제는 보시는바와 같이 영문과 숫자입니다. 상당히 가독성이 떨어집니다. 게다가 숫자의 경우는 아예 딱 붙어버립니다.
이 문제를 해결하기 위해서 즐겨 사용하는 방법이 아래와 같은 코드 처리입니다.
font-family: Verdana, Dotum, 돋움; font-size: 12px; letter-spacing: -1px;
letter-spacing 은 -1px 을 줘야겠고, 중간에 숫자나 영문을 써야할 경우 이와 같은 기법을 많이들 사용하십니다. 폰트를 설정하면서 영문폰트를 먼저 선언해주는 방법입니다. 그러면 일단 숫자나 영문은 영문 폰트를 먼저 인식하기 때문에 뒤에 선언한 돋움체는 한글만 적용을 받게되지요. 일단 아까전의 돋움체의 영향을 받을때 보다는 가독성이 많이 완화된 모습입니다.
익스플로러 폰트 사이즈 11픽셀처리 변태적인 상황은 여기서 또 한 번 연출됩니다.
font-family: Verdana, Dotum, 돋움; font-size: 11px; letter-spacing: -1px;
바로전의 예제에서 폰트사이즈만 11픽셀을 줬습니다. 파이어폭스는 11픽셀로 잘 출력되는 반면 익스플로러는 또또!! 요지부동입니다. 정말 변태스럽습니다. 이것의 문제원인과 해결법은 다음과 같습니다.
익스플로러에서는 폰트사이즈 11 픽셀을 사용할 때, 한글을 11픽셀로 사용하고 싶다면, 폰트 선언시 무조건 굴림이나 돋움을 가장 앞으로 오게 해야한다.
결국 폰트사이즈 11픽셀을 처리하는 부분에서는 다음과 같은 문제가 생기게 됩니다. 이것은 따로 span 을 줘서 letter-spacing: 0 으로 처리를 해주지 않는 이상 익스플로러에서는 해결불가능한 문제인 것으로 보입니다.
이처럼, 돋움체, 폰트사이즈 11px 은 사이트를 만들때 빠질 수 없는 디자인적 구성요소 중 하나입니다. 게다가 letter-spacing: -1px 을 줘야만 깔끔하게 출력이 됩니다. 헌데 익스플로러의 변태스러움으로 이해서 font 선언을 할 때, 영문 폰트가 앞에오는 꽁수를 사용할 수 없습니다. 그래서 돋움체에 폰트사이즈 11, 그리고 자간 -1px을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.
이상 익스플로러 계열의 브라우저에서 폰트 11픽셀을 변태적으로 처리하는 문제점과 그 해결방법을 알아보았습니다. 오랜만에 CSS 관련글 쓰려니 힘듦니다. 헥헥!
ps. 이 글에는 '변태'가 몇 번 들어갔을까요? 맞히는 분께는 올블로그 무료 이용권 50년치를 드립니다^,.^
2008/01/19 11:04
Tweet
폰트와 사이즈의 선택폭이 넓은 영어에 비해서 한글은 그 선택의 폭이 매우 좁습니다.
기본적으로, 포털에서 사용하는 한글폰트의 종류는 굴림, 돋움 2가지 수준이고.
사이즈는 최소 사이즈가 11픽셀입니다. 그 이하는 찌그러져 버리지요.
영문은 11픽셀 이하 9픽셀도 깨지지않고 표현되며, 선택할 수 있는 폰트의 숫자도 많습니다.
그래서 이미지를 쓰지 않고 최대한 텍스트를 활용하여 페이지를 작성할 때 '돋움체 11픽셀'의 활용도는 매우 높습니다.
열심히 코딩을 하다가 익스플로러 계열의 브라우저들이 한글 폰트사이즈의 11픽셀을 읽어내지 못하는 문제를 발견했습니다.
font-size: 11px;
보시다시피 아주 변태적인 경우입니다. 분명히 폰트사이즈 11픽셀을 줬는데, 익스플로러에서는 꿈쩍도 하지 않습니다. 우리회사에서 저와 웹표준 소모임을 하고 있는 매니아 A2님과 함께 CSS를 하나씩 지워가며 문제를 찾으려 했지만, 단 1라인을 남겨놓고도 문제를 찾지 못했습니다. 여전히 익스플로러에서는 한글 폰트 11픽셀이 먹히지 않는 둥 요지부동이였습니다.한참을 뚫어지게 소스를 보고 나서야 문제점을 발견했습니다.
익스플로러에서는 font 속성에 폰트이름을 정해주지 않고, 사이즈만 11픽셀로 지정하면, 영문 이외의 폰트는 12픽셀로 출력된다는 것이였습니다. 아놔!! 이런 변태적인 경우가!! 익스플로러 하여튼!!
하지만 숨겨진 문제가 또 하나 있으니!
다음의 경우를 봅시다.
font-family: Dotum, 돋움; font-size: 12px; letter-spacing: -1px;
이 예제와 같이 letter-spacing: -1px 을 사용하는 경우가 생깁니다.
letter-spacing: -1px 을 사용하면, 한글 가독성도 조금 떨어지긴 하지만 보기 싫은 정도는 아닙니다. 디자이너분들 중에서도 포토샵 자간 -100 ~-75 정도를 즐겨 사용하는 분들이 계시고 그걸 코딩으로 간단하게 처리하는 방법이 letter-spacing 을 -1px 해주는 방법일 것입니다.(em 등의 활용은 일단 이 포스트와 크게 관련이 없으므로 언급하지 않겠습니다). 헌데 문제는 보시는바와 같이 영문과 숫자입니다. 상당히 가독성이 떨어집니다. 게다가 숫자의 경우는 아예 딱 붙어버립니다.
이 문제를 해결하기 위해서 즐겨 사용하는 방법이 아래와 같은 코드 처리입니다.
font-family: Verdana, Dotum, 돋움; font-size: 12px; letter-spacing: -1px;
letter-spacing 은 -1px 을 줘야겠고, 중간에 숫자나 영문을 써야할 경우 이와 같은 기법을 많이들 사용하십니다. 폰트를 설정하면서 영문폰트를 먼저 선언해주는 방법입니다. 그러면 일단 숫자나 영문은 영문 폰트를 먼저 인식하기 때문에 뒤에 선언한 돋움체는 한글만 적용을 받게되지요. 일단 아까전의 돋움체의 영향을 받을때 보다는 가독성이 많이 완화된 모습입니다.
익스플로러 폰트 사이즈 11픽셀처리 변태적인 상황은 여기서 또 한 번 연출됩니다.
font-family: Verdana, Dotum, 돋움; font-size: 11px; letter-spacing: -1px;
바로전의 예제에서 폰트사이즈만 11픽셀을 줬습니다. 파이어폭스는 11픽셀로 잘 출력되는 반면 익스플로러는 또또!! 요지부동입니다. 정말 변태스럽습니다. 이것의 문제원인과 해결법은 다음과 같습니다.
익스플로러에서는 폰트사이즈 11 픽셀을 사용할 때, 한글을 11픽셀로 사용하고 싶다면, 폰트 선언시 무조건 굴림이나 돋움을 가장 앞으로 오게 해야한다.
결국 폰트사이즈 11픽셀을 처리하는 부분에서는 다음과 같은 문제가 생기게 됩니다. 이것은 따로 span 을 줘서 letter-spacing: 0 으로 처리를 해주지 않는 이상 익스플로러에서는 해결불가능한 문제인 것으로 보입니다.
이처럼, 돋움체, 폰트사이즈 11px 은 사이트를 만들때 빠질 수 없는 디자인적 구성요소 중 하나입니다. 게다가 letter-spacing: -1px 을 줘야만 깔끔하게 출력이 됩니다. 헌데 익스플로러의 변태스러움으로 이해서 font 선언을 할 때, 영문 폰트가 앞에오는 꽁수를 사용할 수 없습니다. 그래서 돋움체에 폰트사이즈 11, 그리고 자간 -1px을 사용할 때는, 영문과 숫자의 자간을 포기하거나, 따로 스타일을 줘서 벌려주는 방법 두가지 외에는 마땅한 방법이 없는 것 같습니다.
이상 익스플로러 계열의 브라우저에서 폰트 11픽셀을 변태적으로 처리하는 문제점과 그 해결방법을 알아보았습니다. 오랜만에 CSS 관련글 쓰려니 힘듦니다. 헥헥!
ps. 이 글에는 '변태'가 몇 번 들어갔을까요? 맞히는 분께는 올블로그 무료 이용권 50년치를 드립니다^,.^
거참 골때리는 문제로군요 ㅠㅠ...
IE8에서는 해결될까요? :D
골때리죠 ㅠ_ㅠ)/
IE8에서 꼭 해결되어 나오길 바라고 있습니다.
Acid 테스트도 통과했다니 머^^;
(차기 에시드테스트가 나와서 문제긴 하지만 ㅋ)
ps까지 합쳐서 7번 변태가 들어갔군요. 50년 이용권 주셨으니 50년간 올블로그 사이트가 유지되야 합니다. ㅎㅎㅎㅎ
익스플로러 폰트 크기와 자간문제는....
제 블로그에서도 좀 만지다가 포기한 상태.
스킨의 스타일이 살짝 마음에 안들어서 손대기 시작했더니...원래의 스킨 디자이너가 그렇게 지정한 깊은 뜻이 있었다는걸 알게 되었죠. -_-
우왕~ 센스 굳~
ps 까지 바로 계산해버리시네요 ㅋ 이런 넌센스 많이 해보신 듯^^?
올블로그는 앞으로 쭉 사랑해주세영...50년은 장담 못하겠습니다 ㅋ하하하
익스플로러 폰트문제 참 애매하죠..
완벽하게 만들라면 손수 노가다가 필요해지는.. ㅠ
드라코님 스킨때문에도 고생하신 적이 있으시군염 +_+)b
저거 인터넷과는 하등 관련없는 윈도우용 프로그램을 만들 때도 똑같이 적용됩니다. T_T 윈도우에서 한글이 없는 영문폰트를 지정하면 대체해서 보여줄 한글폰트가 지정되어 있는데 여기 크기가 이상하게 되어 있어서 영문을 8포인트(11픽셀)로 지정해도 한글은 9포인트(12픽셀)로 나와버리죠. IE가 이 설정을 우선시하기 때문에 생기는 현상 같습니다. 이건 좀 수정이 되어야 할 텐데요.
;;;
p.s 영문을 10포인트로 지정하면 한글이 11포인트로 나와버리는 현상도 있습니다.
그렇군요. 워드에서도 그런문제가! ⊙_⊙)!!!
그럼 아마도 마이크로소프트에서 나온 프로그램들의 문제인 것 같네요~ 워드나 웹브라우저 같은경우에는 이게 민감한 문제일 수 있는데;;; IE8에서 정말 수정 될까요..;;;
그래도 ie6보다는 나은것 같네요. -_-;; ie8을 기대해야하나.
저도 IE 8을 기대하고 있습니다;
다만 IE 8이 랜더링이 특이하면
이제는 6 7 8 모두 맞춰서 코딩하기도 애매할 듯 해여 ㅋㅋ
정말 꼼꼼하게 정리하셨네요. 굳굳 베리굳~
다른 브라우저는 되는데 IE에서 문제가 생기는걸 보면 윈도우의 문제가 아닌 IE의 문제 ㅡㅡ;
프로젝트 전체 개발기간중 IE의 버그를 해결하는데 30%는 소모되는 것 같습니다. ㅋㅋ
그러게요 정말이죠 ㅋㅋ
작업하는데 걸리는 시간에 30%는 익스플로러 버그찾는다고 보내는 것 같아요. 새로운 문제들을 접할때마다 눈물이 쥬르륵 ㅋ
이유를 모르겠던 폰트 문제를 모두 정리해 줬네요~
역시 쏭군은 고민하는 디자이너~ ^^* 감사합니다.
저거 폰트사이즈 11 안먹히는거 정말 모르고 말리면 골치에용~ ㅠㅠ
좋은 댓글 고마워용~
우와 진짜 도움되는 글이에요 ㅋㅋ
letter-spacing -1주면서 참 고민했던 기억이 있네요
한글은 딱 좋은데 영문이 개판이어서.......
결국 포기했었어요 ㅋㅋ 핀노트에서요 ㅋㅋ
letter-spacing -1px 일때..
폰트사이즈가 12 픽셀이면 굴림이나 돋움앞에 verdana, tahoma 같은걸 주면 되고..
폰트사이즈가 11 픽셀이면 익스플로러에서 한글폰트를 12픽셀로 처리하는 버그가 생기니까.. 위의 꽁수는 사용 불가능. .ㅠㅠ
자간은 포기해야할 수 밖에... 아니면 숫자나 영문부분만 따로 스타일을 주는 방법뿐이..^^:;
우왕ㅋ굳ㅋ
감사ㅋ+_+)b
노파심에...
저 위에 "Sens serif" 라고 쓰신 건 "sans-serif" 겠지요. 특정 영문 글꼴을 가리키는 게 아니라 우리말로 하면 고딕체 정도 해당하는 이름이에요. serif, sans-serif, monospace... 어떤 경우에는 sans-serif가 굴림이나 돋움일 수도 있는 거죠.
그리고 윈도우에서 영문 8pt에 한글 글꼴은 9pt가 붙는 건 그냥 특성 같네요. 위에 다른 분이 말씀하신 것처럼 윈도우는 원래가 다 그래요. 영문 윈도우도 기본 글꼴이 8pt Tahoma인데 한글은 9pt로 나오고요.. 다른 어플들도 역시... 그런데 gtk등으로 된 프로그램, 윈도우용 gaim 같은 건 한글도 8pt 나오고요.
한글 글꼴 다른 게 문제가 아니라 XP까지 기본으로 굴림이나 돋움 같은 애들이 많이 쓰인 게 문제죠. 비트맵 글꼴. 맑은 고딕 같은 글꼴들이 많이 나오고 굴림과 돋움의 자리를 완전히 대체하면 좋겠어요.
letter-spacing은... 전 css 쓸 때 왠지 letter-spacing은 꺼리게 되네요. 글꼴 크기도 em으로 지정해주지 않으면 브라우저마다 자간이 다 다르게 나오기도 하고... 너무 까다로워요..
세리프체 오타가 났었군요.
재빠르게 바꾸었습니다. 지적 감사합니다^^
폰트 사이즈 11px(8pt)를 무시하고 12px(9pt)로 출력되는 문제는 윈도우의 문제라기 보다는, Office 프로그램이나 MS에서 나오는 웹브라우저의 랜더링 문제인 것 같습니다. 윈도우 기반에서 돌아가는 파이어폭스나 오페라, 사파리에서는 위의 문제에서 전혀 영향을 받지 않고 11px이 제대로 출력 됨을 확인했습니다.
letter-spacing은 말씀하신바 안고 있는 문제점이 많아서 저도 지양하는데, 네이버나 다음의 상품설명 같은데 보면 상당히 유용하게 letter-spacing 을 활용할 수 있는 경우가 생깁니다. 이 경우 폰트 사이즈 11px 에 letter-spacing -1px 을 함께 사용해야 한다면, 영문폰트를 맨앞에 내세우는 꽁수를 활용할 수 없게 됩니다.
익스플로러 8에서 꼭 해결되었으면 싶은 문제이네요^^
좋은 하루되세요^^
예..
sans-serif는 어느 특정한 글꼴이 아니라는 이야기였어요.
http://en.wikipedia.org/wiki/Sans-serif
그리고 한글 글꼴이 9pt로 나오는 건 윈도우랑 대부분의 어플이 그런게 맞아요. 윈도우 XP 영문은 기본 글꼴이 8pt Tahoma인데 윈도우랑 IE, 윈도우용 프로그램들 전부 한글 글꼴이 9pt 나오고요. 앞서 말씀드린 것처럼 리눅스에서 porting되었거나 해서 윈도우에서도 gtk나 다른 방법으로 창 만드는 프로그램들이 한글 글꼴도 8pt로 나와요. 한 번 시험삼아서 윈도우 글꼴을 8pt Tahoma로 바꿔보세요. 제가 잘 아는 건 아니지만요... 윈도우에서 IE의 출력부분을 비롯한 일부만 그런 게 아니라는 이야기에요.
또 네이버와 같이 작은 글꼴에 letter-spacing을 -1px을 주곤 하는데요... 전 이걸 bitmap 글꼴의 문제라고 생각해요. 작은 글꼴에서 글자 크기에 비해 자간이 벌어져 보이는 건 글꼴의 한계죠.
님도 좋은 하루 되세요. ^^
(덧붙이자면... 제 생각에 한글 글꼴 9pt 문제는 윈도우 9x 시절에 기본 포함되었던 굴림에 8pt 비트맵 정보가 없었던 게 원인이 아닐까 하네요. 그 때 강제로 어떻게 font link를 건 게 남아있는 게 아닐지??)
영문 폰트나 Serif 계열의 폰트로 설정을 하고
폰트 사이즈 8pt 한글 폰트를 출력해보니. .님 말씀대로
9pt로 출력이 되네요..
윈도우의 랜더링 문제가 맞는 것 같습니다.
파이어폭스나 사파리가 괜찮게 나오는 것은
파이어폭스나 사파리가 윈도우 api 를 사용하는게 아니라
자체적으로 폰트를 처리해서 그런 것 같습니다... 좋은 댓글 감사합니다^^
네.. ^^
그리고 아시리라고 생각하지만 글 아래에서 말씀하신 IE에서 한글 글꼴이 제일 앞으로 와야만 11px를 먹는 것처럼 보이는 건 Firefox는 CSS의 글꼴 스타일 정의를 볼 때 Arial 등의 영문 글꼴에서 한글을 못 찾고 다음 글꼴로 넘어가지만 IE에선 Arial, Verdana 등에 한글 글꼴이 링크되어 다음 글꼴로 넘어가지 않기 때문에 그렇습니다. ㅎㅎ
그런 미묘한 처리 방식의 차이가 존재하는군요.
아무래도 웹페이지를 만드는 사람입장에서는..
IE보다는 FF쪽이 편한 것 같습니다.
IE8에서는 FF처럼 변해줬으면 하는 바램이 있네요^^;;
이렇듯 퍼블리셔를 힘들게하는 ms사는 언제쯤 정신을 차릴런지;
IE때문에 늘 고생이죠..^^;
후..익스플로러 이 뵨태!! 저런 큰차이가...ㄷㄷ익스플로러에 너무 젖어있어서 몰랐네요..ㅠㅠ
저의 무지함에 무릎꿇습니당.ㅠㅠ
익스플로러.. 특히.. 익스6은 많은 개발자와 퍼블리셔들을 미치게하는 브라우저로 악명이 높습니다^^
감사합니다 .. 11px안먹혀서..애먹고있었는데..
좋은정보 감사해요~ ^^
IE가 참 고생을 많이시키져^^ 좋은 하루 되세요~
글보고 문제해결했어요. 감사합니다.
스크랩하고 싶었는데 할수가 없어서 게시물에 링크 걸어놨어여.
suho님 안녕하세요~
도움이 되셨다니 다행입니다. 그나저나 자바스크립트 같은건 안 걸어놨는데.. 글 복사가 안되시던가요?
아...하루를 꼬박 고생한건데...이글때문 알게되었습니다..감사합니다.
아 정말 변태같은 ie자식....개xxxxxxxxxxx
진짜 욕이 절로 나오죠
저도 전에 밤새우고 나서 욕이 절로 나왔거든요~~
수고하셨습니다~!!
며칠전 작업하다가 우연히 발견한 또 하나의 버그네요...도데체 몇개의 버그가 더 있을지 궁금해 지네요.
IE 버그는 피카부나 더블마진같은 유명한 버그만 잡으시면 작업하시는데 크게 무리는 없으시지만 가끔 요런 잘 안 알려진 자잘한 버그에 한번 휘말리면 피말리죠 ㄷㄷㄷ >_<
유용한 참조. 공유를 주셔서 감사합니다.
Thanks for sharing. i really appreciate it that you shared with us such a informative post...
I think so this post is very interesting and usefull for all us. We must follow this every time.
Thank you for sharing such great information with us. I really appreciate everything that you've done here and am glad to know that you really care about the world that we live in
그것이 개인의 전체 세계와 거의 모든 중요한 국가로 인식을 분산하기 위해 혁신적인 생각을 간주됩니다. 나는 민족의 더 많은 수의 유사 수행하시기 바랍니다.
나는 항상 내 자신을 도울 수 인터넷에서 콘텐츠를 기사 꿔.간편한 정보에 대형 감사합니다.
다음과 같은 게시물을 논의 주셔서 감사합니다 ... 이것은 실제로 계몽 뉴스 속보입니다.