CSS 단위 px·%·em·rem의 차이와 올바른 사용법 완전 해설

CSS를 처음 배우기 시작하면 많은 사람이 가장 먼저 px를 사용해 크기를 지정합니다. 너비를 300px, 글자 크기를 16px, 여백을 20px처럼 쓰면 눈에 바로 결과가 보이기 때문에, 처음에는 매우 이해하기 쉽고 다루기도 편하기 때문입니다. 하지만 실제로 여러 화면 크기의 디바이스에 대응해야 하거나, 컴포넌트를 재사용하기 쉬운 구조로 설계해야 하거나, 접근성을 고려해 글자 확대에 자연스럽게 대응해야 하는 상황이 오면, 단위 선택이 갑자기 매우 중요한 주제가 됩니다. 그때 함께 등장하는 것이 %, em, rem 같은 상대 단위입니다. 즉, CSS 단위는 단순히 숫자 뒤에 붙는 표기 방식의 차이가 아니라, 레이아웃 설계와 유지보수성, 그리고 UI 전체의 유연성까지 좌우하는 핵심 설계 요소라고 볼 수 있습니다. 

특히 실무에서는 “일단 px로 쓰면 편하니까 px를 쓴다”거나, “요즘은 rem이 많이 쓰인다고 하니까 rem으로 통일한다”처럼 기준 없이 선택하면 나중에 문제가 커지기 쉽습니다. 전체 크기를 조금만 조정하고 싶어도 수정 범위가 넓어질 수 있고, 부모-자식 관계에 따라 의도하지 않은 확대와 축소가 일어날 수도 있으며, 반응형 대응을 붙이는 과정에서 구조가 점점 어색해질 수도 있습니다. 결국 단위는 단순 암기 항목이 아니라, 무엇을 기준으로 크기를 결정할 것인가를 고르는 설계 판단입니다. 이 글에서는 px, %, em, rem을 각각 따로 설명하는 데서 그치지 않고, 서로의 차이, 실제 사용 구분, 실무에서 자주 발생하는 함정, 코드 예시까지 함께 정리하여, 단위 선택을 감각이 아니라 논리로 판단할 수 있도록 풀어 보겠습니다. 

1. CSS의 단위란 무엇인가

CSS의 단위란 요소의 너비, 높이, 여백, 글자 크기 같은 값을 지정할 때 사용하는 크기의 기준입니다. 겉으로 보면 숫자 뒤에 붙는 기호처럼 보이지만, 실제로는 “이 값을 무엇을 기준으로 정할 것인가”가 단위마다 서로 다릅니다. 예를 들어 px는 고정된 길이처럼 다루기 쉬운 단위이고, %는 부모 요소를 기준으로 하며, em은 부모 요소의 폰트 크기를 기준으로 하고, rem은 루트 요소의 폰트 크기를 기준으로 합니다. 즉, 단위를 선택한다는 것은 단순히 보이는 크기를 정하는 일이 아니라, 어떤 문맥에 따라 그 크기가 함께 변해야 하는지를 선택하는 일이기도 합니다. 

이 관점이 중요한 이유는 CSS가 단순한 정적 외형 지정이 아니기 때문입니다. 실제 브라우저 환경에서는 화면 크기, 부모-자식 구조, 사용자 브라우저 설정, 확대 비율 같은 요소들이 동시에 작동합니다. 따라서 “이 요소는 부모에 따라 유연하게 늘어나야 하는가”, “이 여백은 글자 크기 변화에 맞춰 함께 커져야 하는가”, “사이트 전체 스케일은 공통 기준으로 조절하고 싶은가” 같은 질문 없이 단위를 고르면, 설계는 금방 임시 대응 중심이 됩니다. 반대로 각 단위의 기준을 이해하고 있으면, 같은 디자인이라도 훨씬 더 의도적으로 만들 수 있게 됩니다. 

1.1 고정값과 상대값의 차이

CSS 단위는 크게 고정값과 상대값으로 나누어 생각하면 이해가 쉬워집니다. px는 비교적 고정적인 길이처럼 다루기 쉬워서, 지정한 수치가 눈에 보이는 결과로 바로 연결되기 쉽습니다. 반면 %, em, rem은 모두 상대 단위이기 때문에 반드시 어떤 기준을 두고 계산됩니다. 다시 말해 고정값은 “이 값으로 정해 둔다”는 사고방식에 가깝고, 상대값은 “어떤 기준과의 관계 속에서 결정한다”는 사고방식에 가깝습니다. 이 차이는 단순한 표현 차이가 아니라, 레이아웃의 유연성과 유지보수성 전체에 큰 영향을 줍니다. 

고정값은 처음 만들 때 직관적이고 빠르다는 장점이 있습니다. 하지만 나중에 사이트 전체의 스케일을 한 단계 키우거나 줄이고 싶을 때는 불리해질 수 있습니다. 예를 들어 전체 폰트 크기를 조금 키우고 싶은데 대부분이 px로 고정되어 있으면, 수정 범위가 넓고 작업이 번거로워질 수 있습니다. 반대로 상대값은 유연하지만, 기준을 제대로 이해하지 못하면 “왜 이 값이 이렇게 계산되었는가”를 추적하기 어려워질 수 있습니다. 결국 어떤 단위가 절대적으로 더 좋다기보다, 얼마나 고정하고 싶은가, 혹은 얼마나 관계성을 주고 싶은가에 따라 선택해야 하는 것입니다. 

