font-size: em을 처음쓰시는 분들을 위한 간단한 팁

font-size정의시 px을 쓰지말고 em을 쓰기를 권고하고 있죠..
근데, 임마가 참으로 성가시게 굴때가 있습니다.

그 이유는, 상대적이기 때문이죠..
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>
<div>Mother
<div>
<div>Child01(Baby01)</div>
</div>
<div>Child02</div>
<div>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>Baby01</textarea>

이 부분은 상속을 받지 않기때문에, “모종의 뒷거래”가 일어나지 않게 되는 것이지요~
이해하시겠죠..?

그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)

<textarea>Mother</textarea><br />
<textarea>Baby01</textarea><br />

<input type=”text” value=”Mother”><br />
<input type=”text” value=”Baby01″><br />
<input type=”button” value=”Mother”><br />
<input type=”button” value=”Baby01″><br />

즉, form control에는 상속이 되지 않는거죠.
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.

왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중