[CSS] 레이아웃의 단위

---

[CSS] 레이아웃의 단위

By i!kohong(아이코홍)

---

• em(em-height)
  → em과 유사하게 ex(x-height)가 있으며, 이 두 단위는 상속받는 엘리먼트에 대해 상대 크기로 계산됨
• %(percentage)
  → em과 유사하게 지정되거나 상속받는 엘리먼트의 상대적인 백분율 크기를 의미한다.
• pt(point)
  → 1pt는 0.72inch와 동일한 절대크기이다.
• px(pixel)
  → 화면 해상도를 측정하는 dot 단위와 동일하다.

---

em, px, % 장단점

---

단위	장점	단점
em	■ 아주 세밀한 2차원의 레이아웃 그리드를 만드는데 적합 ■ 문서 컨테이너에 대해 사용될 경우, body 부분의 사이즈가 확대/축소됨에 따라 레이아웃의 크기도 확대/축소되게 만들수 있음   ■ 화면에 보여질 엘리먼트의 크기를 쉽게 예측 할 수 있음	□ 비례 단위(Fractional unit)를 사용하면 레이아웃이 브라우저에 따라 약간씩 늘어나거나 줄어드는 차이가 있음 □ 최적의 결과를 얻기 위해서는, 문서 내의 모든 font-size와  line-height 속성에 대해 명시적이고 예측 가능한 값을 정해주어야 함
%(Percent)	■ 완전히 유동적인 레이아웃에 가장 적합 ■ 같은 크기의 칼럼을 만들기에 가장 쉬움	□ 레이아웃이 흐트러지는 것을 막기 위해서 추가적으로 컨테이너 엘리먼트가 더 필요함 □ 심각할 정도로 넓거나 좁은 엘리먼트가 생길 수 있음   □ 문맥에 따라 레이아웃 결과가 좌우됨
px(Pixels)	■ 레이아웃에 대한 제어권을 가장 많이 가질 수 있음 ■ 레이아웃에 대한 대부분의 브라우저 간의 차이(브라우저에 따라 다르게 보이는 현상)을 없앨수 있음	□ 접근성과 크로스-미디어 지원을 위해서는 가장 적합하지 못함 □ 레이아웃이 깨질 여지가 가장 많음

---

단위 환산표

---

Points(pt)	Pixels(px)	Ems(em)	Percent(%)
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%