1.2 단위 이해가 중요한 이유

CSS 단위를 이해하는 것이 중요한 이유는 단순히 코드를 더 깔끔하게 쓰기 위해서만은 아닙니다. 실제로는 단위 선택이 레이아웃이 무너지는 방식, 컴포넌트의 재사용성, 반응형 대응의 편의성, 접근성 대응, 그리고 장기적인 유지보수 비용에까지 직접 연결됩니다. 예를 들어 모든 값을 px로 고정해 놓은 UI는 처음에는 이해하기 쉬울 수 있지만, 나중에 “전체 글자를 조금 더 키우고 싶다”는 요구가 들어오면 수정량이 커지기 쉽습니다. 반대로 em을 충분한 이해 없이 여기저기 사용하면, 부모-자식 구조 안에서 누적되어 예상하지 못한 크기 변화가 생기고, 그 결과 컴포넌트가 오히려 다루기 어려워질 수 있습니다. 

즉, 단위는 외형의 숫자를 정하는 작은 문법이 아니라, 변경하기 쉬운 구조를 만들 것인가, 깨지기 쉬운 구조를 만들 것인가를 가르는 설계 요소입니다. 이 차이를 이해하고 있으면 “왜 이곳에는 rem이 적절한가”, “왜 이 부분만은 px가 더 낫다고 볼 수 있는가” 같은 판단을 근거 있게 할 수 있습니다. 단위 선택은 사소한 스타일 문법처럼 보이지만, 실제로는 CSS 설계 전체의 품질을 좌우하는 중요한 주제입니다. 

2. px를 이해하기

px는 CSS를 배우기 시작한 사람이 가장 먼저 접하는 경우가 많은 단위입니다. 실제로 빠르게 화면을 만들고 싶을 때는 매우 편리하고, 지정한 값이 시각적으로 어떻게 보일지 상상하기 쉽기 때문에 학습 초반에 특히 많이 사용됩니다. 그래서 입문용 예제나 간단한 UI에서는 px가 자주 등장하고, 실무에서도 여전히 널리 쓰입니다. 즉, px는 오래된 단위이거나 피해야 할 단위가 아니라, 지금도 충분히 유효하고 강력한 선택지입니다. 

다만 px가 편하다고 해서 넓은 범위에 무비판적으로 사용하면, 나중에 유연성이 낮은 구조가 되기 쉽습니다. 특히 폰트 크기, 큰 여백, 레이아웃 폭까지 전부 px로 고정해 버리면 전체 스케일을 바꾸기가 어려워집니다. 그래서 px는 “쓰면 안 되는 단위”가 아니라, 어디까지를 고정하고 싶은가를 먼저 생각한 뒤에 쓰는 단위라고 이해하는 것이 적절합니다. 

2.1 px가 잘 맞는 상황

px가 특히 잘 맞는 것은 세밀한 치수의 재현성이 중요한 상황입니다. 예를 들어 보더 두께, 아이콘 크기, 그림자 오프셋, 아주 작은 간격 미세 조정 같은 요소는 상대적으로 변하기보다 일정하게 유지되는 편이 더 자연스러운 경우가 많습니다. 또한 작은 UI 부품을 다듬을 때는 1px 차이가 눈에 그대로 보이기 때문에, px의 직관성과 명확성이 큰 장점이 됩니다. 즉, px는 변하지 않는 편이 오히려 디자인 의도가 선명한 요소에 매우 잘 어울립니다. 

특히 장식적 세부 요소나 경계선, 작은 아이콘처럼 전체 타이포그래피 스케일과 반드시 함께 커질 필요가 없는 부분은 rem이나 em보다 px가 더 적절할 수 있습니다. 중요한 것은 px가 유연하지 않아서 나쁜 것이 아니라, 원래 유연할 필요가 없는 위치에서는 오히려 매우 합리적이라는 점입니다. 그래서 px는 “낡은 방식”으로 보기보다, 고정성이 장점이 되는 세부 설계용 단위로 이해하는 편이 좋습니다. 

2.1.1 코드 예시

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.icon {
  width: 24px;
  height: 24px;
}

이 예시에서는 보더, 테두리 둥근 정도, 그림자 오프셋, 아이콘 크기처럼 비교적 고정되어 있는 편이 더 자연스러운 값에 px를 사용하고 있습니다. 이런 요소들은 전체 글자 크기 변화에 따라 함께 확대될 필요가 반드시 있는 것은 아니기 때문에, px로 명확하게 지정하는 편이 실무적으로도 더 다루기 쉬운 경우가 많습니다. 

2.2 px를 많이 쓸 때 주의할 점

px의 가장 큰 주의점은, 레이아웃과 타이포그래피 전체까지 고정적인 구조로 만들기 쉽다는 것입니다. 예를 들어 제목, 본문, 여백, 컨테이너 폭까지 모두 px로 관리하면, 나중에 “전체 크기를 조금 더 키우자”거나 “접근성을 고려해 기본 글자 크기를 조정하자”는 요구가 들어왔을 때 수정 범위가 매우 넓어질 수 있습니다. 즉, px는 분명 다루기 쉬운 단위이지만, 그 편리함 때문에 전체 구조까지 고정해 버리기 쉬운 함정이 있습니다. 

