Mozilla 한국 커뮤니티

예전에 font-size 단위는 em 을 쓰는게 좋다는 글을 본적이 있는데요

이유는 모르겠지만 그저 좋다니까-_- 한번 고쳐보려고 시도를 했는데 이런 문제 가 있습니다

<style type="text/css">
	div { font-size: 0.8em; }
</style>
<div>
	테스트 글자 (크게보임)
</div>
<div>
	<div>
		테스트 글자 (작게보임)
	</div>
</div>

제가 원하는건 font-size: 9pt 처럼 고정된 글자 크기를 가지는건데 em 이라는 단위는 상속받은 font-size에 대해 유동적으로 글자 크기를 계산하는 것 같아서 저렇게 font-size가 중첩돼 버리면 같은 크기로 사용할 수가 없더군요.

그래서 궁금한건.. 어째서 em을 많이 쓰는 추세인가, 그리고 저런 경우에 em을 제대로 쓰려면 어떻게 해야되는가..입니다

제 단순한 생각으로는 애초에 디자인할때 100px * 100px 짜리 배경그림에 12px 짜리 폰트로 디자인을 했다면 CSS서도 12px 이라는 크기를 지정해야 어느 브라우저에서 보더라도 배경그림과 잘 어울리는게 아닐까 싶은데 12px이라는 크기가 브라우저마다 다르다면 좀 이상한게 아닐까요?

초보라 아직 개념도 잘 안잡히고 궁금한게 많네요.. 도와주세요!

간단하게 말하자면 유연성 있는, 탄력성(elastic) 있는 페이지를 만들 수 있죠.

글자는 물론 div과 같은 박스까지 em 단위로 하면 글씨가 잘 안보여 크게 보는 사람들에게도 제대로 보이게 할 수 있는거죠.

참고할 만한 글은 http://www.alistapart.com/articles/elastic/ 입니다.

아마 제 글을 보신 것 같네요. 제 글에 em에 대한 자세한 설명이 부족하거든요~ ^^;

crizin wrote:제가 원하는건 font-size: 9pt 처럼 고정된 글자 크기를 가지는건데 em 이라는 단위는 상속받은 font-size에 대해 유동적으로 글자 크기를 계산하는 것 같아서 저렇게 font-size가 중첩돼 버리면 같은 크기로 사용할 수가 없더군요.

그래서 궁금한건.. 어째서 em을 많이 쓰는 추세인가, 그리고 저런 경우에 em을 제대로 쓰려면 어떻게 해야되는가..입니다

추세이긴 하지만, 굳이 따를 필요까진 없겠죠.
폰트 크기의 상대값과 절대값은 모두 장단점이 있지만, 화면용엔 em이 프린트용엔 px이 다른 수치보다 장점이 많다고 하더군요.

님의 코드에는 div에 0.8em을 사용하셨잖아요.
em이나 %는 상대값이기 때문에 상속된다고 생각하면 됩니다.

Code: Select all

<div>
	<div>
		테스트 글자 (작게보임)
	</div>
</div>

이부분은 div의 자식인 div 이므로, 0.8em의 0.8em이죠. %개념으로 설명해 본다면, 브라우저에서 기본 폰트 크기로 설정한 값의 80%의 80%, 즉 64%가 되겠네요.

div에 폰트값을 설정하시기 보다는, 문단을 뜻하는 p에 폰트값을 설정하는 것이 올바른 코딩이겠죠.

Code: Select all

<style type="text/css">
	p { font-size: 0.8em; }
</style>
<div>
	<p>테스트 글자 (크게보임)</p>
</div>
<div>
	<div>
		<p>테스트 글자 (같게보임)</p>
	</div>
</div>

p 태그를 사용이 귀찮으시다면,

Code: Select all

<style type="text/css">
	div { font-size: 0.8em; }
        div div { font-size: 1em; }
</style>
<div>
	테스트 글자 (크게보임)
</div>
<div>
	<div>
		테스트 글자 (같게보임)
	</div>
</div>

div div를 사용해서 해결하면 됩니다. Cascade(이넘을 염두) Style Sheet~!

em이 사용자의 상황에 따라 다르게 길이가 나오는 것입니다만..

우리나라 웹디자인의 정교한 그것(fix and fix and fix.. -_-)과
크기가 조금만 바뀌어도(현재 보이는 9px 기준으로..) 뭉개지는 한글폰트 때문에 제가 아는 디자이너들은 좀 꺼려합니다.

클라이언트들은 왜 글씨가 어떤 pc에서는 잘(9px로..) 보이고 어떤 pc에서는 잘 안보이냐고(!9px) 그러기도 하구요 -_-;;;; 웹의 인식 변화가 더더욱 필요하다는 걸 잘 보여주는 예이기도 하군요 ^_^

Mozilla 한국 커뮤니티

font-size에 관한 질문입니다

font-size에 관한 질문입니다

Re: font-size에 관한 질문입니다