font-size: small 과 x-smal

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
댓글 게시
송효진

font-size: small 과 x-smal

게시물 작성자 송효진 » 2007 02 05 16:08 31

font-size 를 px 나 pt 를 쓰지 않고, 상대적인 값을 사용하여,
크기변화가 가능하게 만들고자 합니다.

가장 문제가 되는것은 small 과 x-small 사이의 값이 없다는 것입니다.
small 은 너무 크고, x-small 은 너무 작습니다.

px 로 지정하면 브라우저의 텍스트 크기 변경이 동작하지 않습니다.

좋은 방법 있을까요?

감사합니다.

송효진

게시물 작성자 송효진 » 2007 02 05 16:10 45

게다가 ie, ff 에서 크기가 다르군요......
이거 깔끔하게 해결하신 분 있으신가요?

astraea
해커
해커
게시물: 477
참여됨: 2004 01 04 23:57 23
연락:

게시물 작성자 astraea » 2007 02 05 20:40 53

저는 px 쓰는데
ff2, ie7 에서 확대 되더군요~_~;;;;

근데 px 를 쓰는데도
어케 ff, ie 의 글자크기가 다른지 참 의문이에요;ㅠ

zzz

게시물 작성자 zzz » 2007 02 05 21:09 26

phpschool에 자주 등장하시는 그 송효진님이신가요?
다음과 같은 코드로 IE, FF에서 시험해보면 거의 비슷하게 나오며,
em을 사용하면 IE6에서도 폰트 축소 확대가 됩니다.
font-size에 대해서 비교적 명쾌하게 설명하는 문서를 하나 발견하였습니다.
http://www.bigbaer.com/css_tutorials/css_font_size.htm
이문서에서는 "아빠가 누군가?"만 염두해두면 em이 아주 쉽다고 예기하고 있습니만,
복잡한 구조의 실제 사이트에는 결코 만만치가 않더군요.
또한 경험상, 아래와 같이 간단한 코드에서는 예상하는 것과 거의 같이 표현되나, 구조가 조금만 복잡해지면, 도대체 어디가 문제인지를 알 수 없는 예측 불허의 상황이 자주 발생하더군요.

코드: 모두 선택

<html>
<head>
<style>
#box1 {font-size:0.7em;}
#box2 {font-size:11px;}
</style>
</head>
<body>
<div>
font-size 를 px 나 pt 를 쓰지 않고, 상대적인 값을 사용하여,
<br>
크기변화가 가능하게 만들고자 합니다.
<br>
<br>
가장 문제가 되는것은 small 과 x-small 사이의 값이 없다는 것입니다.
<br>
small 은 너무 크고, x-small 은 너무 작습니다.
<br>
<br>
px 로 지정하면 브라우저의 텍스트 크기 변경이 동작하지 않습니다.
<br>
<br>
좋은 방법 있을까요?
<br>
<br>
감사합니다.
</div>
<br>

<div>
font-size 를 px 나 pt 를 쓰지 않고, 상대적인 값을 사용하여,
<br>
크기변화가 가능하게 만들고자 합니다.
<br>

<br>
가장 문제가 되는것은 small 과 x-small 사이의 값이 없다는 것입니다.
<br>
small 은 너무 크고, x-small 은 너무 작습니다.
<br>

<br>
px 로 지정하면 브라우저의 텍스트 크기 변경이 동작하지 않습니다.
<br>

<br>
좋은 방법 있을까요?
<br>

<br>
감사합니다.
</div>
</body>
</html>

zzz

게시물 작성자 zzz » 2007 02 05 21:33 39

id가 제대로 나타나지 않는군요. 알아서 보시길.....

그리고, font-family가 무엇인가에 따라 크기가 다르게 나타나더군요. (특히 IE에서) 이를 모르고 수 날 밤을 잠 못 이루었던 기억이.....
gulim과 verdana로 시험해 보면 알 수 있습니다.

댓글 게시

누군가 접속

유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 2 손님들