또한 반응형 디자인과의 관계도 생각해야 합니다. px 자체가 반응형에 맞지 않는 것은 아닙니다. 미디어 쿼리와 함께 쓰면 충분히 반응형 UI를 만들 수 있습니다. 다만 px는 부모나 루트 기준으로 자연스럽게 변하는 단위가 아니기 때문에, 애초에 유연하게 변하는 구조를 만들고 싶을 때는 상대 단위가 더 유리한 경우가 많습니다. 결국 px의 문제는 단위 자체보다, 너무 넓은 범위를 고정값으로 결정해 버리기 쉬운 데 있습니다. 

3. %를 이해하기

%는 CSS에서 가장 대표적인 상대 단위 중 하나입니다. 특히 레이아웃 설계에서 자주 사용되며, 부모 요소에 대해 어느 정도 비율로 공간을 차지할지를 지정하기에 적합합니다. 예를 들어 “부모 너비의 50%”, “컨테이너의 100%” 같은 방식으로 설정할 수 있기 때문에, 요소 자체의 절대 크기보다 바깥 컨텍스트와의 관계 속에서 크기를 결정하고 싶을 때 매우 자연스럽습니다. 

이 단위가 중요한 이유는 반응형 디자인과의 궁합이 좋기 때문입니다. 고정 폭이 아니라 비율로 크기를 주면, 화면 크기나 부모 요소 크기가 바뀌었을 때도 더 자연스럽게 따라갈 수 있습니다. 다만 기준이 부모 요소이기 때문에, 그 문맥을 잘못 이해하면 “왜 이 크기가 되었는지”가 갑자기 파악하기 어려워질 수 있습니다. 즉, %는 유연성을 주는 대신 문맥 이해를 요구하는 단위라고 볼 수 있습니다. 

3.1 %가 잘 맞는 상황

%가 가장 잘 활용되는 대표적인 영역은 너비 설계입니다. 컨테이너 폭을 100%로 두거나, 컬럼을 50%로 나누거나, 이미지를 부모 요소에 꽉 차게 확장하는 식의 설계에서는 %가 매우 자연스럽습니다. 특히 반응형 레이아웃에서는 화면 너비나 부모 너비에 따라 유연하게 움직여야 하는 요소가 많기 때문에, %의 가치는 매우 큽니다. 다시 말해 %는 요소 단독의 절대 크기를 정하는 것보다는, 부모와의 비율 관계를 설계하는 데 강한 단위입니다. 

또한 %는 단지 폭뿐 아니라, 여백이나 특정 위치 조정에도 사용될 수 있습니다. 다만 이 경우에도 항상 “무엇을 기준으로 한 백분율인가”를 명확히 알고 있어야 합니다. %는 편리하지만 기준이 흐려지는 순간 이해와 유지보수가 모두 어려워질 수 있기 때문에, 부모 기준이 명확한 상황에서 사용하는 것이 좋습니다. 

3.1.1 코드 예시

.container {
  width: 80%;
  margin: 0 auto;
}

.card {
  width: 50%;
}

이 예시에서 .container는 부모 요소 너비의 80%를 차지하고, .card는 다시 그 안에서 50%를 차지합니다. 즉, %는 요소 하나의 크기를 독립적으로 정하기보다는, 부모와의 비율 관계 안에서 크기를 설계할 때 특히 강점을 가지는 단위라는 점이 잘 드러납니다. 

3.2 %를 사용할 때 주의할 점

%의 대표적인 함정은 무엇을 기준으로 계산되는지가 헷갈리기 쉬운 점입니다. 특히 중첩된 레이아웃 구조에서는 “이 50%가 화면 기준인지, 부모 컨테이너 기준인지”를 놓치기 쉽습니다. 게다가 너비는 비교적 직관적이지만, 높이에 %를 사용할 때는 생각처럼 작동하지 않는 경우가 많습니다. 부모 요소 쪽에 명시적인 높이가 없으면, 기대하던 기준 자체가 성립하지 않기 때문입니다. 

즉, %는 유연해서 좋은 단위이지만, 부모 관계가 분명하지 않으면 오히려 예측하기 어려운 결과를 낳을 수 있습니다. 특히 높이에 %를 쓸 때는 부모 높이가 어떻게 정의되어 있는지 반드시 확인해야 합니다. 편리함의 대가로 문맥 의존성이 높다는 점을 잊으면 안 됩니다. 

3.2.1 코드 예시

.parent {
  width: 600px;
  /* height 미지정 */
}

.child {
  width: 50%;
  height: 50%;
}

이 경우 width: 50%는 비교적 직관적으로 부모 너비의 절반으로 동작하지만, height: 50%는 부모 높이가 명시되지 않았기 때문에 기대와 다르게 동작할 수 있습니다. 따라서 %를 사용할 때는 언제나 기준이 실제로 존재하는가를 먼저 확인해야 합니다. 

4. em을 이해하기

em은 부모 요소의 폰트 크기를 기준으로 하는 상대 단위입니다. 처음 들으면 조금 어렵게 느껴질 수 있지만, 핵심은 “글자 크기 변화에 맞춰 주변 크기도 함께 자연스럽게 바뀌게 하고 싶을 때” 유용하다는 점입니다. 예를 들어 버튼 안의 글자가 커졌을 때, 버튼 안쪽 여백과 높이도 함께 약간 커지면 전체 균형이 더 좋아집니다. 이런 상황에서 em은 매우 자연스럽게 작동합니다. 즉, em은 단순한 길이 단위라기보다, 부모 타이포그래피 문맥에 연결된 단위라고 볼 수 있습니다. 

