CSS에서 px, em, rem은 각각 무엇을 기준으로 크기를 정하나요?

이렇게 답해 보세요 (핵심 답변)

px은 CSS 참조 픽셀 기준이고, rem은 루트(html) 요소의 글꼴 크기, em은 해당 요소 또는 부모의 계산된 글꼴 크기를 기준으로 비례하는 단위입니다. 특히 font-size에 em을 쓰면 부모 글꼴 크기를 따라가서 중첩될 때 크기가 곱해질 수 있는 반면, rem은 문서 전체에서 일관된 기준을 유지합니다. 그래서 전체 레이아웃 여백이나 본문 글꼴 크기는 rem으로 잡고, 버튼 내부 패딩처럼 글자 크기에 맞춰 함께 커져야 하는 부분에는 em을 선택하는 편입니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. em을 여러 단계로 중첩하면 부모의 글꼴 크기가 계속 누적되어 예상보다 글자가 커지거나 작아질 수 있습니다.
2. 반응형과 접근성은 특정 단위 하나만으로 결정되지 않으며, 브라우저 확대나 긴 텍스트에서도 레이아웃이 깨지지 않는지 함께 확인해야 합니다.

면접에서 자주 하는 실수

테두리 두께 등에 px을 사용했다고 해서 곧바로 접근성 실패라고 단정하지 않는 것이 좋습니다.