단위 (unit)

length units

상대값, 절대값 두 가지의 형태가 있고, 상대값은 상위에 비례한 값을 지정합니다. "+", "-"를 사용할 수 있고 지정하지 않으면 기본으로 "+"가 지정됩니다. 예를 들면, 12pt, 2em, -100px

하위는 상위의 값이 절대값을 가졌을 때 상위값을 상속받을 수 있지만, 상대값(relative)을 가진 상위의 값은 상속받을 수 없습니다.

BODY {font-size:12pt; text-indent:3em;}
H1 {font-size:15pt;}
H1에서의 text-indent는 36pt이다. 45pt가 아니다. (em은 font의 크기다)

상대 치수

• em -- 택의 글꼴 자신의 크기이다. font-size를 지정한 element에서 font-size의 값을 가진다. 주의할 점은 font-size:숫자em; 에서 font-size에 지정한 em 단위는 상위의 값을 참조한다.
• ex -- x-height. element font의 절반 크기이다. 소문자 x의 크기이다.
• px -- 화면 해상도 크기의 단위이다.

em : 지정한 글꼴의 font-size 값입니다. 지정한 글꼴이 없다면 기본 글꼴의 크기가 됩니다. 주로, 대문자 M의 폭과 넓이입니다. 많이 사용하는 곳은 글자와 상대적인 크기의 수평, 수직 거리를 지정하는데 사용합니다.

H1 { line-height: 1.2em }

는 H1 택 글꼴의 1.2배 크기로 줄간격을 지정합니다.

H1 { font-size: 1.2em }

는 상위에서 상속받은 font-size 값의 1.2배입니다.

px : 출력하는 기기의 해상도에 따르는 단위입니다. 기기는 주로 PC 모니터입니다. 그래서, 해상도에 따라서 글자의 크기가 달라집니다. 고해상도에서 더 작게 보입니다. 프린터로 출력할 때에도 프린터의 DPI(dots pre Inch)에 따라서 달라집니다.

% : 수치와 % 단위로 지정합니다. font-size에 지정하면 font-size에서 상대적인 값이고 width에 지정하면 상위의 width값에 상대적인 값입니다.


일반적으로 color 같은 요소처럼 상위에 지정한 값은 하위에도 상속이 되지만 상위가 상대값을 가지고 있다면 하위에게 상속이 되지 않습니다.

body { font-size: 15px; line-height: 2em;}
p { font-size: 20px; }

로 하면 <P> 택의 줄간격은 30px가 됩니다. 40px가 아닙니다. P 택의 상위 body가 line-height의 값이 상대값인 2em을 지정하여서 P 택에는 line-height: 2em; 이 상속이 안됩니다. 그리고 body의 모든 글자와 P 택의 글자도 포함하여 font-size: 15px;의 2 배인 30px로 line-height를 지정합니다.

절대 치수

• pt -- points (1/72 inch)
• pc -- picas (12 point)
• in -- inches
• mm -- millimeters
• cm -- centimeters

pt : OS에 따라서 크기가 다릅니다. window에서 96px per inch 이고 Mac에서 72px per inch 입니다.

color unit

• color 이름이나 6개의 16진수 값으로 RGB 수치값을 지정할 수 있다. 6개의 값에서 처음 두개는 red, 다음 두개는 green, 마지막 두개는 blue이다.
• aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 의 기본 16색이 있고 다른 색도 사용가능합니다.

Example	Meaning
#f00	#rgb
#ff0000	#rrggbb
rgb(255, 0, 0)	RGB as integers 0-255
rgb(100%, 0%, 0%)	RGB as percentages 0-100%