이 특성 덕분에 em은 컴포넌트 내부의 비례 관계를 설계하는 데 강합니다. 하지만 동시에 부모-자식 구조를 따라 영향을 계속 받기 때문에, 계층이 깊어질수록 의도하지 않은 누적이 생길 수도 있습니다. 그래서 em은 강력하지만, 쓰는 범위를 잘못 잡으면 오히려 복잡도를 키울 수 있는 단위이기도 합니다. 

4.1 em이 잘 맞는 상황

em이 가장 잘 맞는 것은 컴포넌트 내부의 여백이나 치수를, 그 컴포넌트 자신의 글자 크기에 맞춰 함께 조정하고 싶을 때입니다. 버튼, 배지, 카드, 입력 필드처럼 글자와 주변 간격이 하나의 덩어리처럼 보이길 원하는 요소에서는 em이 매우 자연스럽습니다. 예를 들어 padding: 0.75em 1em;처럼 설정하면 글자 크기가 바뀔 때 내부 여백도 함께 변하여 비율감이 유지됩니다. 즉, em은 컴포넌트 단위의 로컬 스케일링에 잘 어울립니다. 

또한 em의 장점은 전역 기준보다 해당 요소 주변의 로컬 문맥을 더 잘 따른다는 점입니다. 사이트 전체 기준보다 특정 부품 안에서만 균형을 맞추고 싶을 때는 rem보다 em이 더 자연스러운 경우도 많습니다. 따라서 em은 넓은 범위 전체보다, 하나의 컴포넌트 내부 비례를 세밀하게 다룰 때 특히 강한 단위라고 할 수 있습니다. 

4.1.1 코드 예시

.button {
  font-size: 1rem;
  padding: 0.75em 1.2em;
  border-radius: 0.5em;
}

이 예시에서는 버튼의 글자 크기가 바뀌면 내부 여백과 모서리 둥근 정도도 함께 스케일됩니다. 이런 방식은 버튼이라는 컴포넌트를 하나의 비례 단위로 유지하기 쉽기 때문에, em의 장점이 잘 드러나는 사용법이라고 볼 수 있습니다. 

4.2 em에서 자주 생기는 문제

em의 가장 큰 주의점은 중첩에 따른 누적입니다. 부모 요소가 1.2em이고, 그 자식도 1.2em이며, 다시 그 자식도 1.2em이면, 최종적으로는 처음 예상보다 훨씬 크게 보일 수 있습니다. 이는 em이 항상 부모의 폰트 크기를 기준으로 삼기 때문입니다. 즉, em의 상대성은 장점이기도 하지만, 동시에 깊은 계층 구조에서는 복잡성의 원인이 되기도 합니다. 

이 문제는 특히 재사용 컴포넌트가 여러 계층 속으로 들어갈 때 자주 나타납니다. 작은 범위 안에서는 편리하지만, 넓은 범위에 무심코 퍼뜨리면 “왜 이렇게 커졌지?”를 추적하기 어려워집니다. 그래서 em은 로컬에는 강하지만, 전역적으로 넓게 쓰면 제어가 어려워질 수 있는 단위로 이해하는 것이 좋습니다. 

4.2.1 코드 예시

.parent {
  font-size: 1.2em;
}

.child {
  font-size: 1.2em;
}

.grandchild {
  font-size: 1.2em;
}

이처럼 em을 깊은 계층 구조에 반복해 사용하면, 최종 폰트 크기는 처음 기준보다 훨씬 커질 수 있습니다. 그래서 em은 사용할 때마다 현재 기준이 무엇인지, 그리고 이 값이 다음 자식에게 다시 영향을 줄 것인지까지 함께 고려해야 합니다. 

5. rem을 이해하기

rem은 루트 요소, 일반적으로는 html 요소의 폰트 크기를 기준으로 하는 상대 단위입니다. em이 부모 폰트 크기를 기준으로 한다면, rem은 문서 전체의 루트 기준을 따라갑니다. 이 특징 덕분에 어떤 위치에서 사용하더라도 기준이 흔들리지 않아서, 전체 스케일을 일관되게 관리하기가 훨씬 쉽습니다. 즉, rem은 로컬 문맥보다 사이트 전체의 공통 스케일을 설계하는 데 강한 단위라고 볼 수 있습니다. 

이 성격 때문에 최근 실무에서는 폰트 크기와 여백의 상당 부분을 rem으로 설계하는 경우가 많습니다. 특히 디자인 시스템이나 컴포넌트 라이브러리를 만드는 환경에서는 전체 크기 규칙을 하나의 기준으로 정렬하기 쉽다는 점이 큰 장점입니다. 다만 rem도 만능은 아니며, 모든 것을 rem 하나로 해결하는 것이 정답은 아닙니다. 중요한 것은 rem이 전역 기준 관리에 유리한 단위라는 성격을 이해하는 것입니다. 

5.1 rem이 잘 맞는 상황

rem이 가장 잘 맞는 것은 폰트 크기, 전체 여백, 블록 간 간격처럼 사이트 전체에서 통일된 스케일 감각을 유지하고 싶은 상황입니다. 예를 들어 본문 1rem, 제목 2rem, 섹션 간 여백 3rem처럼 두면, 루트 폰트 크기만 조정해도 전체 디자인 인상을 함께 바꾸기 쉽습니다. 즉, rem은 요소 하나의 내부 비율을 맞추는 데보다는, 사이트 전체의 크기 언어를 통일하는 데 더 적합합니다. 

