font-size정의시 px을 쓰지말고 em을 쓰기를 권고하고 있죠..
근데, 임마가 참으로 성가시게 굴때가 있습니다.
그 이유는, 상대적이기 때문이죠..
px같은 절대적인 값이라면, 솔직히 코더(Coder)들이 코딩(Coding)하기엔 더욱 쉽습니다.(저만 그런걸지도)
하지만, 줌브라우징 기능때문에 em을 권고하죠.
(물런, 이것외에도 여러가지가 있지만 줌브라우징은 그 이유중 하나입니다. http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/)
자, 그럼 무엇이 성가시게, 골때리게 구냐..
이 녀석들은 폰트크기..즉 위에서 선언된 font-size와 모종의 뒷거래(?)가 있다는 것입니다.
예를들어,
가 있다고 가정을 할경우, Baby01 과 Child02~03은 코드결과적으로 보면 font-size:2em입니다.
하지만, 실제로 돌려보면, 틀리게 나옵니다.
그 이유를 확인하신다면..
으로 수정해보세요, 그럼 제가 한말을 바로 이해하실 수 있을 겁니다.
"상대적" 이기 때문이죠.
그리고, 다른부분은..
위의 상황과 연관된 경우인데..만약 같은 class를 폼 컨트롤러(input, textarea.....)와 함께 사용한다고 가정을 할경우..
눈에 보이는것(위의 div)과 같지 않은 출력이 나올 수 있다는 것이지요..
예를들어, Baby01 class를 같이 쓴다고 가정을 하고..
div에서는 대략 13~4px정도의 크기로 출력이 되죠
하지만, 이걸보고 폼 컨트롤러에 적용을 시킬경우, 13~4px정도의 글자크기가 출력되는게 아니라.
순수하게 2em 즉 200% 글자가 출력이 됩니다
이 부분은 상속을 받지 않기때문에, "모종의 뒷거래"가 일어나지 않게 되는 것이지요~
이해하시겠죠..?
그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)
즉, form control에는 상속이 되지 않는거죠.
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.
왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!
근데, 임마가 참으로 성가시게 굴때가 있습니다.
그 이유는, 상대적이기 때문이죠..
px같은 절대적인 값이라면, 솔직히 코더(Coder)들이 코딩(Coding)하기엔 더욱 쉽습니다.(저만 그런걸지도)
하지만, 줌브라우징 기능때문에 em을 권고하죠.
(물런, 이것외에도 여러가지가 있지만 줌브라우징은 그 이유중 하나입니다. http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/)
자, 그럼 무엇이 성가시게, 골때리게 구냐..
이 녀석들은 폰트크기..즉 위에서 선언된 font-size와 모종의 뒷거래(?)가 있다는 것입니다.
예를들어,
<style type="text/css">
body { font-size:1em; }
.Mother {font-size:1em;}
.Child01 {font-size:0.5em;}
.Child02 {font-size:2em;}
.Child03 {font-size:2em;}
.Baby01 {font-size:2em;}
</style>
body { font-size:1em; }
.Mother {font-size:1em;}
.Child01 {font-size:0.5em;}
.Child02 {font-size:2em;}
.Child03 {font-size:2em;}
.Baby01 {font-size:2em;}
</style>
<div class="Mother">Mother
<div class="Child01">
<div class="Baby01">Child01(Baby01)</div>
</div>
<div class="Child02">Child02</div>
<div class="Child03">Child03</div>
</div>
<div class="Child01">
<div class="Baby01">Child01(Baby01)</div>
</div>
<div class="Child02">Child02</div>
<div class="Child03">Child03</div>
</div>
가 있다고 가정을 할경우, Baby01 과 Child02~03은 코드결과적으로 보면 font-size:2em입니다.
하지만, 실제로 돌려보면, 틀리게 나옵니다.
그 이유를 확인하신다면..
body { font-size:5em; }
"상대적" 이기 때문이죠.
그리고, 다른부분은..
위의 상황과 연관된 경우인데..만약 같은 class를 폼 컨트롤러(input, textarea.....)와 함께 사용한다고 가정을 할경우..
눈에 보이는것(위의 div)과 같지 않은 출력이 나올 수 있다는 것이지요..
예를들어, Baby01 class를 같이 쓴다고 가정을 하고..
div에서는 대략 13~4px정도의 크기로 출력이 되죠
하지만, 이걸보고 폼 컨트롤러에 적용을 시킬경우, 13~4px정도의 글자크기가 출력되는게 아니라.
순수하게 2em 즉 200% 글자가 출력이 됩니다
<textarea class="Baby01">Baby01</textarea>
이 부분은 상속을 받지 않기때문에, "모종의 뒷거래"가 일어나지 않게 되는 것이지요~
이해하시겠죠..?
그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)
<textarea class="Mother">Mother</textarea><br />
<textarea class="Baby01">Baby01</textarea><br />
<input type="text" class="Mother" value="Mother"><br />
<input type="text" class="Baby01" value="Baby01"><br />
<input type="button" class="Mother" value="Mother"><br />
<input type="button" class="Baby01" value="Baby01"><br />
<textarea class="Baby01">Baby01</textarea><br />
<input type="text" class="Mother" value="Mother"><br />
<input type="text" class="Baby01" value="Baby01"><br />
<input type="button" class="Mother" value="Mother"><br />
<input type="button" class="Baby01" value="Baby01"><br />
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.
왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| CSS Selector에 대해 알아봅시다~ [응용편 #1] (2) | 2007/02/09 |
|---|---|
| CSS Selector에 대해 알아봅시다~ [초급편] (6) | 2007/02/07 |
| font-size: em을 처음쓰시는 분들을 위한 간단한 팁 (12) | 2007/02/06 |
| EditPlus v2.30 눈에 확띄는 업데이트 8가지 (4) | 2007/01/26 |
| FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기 (0) | 2007/01/22 |
| 사용하는 FireFox Plug-in (0) | 2007/01/22 |
TRACKBACK http://hiphapis.net/trackback/16
-
웹표준과 폰트 크기 - 접근성 삭제
2007/02/09 12:00TRACKBACK FROM 일모리와 웹표준폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그...
댓글을 달아 주세요
예제와 함께 좋은 팁을 소개해 주셨네요. 첨언하면, 상대적인 단위는 바로 부모의 값을 1em 또는 100% 으로 인식하게 됩니다. 따라서 body에 75%의 서체크기를 적용하면 body는 75%의 서체크기를 갖지만 p는 body에 적용된 서체크기를 기준으로 다시 75%를 계산하기 때문에 body 보다 75% 더 작아지게 됩니다. 결국 75%의 75%가 되는거죠. 더 헷갈리지 않았나 모르겠네요 ㅜㅜ;
2007/02/06 19:35 [ ADDR : EDIT/ DEL : REPLY ]헉, 제가 포스팅한 내용이 찬명님이 적으신 코멘트인데;
2007/02/09 12:30 [ ADDR : EDIT/ DEL ]저렇게 긴 문장을, 이렇게 짧게 표현하시다니..
역시 ㅠ,.ㅠ)=b
(예~전에 CDK에 올렸던것을 살짝 수정해서 포스팅한거에요 ㅎㅎ)
찬명님 그럼 예를들어 body에 0.75em 을 줬을 경우 그안에 있는 h4 클래스에 폰트가 0.75로 보일려면 1em을 줘야 한다는 말씀이신가요? 좀 햇갈리는 부분이 있어서요.
2007/11/03 22:10 [ ADDR : EDIT/ DEL ]넵 맞습니다.
2007/11/05 16:49 [ ADDR : EDIT/ DEL ]상대적인 단위이기때문에 그대로 상속을 받게되죠..
그렇게 되다보니..
상속받은것의 x% 이렇게 됩니다.
어쨌거나 WCAG 1.0 > 체크포인트 3.4에서 권장하고 있으며 중요도2[되도록 지켜야 할] 에 해당하는 필수 팁! ^^a
2007/02/07 13:13 [ ADDR : EDIT/ DEL : REPLY ]그렇죠!!
2007/02/09 12:30 [ ADDR : EDIT/ DEL ]감점 팍팍 해부려!!
ㅎㅎ
정찬명님도 좋은 설명곁들여 주시고 좋은 글이네요.
2007/02/09 11:55 [ ADDR : EDIT/ DEL : REPLY ]한가지 더 보태자면 보통 쓰는 9pt, 혹은 12px 이 0.75em 입니다. 여기서 0.75를 인식을 못하는 브라우저가 있으니 0.76em 을 보통 쓰게 됩니다. 0.01 의 비밀이죠 ^^
물론 현실적으로 과연 얼마나 되는곳에서 em 을 쓰게 될런지 말입니다... 일단 백터폰트가 많이 퍼지면 혹 많아지게 될수 있긴 하겠죠.
헛, 그렇군요..0.01이 세상을 바꾸는군요(?)
2007/02/09 12:29 [ ADDR : EDIT/ DEL ]ㅎㅎ
제 블로그에선 처음 뵙죠~?
무지 반갑습니다..ㅎㅎ
아 그러고 보니 인사 남긴다고 하고는 그냥 'save a comment' 를 눌러버렸네요 ^^
2007/02/09 13:32 [ ADDR : EDIT/ DEL ]블로그 넘 좋아요 그냥 계속 이렇게 꾸준히 적어주세요 저처럼 들쑥날쑥하면 미움받아요 ^^;;;
아...저는 일모리님이나 찬명님처럼 인기블로거가 아니라,
2007/02/09 16:13 [ ADDR : EDIT/ DEL ]어느 누구 하나 관심가져주지 않는 블로거라..ㅠ,.ㅠ
미워할 사람도 없어요..
부럽죠..??
(그런데 왜 제 마음은 ㅠ,.ㅠ)
일모리님, 미움도 곧 인기와 비례해서 그래요 ㅋㅋㅋ
2007/02/10 23:03 [ ADDR : EDIT/ DEL : REPLY ]기다림님, 인기블로거라고 띄워줘서 쑥쓰럽!
Thank you for sharing this information. The information was very helpful and saved a lot of my time.
2011/10/27 16:40 [ ADDR : EDIT/ DEL : REPLY ]