em과 rem

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

em과 rem 본문

<style>

em과 rem

yo-u-loo 2026. 3. 23. 10:52

🟢 상대 단위 (em, rem)

웹 디자인에서 유연성을 만드는 상대 단위.

1️⃣ em (Element)

부모 요소의 font-size를 기준으로 계산되는 단위.

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em; /* 20px × 2 = 40px */
}

계산 방식: 현재 요소의 font-size를 1로 본다.
특징: 중첩해서 사용할 경우 부모의 크기에 따라 자식의 크기가 계속 곱해져서 계산된다.
용도: 특정 요소 내부의 여백(padding, margin)을 글자 크기에 비례해서 조절하고 싶을 때 유용하다.

2️⃣ rem (Root em)

HTML의 root 요소(<html>)의 font-size를 기준으로 계산.

html {
  font-size: 16px;
}

.box {
  font-size: 2rem; /* 16px × 2 = 32px */
}

계산 방식: 브라우저의 기본 설정값(보통 16px)을 1로 봅다.
특징: 어디에서 사용하든 기준점이 항상 동일해서 예측 가능하고 유지보수가 쉽다.
용도: 전체적인 레이아웃이나 폰트 크기를 일관성 있게 관리할 때 가장 많이 쓰인다.

📍 POINT 📍

✔️ rem을 사용하면 사용자가 브라우저 설정에서 글자 크기를 키웠을 때 웹사이트 전체가 그에 맞춰 유동적으로 변하므로 웹 접근성에 좋다. ✔️

✔️ 실무에서는 계산의 편리함을 위해 rem을 기본 단위로 사용하고, 버튼의 여백처럼 글자 크기에 딱 붙어서 변해야 하는 부분에만 em을 섞어서 쓴다. ✔️

📋 em vs rem 핵심 비교표 📋

구분	em	rem
기준점	자신 혹은 부모의 font-size	<html>의 font-size
특징	중첩될수록 크기가 누적됨	페이지 어디서나 동일한 기준
예측 가능성	낮음 (복잡한 구조에서 계산 어려움)	높음 (항상 루트 기준)
주요 용도	요소 내부의 비례적인 간격 조정	전체적인 폰트 및 레이아웃 크기

⚙️ 실전 예제 코드: 중첩에 따른 차이 확인 ⚙️

<style>
  html { font-size: 16px; } /* 루트(Root) 설정 */

  .parent { font-size: 20px; } /* 부모 설정 */

  /* 1. em 사용: 부모인 20px의 2배 = 40px */
  .child-em { 
    font-size: 2em; 
    padding: 1em; /* 자기 자신의 폰트 크기(40px)만큼 패딩 */
  }

  /* 2. rem 사용: 루트인 16px의 2배 = 32px */
  .child-rem { 
    font-size: 2rem; 
    padding: 1rem; /* 루트 폰트 크기(16px)만큼 패딩 */
  }
</style>

<div class="parent">
  부모 (20px)
  <div class="child-em">나는 em (40px)</div>
  <div class="child-rem">나는 rem (32px)</div>
</div>

'<style>' 카테고리의 다른 글

Media query (미디어 쿼리) (0)	2026.03.23
RWD Image 반응형 이미지 (0)	2026.03.23
Viewport (뷰포트) (0)	2026.03.23
RWD (Responsive Web Design) 반응형 웹 디자인 (0)	2026.03.23
gradients 함수 (0)	2026.03.20

'<style>' Related Articles

無제

em과 rem 본문

em과 rem

🟢 상대 단위 (em, rem)

'<style>' 카테고리의 다른 글

티스토리툴바