또한 접근성 측면에서도 장점이 있습니다. 루트 폰트 크기를 기준으로 하기 때문에 브라우저 기본 설정이나 사용자 확대 설정과의 궁합이 좋습니다. 결국 rem은 유지보수성과 접근성을 동시에 만족시키기 쉬운 단위여서 실무에서 특히 많이 사용됩니다. 

5.1.1 코드 예시

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2rem;
}

.section {
  padding: 2rem;
}

이 예시에서는 html의 16px를 전체 기준으로 두고, 본문, 제목, 여백을 모두 rem 기준으로 관리합니다. 이렇게 하면 루트 크기 하나만 바꾸어도 전체의 비율을 비교적 일관되게 조정할 수 있다는 장점이 있습니다. 

5.2 rem이 실무에서 자주 쓰이는 이유

rem이 실무에서 선호되는 큰 이유는 부모-자식 중첩의 영향을 거의 받지 않기 때문입니다. em처럼 상위 요소 크기를 따라 계속 누적되지 않아서, 1.5rem은 어디에 쓰더라도 항상 루트 기준의 1.5배라는 점을 비교적 명확하게 설명할 수 있습니다. 컴포넌트 수가 많아질수록 이런 일관성은 큰 가치가 됩니다. 즉, rem은 전체 설계를 흔들리지 않게 만들어 주는 단위입니다. 

또한 디자인 시스템과의 궁합도 좋습니다. 스페이싱, 폰트 크기, 블록 간 간격 등을 토큰처럼 관리할 때, rem은 전역 기준이 있기 때문에 훨씬 다루기 쉽습니다. 다시 말해 rem은 단순히 “요즘 많이 쓰는 단위”가 아니라, 나중에도 운영하기 쉬운 단위라는 점에서 실무적인 강점을 가집니다. 

6. px, %, em, rem의 차이

각 단위를 따로따로 이해하는 것도 중요하지만, 실무에서는 결국 “그렇다면 실제로 무엇이 어떻게 다른가”를 한눈에 비교해서 이해하는 것이 더 유용합니다. 단위별 차이를 나란히 놓고 보면, 각각이 무엇을 기준으로 하고 어떤 역할에 적합한지가 훨씬 선명해집니다. 핵심은 단위 이름 자체가 아니라, 무엇을 기준으로 계산되는가에 있습니다. 

즉, 단위 차이는 겉모습의 차이가 아니라 설계 사고방식의 차이입니다. 고정해야 하는가, 부모에 따라 움직여야 하는가, 컴포넌트 내부 문맥을 따라야 하는가, 사이트 전체 스케일에 묶여야 하는가에 따라 적절한 단위가 달라집니다. 그래서 단위 선택은 취향보다도 설계 의도를 드러내는 언어에 가깝습니다. 

6.1 단위별 기준 차이

px는 비교적 고정적인 길이로 다루기 쉬워서 명시적으로 이 정도 크기라고 결정하고 싶을 때 적합합니다. %는 부모 요소를 기준으로 하므로, 레이아웃 폭처럼 부모를 따라 유연하게 변해야 하는 요소에 어울립니다. em은 부모 폰트 크기를 기준으로 하므로 컴포넌트 내부의 비례 관계를 설계할 때 유리하고, rem은 루트 폰트 크기를 기준으로 하므로 사이트 전체 스케일을 통일하는 데 적합합니다. 즉, 단위 차이는 숫자 표현 방식의 차이보다, 무엇과의 관계로 크기를 만들 것인가의 차이라고 볼 수 있습니다. 

이 기준 차이를 이해하지 못하면 em과 rem이 모두 “글자 크기 관련 상대 단위” 정도로만 보일 수 있습니다. 하지만 실제로는 em은 로컬 문맥에 강하고, rem은 전역 문맥에 강하다는 뚜렷한 차이가 있습니다. 이 차이만 명확히 이해해도 단위 선택은 훨씬 쉬워집니다. 

6.2 실제 사용처 차이

실제 사용처로 보면 px는 보더, 아이콘, 미세 조정 같은 고정적 세부 요소에 잘 맞고, %는 레이아웃 폭과 비율 설계에 강합니다. em은 컴포넌트 내부 여백이나 내부 비율 조정에 자연스럽고, rem은 폰트 크기와 전역 여백처럼 전체 디자인 스케일을 통일하고 싶을 때 효과적입니다. 즉, 단위는 서로 배타적인 것이 아니라, 역할에 따라 함께 쓰는 것이 자연스럽습니다. 

실무에서 좋은 CSS는 단일 단위만으로 구성된 경우보다, 각 단위의 강점을 역할별로 나누어 적절히 섞어 쓴 경우가 더 많습니다. 반대로 모든 것을 하나의 단위로 해결하려 하면 무리가 생기기 쉽습니다. 예를 들어 모든 것을 rem으로 하면 작은 보더까지 전체 스케일에 끌려가고, 모든 것을 px로 하면 전체 스케일 조정이 지나치게 불편해집니다. 결국 “주력 단위”는 있을 수 있어도, “하나만 쓰면 된다”는 생각은 피하는 것이 좋습니다. 

6.2.1 단위 비교 표

6.3 같은 요소를 서로 다른 단위로 볼 때의 차이

