CSS 단위는 언제 어떤 것을 사용해야 하나요?

Question

Accepted Answer

CSS 단위는 **절대(absolute)** 단위(고정)와 **상대(relative)** 단위(무언가에 따라 비례)로 나뉩니다. 잘 선택하는 것이 반응형이고 접근성 있는 레이아웃의 핵심입니다.

## 절대 단위

```css
.x { width: 100px; }  /* px — 고정 픽셀; 예측 가능하고 비례하지 않음 */
```

비례하지 말아야 할 것(border, 작은 고정 디테일)에는 `px`를 사용하세요.

## 상대 단위 — 중요한 것들

```css
font-size: 1.5rem;  /* rem — 루트(html) font-size 기준. 일관적. */
font-size: 1.2em;   /* em — 부모의 font-size 기준. 누적됨! */
width: 50%;         /* % — 부모 크기 기준 */
width: 50vw;        /* vw — 뷰포트 너비의 50% */
height: 100vh;      /* vh — 뷰포트 높이의 100% */
```

## rem vs em — 결정적인 차이

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (부모 기준) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (루트 기준) */
```

`em`은 중첩을 통해 **누적**되어(자식의 자식이 곱해짐) 예상치 못하게 폭주할 수 있습니다. `rem`은 항상 루트를 참조하므로 예측 가능합니다 — font-size와 spacing에 적합한 선택입니다. 로컬 폰트에 상대적인 크기를 *원할* 때(예: 텍스트에 비례해 커지는 버튼 padding)는 `em`을 사용하세요.

## 상대 단위가 접근성에 중요한 이유

```css
font-size: 16px;   /* ❌ 사용자의 브라우저 font-size 설정을 무시함 */
font-size: 1rem;   /* ✅ 사용자가 기본 크기를 키우면 함께 비례 */
```

타이포그래피에 `rem`을 사용하면 더 큰 기본 폰트를 설정한 사용자를 존중하게 됩니다 — `px`가 깨뜨리는 실질적인 접근성 이점입니다.

## 왜 중요한가

올바른 단위는 레이아웃을 반응형이고 접근성 있게 만듭니다. 타이포그래피/spacing에는 `rem`(예측 가능 + 사용자 설정 존중), 유동적 레이아웃에는 `%`/`vw`/`vh`, 고정 디테일에는 `px`, 로컬 상대 크기에는 `em`을 사용하세요.

최신 뷰포트 단위(`dvh`, `svh`)는 모바일 주소창 높이 문제도 해결합니다.