em과 rem을 사용하면 좋은 점

요즘 반응형 웹을 만들면서 em과 rem을 배운 지식들을 포스팅해 볼 것입니다.

 

 

📌 em과 rem을 사용하는 이유

사용자가 임의로 브라우저의 폰트 크기를 변경했을 때, 그 설정에 맞게 웹의 폰트 크기도 변해야 합니다.

그러기 위해 사용하는 것이 em과 rem입니다.

(px은 크기가 고정적이라서 저는 반응형 웹을 만들 때 사용하지 않고 있습니다.)

(폰트 크기에만 사용하는 것이 아니라 크기를 변경할 때 다 사용 가능합니다.)

 

 

 

📌 em이란

부모의 폰트 크기에 영향을 받는 것이 em입니다.

예를 들어, 부모의 폰트 크기가 16px입니다. 이때 자식 폰트에 2em을 사용하면 16 * 2 = 32px이 됩니다.

<div class="container">		<!-- font-size: 2em; -->
  <h1>가나다라1</h1>
  <div class="container">	<!-- font-size: 2em; -->
    <h1>가나다라2</h1>
    <div class="container">	<!-- font-size: 2em; -->
      <h1>가나다라3</h1>
    <div>
  <div>
<div>

em 결과

 

 

 

📌 rem 이란

브라우저 폰트 크기에만 영향을 받는 것이 rem입니다.

em과 다른 점이라고 할 수 있는 rem의 특징입니다.

<div class="container">		<!-- font-size: 2em; -->
  <h1>가나다라1</h1>
  <div class="container">	<!-- font-size: 2em; -->
    <h1>가나다라2</h1>
    <div class="container">	<!-- font-size: 2em; -->
      <h1>가나다라3</h1>
    <div>
  <div>
<div>

rem 결과

 

 

 

📌 em과 rem은 언제 사용하면 가장 좋을지

em은 상대적으로 변해야 하는 요소에 사용하면 좋습니다.

- 글씨 크기에 따라 padding을 변경시켜야 할 때, padding에 em을 사용하면 됩니다.

 

rem은 다른 요소의 크기와 상관없이 항상 고정적으로 사용해야 할 때 사용하면 좋습니다.

- div라는 박스에서 양 옆에 있는 padding을 고정시키고 싶을 때, 여기에 rem을 사용하면 됩니다.