단위 차이는 같은 목적의 속성을 서로 다른 단위로 비교해 보면 더 잘 드러납니다. 예를 들어 카드 여백을 16px, 10%, 1em, 1rem으로 설정했다고 생각해 보면, 각각이 전혀 다른 기준을 가진다는 점이 분명해집니다. 16px는 항상 일정하고, 10%는 부모 폭에 따라 달라지고, 1em은 부모 폰트 크기에 따라 달라지며, 1rem은 루트 폰트 크기에 따라 달라집니다. 즉, 똑같이 “여백”이라고 불러도, 단위가 달라지는 순간 설계 의도 자체가 완전히 달라집니다. 

이런 이해가 있으면 다른 사람이 작성한 CSS를 읽을 때도 의도를 추측하기 쉬워집니다. 단위를 보는 것만으로도 “이 부분은 전역 스케일을 따르려는구나”, “이 부분은 부모 폭에 따라 움직이려는구나”, “이건 컴포넌트 내부 비율을 맞추는 값이구나”를 읽을 수 있게 됩니다. CSS의 가독성은 클래스 이름이나 구조뿐 아니라, 단위를 얼마나 의도적으로 썼는가에 따라서도 크게 달라집니다. 

7. CSS 단위를 어떻게 구분해 써야 하는가

단위의 성격을 이해했다면, 그다음 중요한 것은 실제 설계에서 어떻게 나누어 쓸 것인가입니다. 여기서 핵심은 “무조건 이 단위가 정답”이라는 식으로 접근하지 않는 것입니다. 중요한 것은 각 상황에서 무엇을 기준으로 삼는 것이 더 자연스러운가를 판단하는 것입니다. 단위는 우열이 아니라 역할의 문제입니다. 무엇을 고정하고 싶은지, 무엇을 따라 움직이게 하고 싶은지, 어디까지를 하나의 스케일로 묶고 싶은지를 생각하면 선택 기준이 훨씬 선명해집니다. 

또한 실무에서는 글자 크기, 여백, 레이아웃 폭처럼 속성 종류마다 잘 맞는 단위가 조금씩 다릅니다. 그래서 전체를 한 번에 결정하려 하기보다, 사용 대상별로 나누어 생각하는 방식이 훨씬 실용적입니다. 결국 단위 선택은 문법 선택이 아니라, 각 속성의 역할을 어떻게 이해하고 설계할 것인가의 문제입니다. 

7.1 폰트 크기에서의 사용 구분

폰트 크기 설계에서는 사이트 전체의 일관성과 접근성을 함께 고려할 때 rem이 특히 강력합니다. 본문, 제목, 보조 텍스트 같은 레벨을 루트 기준으로 정리하면 전체 타이포그래피 스케일을 일관되게 관리하기 쉽기 때문입니다. 반면 특정 컴포넌트 안에서 글자와 주변 여백이 함께 비례해서 커져야 하는 경우에는 em도 자연스럽게 사용할 수 있습니다. 즉, 전역 타이포그래피는 rem, 로컬 컴포넌트 내부 비례 조정은 em이라는 구분이 꽤 잘 맞습니다. 

px로 폰트 크기를 지정하는 것도 물론 가능하지만, 전체 크기를 나중에 조정하기 쉬운 구조를 만들고 싶다면 상대 단위가 더 유리합니다. 특히 장기 운영에서는 “전체 글자를 조금 키우자” 같은 요구가 생각보다 자주 생기므로, 모든 폰트 크기를 px로 고정하는 것은 조금 더 신중하게 접근하는 편이 좋습니다. 결국 폰트 크기에서는 전역 기준이 필요한가, 로컬 기준이 필요한가를 먼저 판단하는 것이 핵심입니다. 

7.2 여백과 간격에서의 사용 구분

여백에서는 전체 스페이싱 시스템을 통일하고 싶다면 rem이 매우 유리합니다. 섹션 간격, 카드 간 거리, 레이아웃 그리드 간격 같은 것은 사이트 전체 기준에 맞추는 편이 유지보수하기 쉽기 때문입니다. 반대로 버튼 내부 여백이나 배지 주변 간격처럼, 해당 컴포넌트의 글자 크기와 함께 조금씩 변하는 편이 자연스러운 경우에는 em이 더 적절합니다. 즉, 바깥 구조를 만드는 여백은 rem, 내부 구성 비율을 맞추는 여백은 em으로 생각하면 정리가 잘 됩니다. 

px는 여백의 미세 조정에는 여전히 쓸 수 있지만, 여백 전체를 px로 관리하면 전역 크기 조정이 어려워집니다. 그래서 실무에서는 “국소 미세 조정은 px, 전역 간격은 rem, 컴포넌트 내부 간격은 em”처럼 역할별로 나누어 쓰는 방식이 매우 현실적입니다. 즉, 여백은 숫자보다 어느 기준과 함께 움직여야 하는가를 먼저 생각해야 합니다. 

7.3 폭과 레이아웃에서의 사용 구분

폭과 레이아웃 설계에서는 %가 특히 잘 맞습니다. 부모 요소를 기준으로 넓어지거나 좁아져야 하는 컨테이너, 컬럼, 이미지 같은 요소들은 비율로 설계하는 것이 훨씬 자연스럽기 때문입니다. 반응형 레이아웃에서는 화면 폭이 끊임없이 바뀌기 때문에, 고정 폭보다 비율 지정이 유리한 경우가 많습니다. 즉, 레이아웃은 “고정된 박스”를 만들기보다 “관계 속에서 움직이는 구조”를 만든다는 생각이 중요합니다. 

