CSS에서 px, em, rem은 가장 널리 사용되는 세 가지 단위로 각각 고유한 특성과 사용 사례를 가지고 있습니다. 이 단위들의 차이점을 이해하는 것은 개발 과정에서 더 적절한 선택을 하고 페이지의 제어성, 호환성, 반응형 디자인 능력을 향상시키는 데 도움이 됩니다. 본문에서는 이 세 가지 단위의 차이점을 자세히 살펴보고 최적의 사용 사례를 소개합니다.

px 단위: 픽셀

px(픽셀)는 CSS에서 가장 일반적으로 사용되는 단위로, 화면의 물리적 픽셀을 나타냅니다. 각 px는 디스플레이 장치의 단일 픽셀을 의미합니다. 이것은 절대 단위로, 브라우저의 확대/축소나 뷰포트의 변화에 따라 값이 변경되지 않습니다.

특징:

• 고정된 크기: px 단위의 크기는 고정되어 있으며, 부모 요소나 다른 외부 요인에 따라 변하지 않습니다.
• 정밀한 디자인에 적합: px를 사용하면 디자이너는 요소의 크기를 정밀하게 제어할 수 있으며, 높은 정밀도가 필요한 레이아웃에 적합합니다.

사용 사례:

• 정밀한 제어: 페이지 내 요소를 정밀하게 제어해야 할 때, 예를 들어 버튼의 크기, 이미지 크기, 폼 입력창의 높이 등에 사용합니다.
• 고정된 디자인: 페이지 디자인이 고정된 크기를 유지해야 할 때 (예: 특정 정적 페이지 디자인), px를 사용하면 요소 크기가 다른 요인에 의해 영향을 받지 않습니다.

예제:

.main-section {
    width: 800px;
    height: 500px;
}

.action-button {
    width: 150px;
    height: 50px;
}

이 예제에서 .main-section의 너비와 높이는 각각 800px와 500px로 고정되어 있으며, .action-button의 크기도 150px x 50px로 고정되어 있습니다.

em 단위: 부모 요소 기준 상대 단위

em은 상대 단위로, 현재 요소의 폰트 크기를 기준으로 합니다. 요소의 font-size를 em으로 설정할 때, 부모 요소의 폰트 크기를 기준으로 계산됩니다. 이는 부모 요소의 폰트 크기가 변경되면 em을 사용하는 자식 요소의 크기도 함께 변경된다는 의미입니다.

특징:

• 상속성: em 값은 현재 요소의 폰트 크기를 기준으로 계산되므로, em은 부모 요소의 폰트 크기를 상속받습니다.
• 계층 관계 영향: 깊게 중첩된 요소에서 em은 부모 요소의 폰트 크기에 의존하며, 예상치 못한 결과가 발생할 수 있습니다. 예를 들어, 부모 요소의 폰트 크기가 이미 2em이라면, 자식 요소의 폰트 크기는 2em의 2배가 됩니다.

사용 사례:

• 상대적 폰트 크기: em은 부모 요소의 폰트 크기에 따라 자식 요소의 크기를 조정해야 할 때 (예: 폰트 크기, 여백, 내부 여백 등)에 적합합니다.
• 부분적 조정: 특정 요소 내에서 상대적인 조정을 수행하고자 할 때 em은 매우 적합한 선택입니다.

예제:

.content-wrapper {
    font-size: 14px;
}

.headline {
    font-size: 2.5em; /* 35px */
}

.form-input {
    padding: 0.8em; /* 11.2px */
}

이 예제에서 .headline과 .form-input의 폰트 크기와 패딩은 .content-wrapper의 폰트 크기 14px를 기준으로 계산됩니다. 따라서 .headline은 35px, .form-input의 패딩은 11.2px가 됩니다.

rem 단위: 루트 요소 기준 상대 단위

rem 역시 상대 단위로 em과 유사하지만, 계산 기준이 다릅니다. rem은 루트 요소(html 요소)의 폰트 크기를 기준으로 계산됩니다. em과 달리 rem은 부모 요소의 폰트 크기에 영향을 받지 않고 항상 루트 요소의 폰트 크기를 기준으로 합니다.

특징:

• 통일된 기준: rem은 항상 루트 요소(일반적으로 html 태그의 font-size)를 기준으로 계산되므로 일관성을 보장하고, 계층 중첩으로 인한 크기 누적 문제를 방지합니다.
• 유지보수 용이성: rem이 루트 요소의 폰트 크기를 기준으로 사용하기 때문에, 루트 요소의 폰트 크기를 수정하여 전체 페이지의 레이아웃과 폰트 크기를 통일하게 조정할 수 있어 반응형 디자인에서 매우 유용합니다.

사용 사례:

• 전역 레이아웃 조정: rem은 전역 스타일 설정에 적합하며, 특히 반응형 디자인에서 루트 요소의 폰트 크기를 수정하여 페이지 모든 요소의 크기를 통일하게 관리할 수 있습니다.
• 반응형 폰트: 다양한 장치에서 페이지 폰트가 자동으로 적응하도록 하고 싶을 때 rem이 이상적인 선택입니다.

예제:

html {
    font-size: 18px; /* 1rem = 18px */
}

.page-header {
    font-size: 2rem; /* 36px */
}

.body-text {
    font-size: 1.2rem; /* 21.6px */
}

이 예제에서 .page-header와 .body-text의 폰트 크기는 루트 요소의 font-size(18px)를 기준으로 계산되어, 페이지 폰트의 통일성과 유연성을 보장합니다.

px, em, rem 비교 요약

최적 사용 가이드

1. px 사용 시기:

• 요소의 크기를 정밀하게 제어해야 할 때 px를 사용합니다.
• 고정 너비의 요소(버튼, 아이콘, 입력창 등)를 디자인할 때 px가 가장 적합한 선택입니다.

2. em 사용 시기:

• 특정 요소의 크기가 부모 요소에 따라 동적으로 조정되기를 원할 때 em을 사용합니다.
• em은 주로 폰트 크기, 여백, 내부 여백 등 속성의 상대 설정에 사용되며, 특히 컴포넌트나 모듈 내부에서 유용합니다.

3. rem 사용 시기:

• 페이지의 폰트와 레이아웃을 전역적으로 통일 조정해야 할 때 rem을 사용합니다.
• rem은 반응형 디자인에서 매우 효과적이며, 루트 요소의 폰트 크기를 조정하여 전체 페이지의 비율을 쉽게 조정할 수 있습니다.