CSS에서 크기를 정의할 때 사용하는 단위는 다양합니다. 그중에서도 em과 rem은 반응형 디자인에서 자주 사용되는 대표적인 상대 단위입니다.
이 두 단위는 각각의 특성과 사용 목적에 따라 적절히 선택해야 효율적인 디자인을 구현할 수 있습니다.
이번 포스팅에서는 CSS 단위 em과 rem의 차이점 완벽 정리 위해 em과 rem의 차이를 명확히 이해하고, 언제 어떤 상황에서 사용하는 것이 적절한지 자세히 알아보겠습니다.
CSS 상대 단위란?
CSS에서 사용하는 단위는 크게 절대 단위와 상대 단위로 나눌 수 있습니다. 절대 단위는 px, cm, mm처럼 고정된 크기를 의미하며, 상대 단위는 요소나 환경에 따라 크기가 변하는 유동적인 단위를 말합니다.
- 절대 단위: 고정된 크기를 가지며, 화면 크기나 부모 요소의 영향을 받지 않습니다.
- 상대 단위: 다른 요소나 환경(예: 부모 요소, 루트 요소 등)을 기준으로 크기가 결정됩니다.
상대 단위 중에서도 em과 rem은 폰트 크기와 관련하여 가장 많이 사용됩니다. 이 두 단위는 반응형 웹 디자인에서 중요한 역할을 하며, 서로 다른 기준점을 가지고 동작합니다.
em과 rem의 차이점
1. 참조 기준
em: 가장 가까운 부모 요소의 폰트 크기를 기준으로 계산됩니다.rem: 루트 요소(<html>)의 폰트 크기를 기준으로 계산됩니다.
2. 중첩 시 동작
em: 부모 요소에 따라 값이 누적적으로 변합니다. 따라서 중첩된 구조에서는 예상치 못한 크기가 적용될 수 있습니다.rem: 항상 루트 요소를 기준으로 하기 때문에 중첩 여부와 관계없이 일관된 크기를 유지합니다.
3. 사용 사례
em: 부모 요소에 상대적으로 크기를 조정해야 할 때 적합합니다.rem: 프로젝트 전반에서 일관된 크기를 유지해야 할 때 적합합니다.
예제를 통해 이해하기
1. em 사용 예제
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 1.5 × 16px = 24px */
}이 코드에서 .child의 폰트 크기는 .parent의 폰트 크기(16px)를 기준으로 계산됩니다. 만약 .parent의 폰트 크기가 변경되면 .child도 비례하여 크기가 변합니다.
중첩된 경우
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 24px */
}
.grandchild {
font-size: 2em; /* 2 × 24px = 48px */
}.grandchild의 폰트 크기는 .child를 기준으로 계산되므로, 최종적으로 48px이 됩니다. 이처럼 em은 중첩될수록 값이 누적되어 예측하기 어려울 수 있습니다.
2. rem 사용 예제
html {
font-size: 16px;
}
.element {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}여기서 .element의 폰트 크기는 항상 <html>의 폰트 크기(16px)를 기준으로 계산됩니다. 따라서 부모 요소나 중첩 구조에 영향을 받지 않고 일관된 값을 유지합니다.
중첩된 경우
html {
font-size: 16px;
}
.parent {
font-size: 20px;
}
.child {
font-size: 2rem; /* 항상 2 × 16px = 32px */
}.child는 <html>을 기준으로 계산되므로, .parent의 폰트 크기(20px)는 영향을 미치지 않습니다.
장단점 비교
| 특징 | em | rem |
|---|---|---|
| 참조 기준 | 가장 가까운 부모 요소의 폰트 크기 | 루트 요소(<html>)의 폰트 크기 |
| 중첩 시 동작 | 부모 요소에 따라 값이 누적됨 | 항상 일정한 값을 유지 |
| 유연성 | 부모 요소에 따라 유동적으로 조정 가능 | 전역적으로 일관된 스타일 유지 가능 |
| 사용 사례 | 모듈형 디자인, 컴포넌트 내부에서 유동적인 스타일 적용 | 기본 폰트 크기나 전역 스타일 설정 시 적합 |
언제 무엇을 사용할까?
1. em을 사용하는 경우
- 컴포넌트 내부에서 부모 요소에 따라 유동적으로 스타일을 조정해야 할 때.
- 특정 컨텍스트 내에서 상대적인 비율로 스타일을 정의해야 할 때.
- 예를 들어, 버튼이나 카드 컴포넌트 내부에서 패딩이나 마진을 설정할 때 유용합니다.
2. rem을 사용하는 경우
- 전체적인 레이아웃이나 전역 스타일에서 일관성을 유지해야 할 때.
- 기본 폰트 크기, 여백, 패딩 등을 설정할 때.
- 예를 들어, 글로벌 디자인 시스템에서 모든 텍스트와 여백을 통일되게 관리하고 싶을 때 적합합니다.
실무에서의 팁
- 루트 폰트 크기 설정하기
html {
font-size: 16px; /* 기본값 설정 */
}대부분 브라우저의 기본 폰트 크기는 16px입니다. 이를 기준으로 rem 값을 계산하면 쉽게 반응형 디자인을 구현할 수 있습니다.
- 혼합 사용하기
- 전역적으로는
rem을 사용해 일관성을 유지하고, 컴포넌트 내부에서는em을 사용해 유연성을 확보하는 방식이 효과적입니다. - 예:
html { font-size: 16px; } .card { font-size: 1rem; /* 전역 설정 */ padding: 1em; /* 카드 내부에서 부모 폰트를 기준으로 설정 */ }
- 미디어 쿼리와 함께 사용하기
- 반응형 웹 디자인에서는 미디어 쿼리를 활용해 루트 폰트 크기를 조정하면 전체적인 스케일링 효과를 얻을 수 있습니다.
- 예:
html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 14px; } }
맺음말
지금까지 em과 rem의 차이와 언제 어떤 상황에서 사용하는 것이 적절한지 면밀히 살펴보았습니다.
CSS에서 em과 rem은 각각 다른 상황에 맞게 활용할 수 있는 강력한 도구입니다.
em: 부모 요소를 기준으로 상대적인 값을 설정해야 할 때 유용하며, 모듈형 디자인에 적합합니다.rem: 루트 요소를 기준으로 일관된 스타일을 유지해야 할 때 적합하며, 전역적인 스타일 관리에 효과적입니다.
두 단위를 혼합하여 사용하면 더욱 유연하고 효율적인 CSS 코드를 작성할 수 있습니다. 프로젝트 요구사항에 따라 적절히 선택하여 최적화된 반응형 디자인을 구현해 보시기 바랍니다.