물론 모든 폭을 %로만 설계할 필요는 없습니다. 최대 너비 제한은 px나 rem으로 함께 두는 경우도 흔합니다. 예를 들어 전체 컨테이너는 width: 100%로 두되 max-width를 지정하는 식의 구조는 매우 일반적입니다. 결국 폭 설계에서는 %를 중심에 두되, 필요에 따라 px와 rem을 함께 섞는 것이 훨씬 자연스럽고 실무적입니다. 

7.3.1 용도별 추천 단위 표

8. CSS 단위와 반응형 디자인

반응형 디자인에서는 화면 크기나 디바이스 조건이 바뀌어도 UI가 자연스럽게 보여야 합니다. 그렇기 때문에 단위 선택은 생각보다 훨씬 큰 영향을 미칩니다. 모든 것을 고정값으로 설계하면 좁은 화면에서는 답답하고, 넓은 화면에서는 어색하게 느껴질 수 있습니다. 반대로 상대 단위를 적절히 사용하면 화면과 부모 구조의 변화에 더 부드럽게 대응할 수 있습니다. 즉, 반응형 설계와 단위 선택은 서로 떼어 놓고 생각할 수 없는 관계입니다. 

다만 여기서도 “상대 단위만 쓰면 된다”는 식의 단순화는 위험합니다. 반응형 대응에서도 고정값이 필요한 영역과 유연해야 하는 영역은 여전히 다릅니다. 결국 반응형에서 중요한 것은 상대 단위만 쓰는 것이 아니라, 어디는 유연해야 하고 어디는 고정돼도 괜찮은지를 먼저 구분하는 것입니다. 

8.1 반응형 대응에서 상대 단위가 중요한 이유

상대 단위가 반응형 설계에서 중요한 이유는 화면이나 부모 요소의 변화에 따라 자연스럽게 따라가게 할 수 있기 때문입니다. %는 레이아웃 폭에, rem은 전역 스케일에, em은 컴포넌트 내부 비례에 각각 잘 맞습니다. 이들을 적절히 조합하면 디바이스가 달라도 큰 위화감 없이 구성된 UI를 만들기 쉬워집니다. 즉, 반응형 설계에서는 “각 요소를 고정된 크기로 박아 넣는 것”보다 “크기들 사이의 관계를 설계하는 것”이 더 중요합니다. 

특히 최근에는 화면 크기 차이만이 아니라, 사용자 브라우저 설정과 확대 비율도 함께 고려해야 합니다. 그런 의미에서 상대 단위를 이해하는 일은 단순히 반응형 대응을 위한 것이 아니라, 더 유연한 UI 전반을 설계하는 기본기라고 볼 수 있습니다. 

8.2 반응형 설계에서 px를 어떻게 바라봐야 하는가

반응형 디자인을 한다고 해서 px를 완전히 배제할 필요는 없습니다. 보더, 아이콘, 작은 그림자, 세밀한 조정값처럼 일정한 편이 자연스러운 부분은 여전히 px가 잘 맞습니다. 문제는 px를 쓴다는 사실 그 자체가 아니라, 레이아웃 전체나 타이포그래피 전체까지 px로 고정해 버리는 데 있습니다. 즉, px는 반응형과 상충하는 단위가 아니라, 적절한 위치에서 고정성이 필요한 경우에만 써야 하는 단위입니다. 

반응형 설계에서 중요한 것은 “전부 상대값”도 아니고 “전부 고정값”도 아닙니다. 역할별로 적절한 단위를 섞는 균형 감각이 중요합니다. 이런 균형이 있으면 실무에서 훨씬 무리 없는 CSS를 만들 수 있습니다. 

8.3 단위 선택과 접근성의 관계

접근성 관점에서는 사용자가 브라우저 글자 크기를 키우거나 기본 설정을 바꾸었을 때 UI가 얼마나 자연스럽게 따라가는지가 중요합니다. rem은 루트 기준이기 때문에 이런 전역 설정 변화와 잘 어울리는 편입니다. em도 부분적으로는 유효하지만, 계층 누적을 항상 관리해야 합니다. 반면 모든 것을 px로 고정하면, 사용자 설정에 대한 유연성이 떨어질 가능성이 있습니다. 즉, 단위 선택은 디자인 취향의 문제가 아니라 사용자 경험의 문제이기도 합니다. 

접근성은 추가 기능처럼 보일 수 있지만, 사실은 기본 설계 품질의 일부입니다. 그런 의미에서 단위를 이해한다는 것은 단순히 “예쁘게 보이는 UI”를 만드는 것이 아니라, “사용하기 쉬운 UI”를 만드는 일이기도 합니다. 

9. CSS 단위에서 자주 생기는 문제

단위에 대한 이해 없이 CSS를 작성하면, 처음에는 우연히 잘 맞아 보이더라도 시간이 지나면서 문제가 드러나기 쉽습니다. 특히 em의 누적, %의 기준 오해, px 과다 사용으로 인한 유연성 부족은 실무에서 자주 보이는 대표적인 패턴입니다. 이런 문제는 작성 직후보다 운영과 확장에서 더 크게 나타나는 경우가 많습니다. 즉, 단위 문제의 특징은 처음에는 괜찮아 보여도 나중에 크게 드러난다는 데 있습니다. 

9.1 em 누적으로 인해 크기가 무너지는 문제

