[CSS] 4. Units ( 단위 )

CSS 에서 사용하는 단위(Unit)

실제로 CSS로 뭔가를 하기전에 기본부터 다지고 가는게 좋겠죠?

그래서 이번에는 각종 속성값에 쓰이는 단위를 한번 알아보도록 하겠습니다.

 

CSS는 절대값을 나타내는 inches, centimeters, points 등등 뿐 아니라 상대값을 나타내는 percentages나 em 단위를 지원합니다. 이런 단위들은 자주 쓰이기 때문에 꼭 짚고 넘어가시는 것이 좋습니다.

 

다음은 단위와 단위에 대한 설명 및 사용 예제입니다. 

Unit	Description	Example
%	퍼센트	p {font-size: 16pt; line-height: 125%;}
cm	센티미터	div {margin-bottom: 2cm;}
em	em 단위는 폰트의 사이즈와 동일하기 때문에 폰트사이즈를 12pt로 설정하면 각 em 단위는 12pt가 됩니다. 따라서 2em은 24pt가 되겠죠	p {letter-spacing: 7em;}
ex	이 값은 폰트의 x-높이값에 상대적인 값입니다. x-높이값은 해당 폰트의 소문자x값의 높이입니다.	p {font-size: 24pt; line-height: 3ex;}
in	인치	p {word-spacing: .15in;}
mm	밀리미터	p {word-spacing: 15mm;}
pc	picas라는 단위로 1 pica는 12 pt와 동일합니다; 따라서, 1인치에는 6 picas 가 존재합니다.	p {font-size: 20pc;}
pt	포인트 단위로 1 pt는 72분의 1 인치입니다.	body {font-size: 18pt;}
px	스크린 픽셀 단위	p {padding: 25px;}

 

example에 있는 내용을 css 파일에 작성해서 꼭!! 테스트해보세요~

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_measurement_units.htm