CSS 사이즈(Size) 단위에 대해서

사이즈(Size) 단위

 

CSS를 사용할 때 우리는 폰트의 크기, DIV 박스의 가로 세로 길이 등등

필수적으로 어떤 특정한 Size를 표기하게 됩니다.

 

이때 사용하는 Size의 단위에는 여러가지 종류들이 있습니다.

 

절대단위를 나타내는

in     : Inches (인치) - 1인치는 2.54 센티미터

cm   : Centimeters (센티미터)

mm   : Millimeters (밀리미터)

pt     : Points (포인트) - 1 포인트는 0.72 인치)

pc    : Picas (파이카) - 1 파이카는 12 포인트

 

가 있고

상대단위를 나타내는

em  : 지정되거나 상속받은 폰트 높이에 대한 상대 크기

ex   : 지정되거나 상속받은 폰트 중 알파벳 'x' 의 높이에 대한 상대 크기

px   : Pixels (픽셀) - 화면 해상도에 대한 상대 크기

%   : 퍼센티지 - 지정되거나 상속받은 (또는 상위 엘레멘트) 에 대한 백분율 상대 크기

 

가 있습니다. 뭔가 막 복잡하져?

 

===========================================================================================

* 참고 *

*******************************************************************************************

위의 상대단위들 중에서 px는 좀 특이한 녀석입니다.

이미 설명한것 처럼 px는 분류상..... 화면 해상도에 따라 그 크기가 달라지는 상대단위 입니다.

하지만 해상도가 달라지면 폰트 뿐만 아니라 모든 이미지들의 크기도 함께 달라지게 됨으로

우리는 이것을 절대로 상대단위 라고 느끼지 못하는 경향이 있습니다.

따라서 본 강좌에서는 앞으로 px를 편의상 절대단위에 포함하여 설명하도록 하겠습니다.

===========================================================================================

 

일단 절대단위, 상대단위란 말부터 살펴 보겠습니다.

 

절대단위란 정해진 그 사이즈가 고정되어 있다는 얘깁니다.

예를 들어 어떤 폰트의 사이즈가 12px 이라면

어떤 브라우저로 보든지...

브라우저의 기본 폰트 크기를 어떤것으로 변경하든지 간에 무조건 똑같이 12px 입니다.

 

하지만 120% 라는 폰트 사이즈는 상대단위로써 기본 폰트 사이즈에 비례해서

그 기본 폰트 크기에 대한 120% 라는 뜻이지요. 상위 레벨에 대한 상대적인 개념같은 거죠.

따라서 기본 폰트 사이즈가 달라지면 120% 로 지정한 글씨의 크기도 함께 달라지게 되는 것입니다.

 

12px 에 대한 120% 와

30px 에 대한 120% 는 전혀 다른 사이즈가 되겠죠?

 

사이즈(폰트크기나 박스모델 등) 설계는 초기 CSS 기획단계서부터 염두해 두어야 하는 부분입니다.

특히 방탄웹을 포함한 CSS 설계에서는 빼뜨릴 수 없는 아주 중요한 개념이지요.

또한 대규모 사이트일 경우 향후에 있을 사이트 업데이트 시에도 아주 유용한 개념입니다.

 

이 부분은 여러분들이 나중에 좀 더 내공이 쌓였을 때 쯤해서

다시한번 *어 보는 시간을 갖도록 하겠습니다.

오늘은 그냥 개념 정리만 하도록 하죠.

 

복잡하게 위의 모든 단위들을 다 외우실 필요 없어염.

사실 그거 다 쓸 일도 없구요...

다음의 4가지 단위만 기억해 두시면 됩니다.

 

pt, px, em, %

 

절대단위는 pt 와 px 만 알아도 충분하구요.

상대단위는 em 과 % 만 아셔도 충분합니다.

 

만일 프린트용 CSS를 별도로 구성하신다면 in (인치) 와 같은 단위도 사용하실 일이 있겠지만

위의 4가지만 확실히 아셔도 중급자 레벨 소리 듣는데는 별 무리가 없습니다.

 

그리고 다음의 표를 참고하세요.

4가지 단위 사이의 관계를 이해하시는데 도움이 되실 겁니다.

 

출처 :: http://sinbd.com/index/hompy/study.php?m...;uid=24579