em은 부모 폰트 크기를 기준으로 하기 때문에, 계층이 깊어질수록 크기가 예상보다 커지거나 작아지는 일이 생길 수 있습니다. 컴포넌트 내부에서만 쓰면 매우 자연스럽지만, 여러 단계에 걸쳐 계속 사용하면 어느 시점에서 얼마만큼 누적되었는지 추적하기 어려워집니다. 특히 재사용 컴포넌트가 여러 부모 안으로 들어가는 구조에서는 이런 문제가 더 자주 드러납니다. 즉, em은 로컬 설계에는 강하지만, 넓은 범위에서 무심코 사용하면 제어가 어려워질 수 있습니다. 

이 문제를 줄이려면 em의 역할을 컴포넌트 내부 비례 조정 쪽으로 제한하고, 전체 스케일 관리에는 rem을 사용하는 식으로 역할을 분담하는 것이 좋습니다. 결국 단위를 고르는 것만큼 중요한 것은, 그 단위를 어느 범위까지 허용할 것인가를 함께 설계하는 것입니다. 

9.2 % 기준을 잘못 이해해 레이아웃이 무너지는 문제

%는 부모 요소를 기준으로 하기 때문에, 그 부모가 누구인지 잘못 이해하면 레이아웃이 쉽게 무너집니다. 특히 높이에서 height: 100%를 사용했는데 부모 쪽에 명시적인 높이가 없으면 기대처럼 작동하지 않는 경우가 매우 흔합니다. 이는 %가 나쁜 단위라서가 아니라, 기준이 되는 부모의 전제가 충족되지 않았기 때문입니다. 

따라서 %를 사용할 때는 항상 “이 값은 무엇의 몇 퍼센트인가”를 스스로 설명할 수 있어야 합니다. 그 기준을 설명할 수 없다면, 그 스타일은 나중에 읽는 사람에게도 매우 이해하기 어려운 코드가 될 가능성이 큽니다. 결국 %는 유연하지만, 기준 문맥을 늘 함께 따라다녀야 하는 단위입니다. 

9.3 px만으로 설계해 유연성이 사라지는 문제

처음부터 끝까지 px만으로 설계하면, 시각적으로는 빠르게 결과가 나올 수 있습니다. 하지만 전체 폰트 크기를 바꾸거나, 여백 체계를 조금 조정하거나, 반응형 대응을 다듬으려 할 때 구조 전체가 갑자기 뻣뻣하게 느껴질 수 있습니다. 특히 폰트와 여백을 모두 px로 고정한 구조는 전역 스케일 조정을 지역 수정의 반복으로 만들기 쉽습니다. 즉, px는 편리하지만, 모든 것에 적용하는 순간 변경 비용이 크게 올라갈 수 있는 단위입니다. 

이 문제를 피하려면 처음부터 고정해야 할 요소와, 전체 기준에 맞춰 움직여야 할 요소를 구분해서 설계해야 합니다. 단위는 나중에 대충 바꾸는 것이 아니라, 애초에 역할을 의식하며 선택해야 합니다. 결국 단위 설계는 “보이는 숫자를 쓰는 일”이 아니라, “변경되었을 때도 버틸 수 있는 구조를 만드는 일”입니다. 

마무리

CSS 단위는 겉으로 보기에는 작은 구현 디테일처럼 보일 수 있지만, 실제로는 레이아웃 설계의 전제와 직접 연결된 중요한 요소입니다. 어떤 단위를 고르느냐에 따라 요소들 사이의 관계성, 나중에 수정할 때의 영향 범위, 사용자 환경 변화에 대한 대응력이 크게 달라집니다. 단위를 충분히 이해하지 않은 채 스타일을 작성하면, 처음에는 완성된 것처럼 보여도 나중에 “왜 여기서만 깨지지?”, “이걸 고치면 왜 다른 곳이 틀어지지?” 같은 불안정성이 자주 나타납니다. 따라서 단위 이해는 외형 미세 조정 기술이 아니라, 오래 버티는 CSS 구조를 만들기 위한 설계 지식으로 보는 편이 훨씬 정확합니다. 

또한 px, %, em, rem 중 어느 하나만이 정답이 되는 경우는 드뭅니다. 중요한 것은 각 단위의 성격을 이해한 뒤, “어디까지 영향을 주고 싶은가”, “무엇을 기준으로 움직이게 하고 싶은가”를 생각하며 구분해 쓰는 것입니다. 예를 들어 레이아웃의 뼈대는 유연하게 유지하면서, 내부 컴포넌트의 비율은 따로 조정하고, 세밀한 장식 요소는 고정된 치수로 두는 식의 설계가 가능해지면, UI는 훨씬 조정하기 쉽고 재사용하기 쉬워집니다. 단위 선택은 스타일 작성의 일부가 아니라, 컴포넌트와 레이아웃 설계의 일부입니다. 

처음에는 어떤 상황에서 어떤 단위를 써야 할지 헷갈릴 수 있습니다. 하지만 구현과 수정 경험을 쌓다 보면 “이 경우에는 이 단위가 가장 자연스럽다”는 감각이 조금씩 생기게 됩니다. 그 과정에서 중요한 것은 막연히 쓰는 것이 아니라, 왜 지금 이 단위를 선택했는가를 설명할 수 있는 상태를 목표로 하는 것입니다. 단위를 의도적으로 고를 수 있게 되면, UI는 단지 예쁘게 보이는 수준을 넘어서, 변경과 확장, 운영까지 포함해 훨씬 다루기 쉬운 구조가 됩니다. CSS 단위는 작아 보이지만, 그 선택의 누적이 최종 품질에 큰 차이를 만듭니다.