[CSS] px, em, rem

1️⃣  px (픽셀) – 고정된 크기

• 절대적인 단위로, 설정한 값이 변하지 않습니다
• 화면 크기가 바뀌어도 그대로 유지됩니다

✔ 사용 예시

div {
  width: 100px; /* 항상 100px */
}

 

📌 언제 사용할까?
→ 아이콘, 버튼 크기 등 고정된 크기가 필요한 경우

2️⃣  em – 부모 요소를 기준으로 변하는 크기

• 상대적인 단위로, 부모 요소의 font-size를 기준으로 크기가 정해집니다
• 부모의 글자 크기가 바뀌면, em으로 설정된 요소 크기도 함께 변합니다

✔ 사용 예시

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10em; /* 20px × 10 = 200px */
}

 

📌 언제 사용할까?
→ 부모 요소에 따라 크기가 조절되어야 하는 내부 요소들 (예: 버튼 안의 글자 크기)

 

3️⃣  rem – 항상 최상위 요소(html)를 기준으로 변하는 크기

• rem의 r은 root(루트, 최상위 요소)를 의미합니다
• em과 비슷하지만, 항상 html의 font-size를 기준으로 크기가 결정됩니다

✔ 사용 예시

html {
  font-size: 16px;
}

div {
  font-size: 20px;
  width: 10rem; /* 16px × 10 = 160px */
}

 

📌 언제 사용할까?
→ 페이지 전체에서 일관된 크기를 유지하고 싶을 때 (예: 기본 글자 크기)

 

🚀  결론 : 언제 px, em, rem을 사용할까?

✔ px → 크기를 절대적으로 고정해야 할 때
✔ em → 부모 요소의 크기에 따라 유동적으로 변해야 할 때
✔ rem → 페이지 전체에서 일관된 크기를 유지할 때

 

📌 실전에서 많이 쓰는 방법:

• 글자 크기 (font-size) → rem 사용
• 여백 (padding, margin) → em 사용
• 아이콘, 특정한 크기가 필요한 요소 → px 사용