CSS 단위 완벽 이해하기: px, em, 백분율(%)의 차이점

CSS에서 크기를 지정할 때 사용하는 대표적인 단위로는 px, em, 백분율(%)이 있습니다. 각 단위는 서로 다른 방식으로 값을 계산하며, 상황에 맞게 선택하는 것이 반응형 웹 디자인과 유지보수에 매우 중요합니다.

1. px (픽셀) — 절대 단위

px는 화면의 픽셀을 기준으로 크기를 측정하는 절대 단위입니다. 지정한 값 그대로 화면에 표시되기 때문에 예측이 쉽고 정밀한 조절이 가능합니다.

div {
    padding: 40px;
}

위 예제에서는 div 요소의 안쪽 여백(padding)이 모든 방향으로 40픽셀 적용됩니다.

2. em — 폰트 크기 기준의 상대 단위

em은 현재 요소의 글꼴 크기(font-size)를 기준으로 하는 상대 단위입니다. em 단위 하나는 해당 글꼴 크기와 같으므로, 글꼴을 12pt로 지정했다면 1em은 12pt가 되고, 2em은 24pt가 됩니다.

p {
    letter-spacing: 4em;
}

위 예제에서는 글자 사이 간격(letter-spacing)이 현재 글꼴 크기의 4배로 설정됩니다. 부모 요소의 글꼴 크기에 따라 값이 달라지므로, 전체적인 타이포그래피 비율을 일관되게 유지하고 싶을 때 유용합니다.

3. 백분율(%) — 부모 요소 기준의 상대 단위

% 단위는 다른 값, 주로 부모(감싸고 있는) 요소의 크기를 기준으로 백분율로 크기를 정의합니다. 레이아웃이나 줄 간격처럼 유연하게 확장·축소되어야 하는 요소에 적합합니다.

p {
    font-size: 14pt;
    line-height: 80%;
}

위 예제에서는 글꼴 크기가 14pt로 고정되고, 줄 높이(line-height)는 해당 글꼴 크기의 80%인 약 11.2pt로 설정됩니다.

정리: 어떤 단위를 언제 사용해야 할까?

- px: 테두리, 아이콘 크기 등 정확한 픽셀 값이 필요한 경우
- em: 글꼴 크기에 비례해 조정되어야 하는 여백이나 자간 등
- %: 부모 요소에 따라 유동적으로 변해야 하는 너비, 높이, 줄 간격 등

세 단위의 특성을 잘 이해하고 조합하여 사용하면, 다양한 화면 환경에서도 안정적이고 일관된 스타일을 구현할 수 있습니다.