rem과 em의 차이

참조 사이트

• https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/
• https://medium.com/watcha/watcha-개발-지식-px-em-rem-f569c6e76e66

🔶 개념

1. rem

• 브라우저 기본 글꼴 크기에 상대적임.
• html "루트 요소의 font-size"를 기준으로 크기를 설정함. (다른 요소의 크기는 신경쓰지 않음)
  : 대부분 웹 브라우저에서는 1rem = 16px이 됨.
  

2. em

• 해당 요소의 font-size에 따라 크기가 설정됨.
  

3. 코드 예제

/* html */
<h3>부모요소가 body(16px)임</h3>
  <div class="one-rem">1rem(16px)</div>
  <div class="two-rem">2rem(32px)</div>
  <div class="one-em">1em(16px)</div>
  <div class="two-em">2em(32px)</div>

  <hr />

<h3>부모요소가 .parent(30px)임</h3>
<div class="parent">
  <div class="one-rem">1rem(16px)</div>
  <div class="two-rem">2rem(32px)</div>
  <div class="one-em">1em(30px)</div>
  <div class="two-em">2em(60px)</div>
</div>

/* css */
		.parent {
        background: white;
        border: 1px solid black;
        font-size: 30px;
      }

      .one-rem {
        font-size: 1rem;
      }

      .one-em {
        font-size: 1em;
      }

      .two-rem {
        font-size: 2rem;
      }

      .two-em {
        font-size: 2em;
      }

🔶 px 보단 rem,em!

🔆 반응형 페이지를 만들기 위해 px 보다 rem,em을 쓰는게 나음

이유

: px로 크기를 지정하게 되면 크기가 고정적으로 정해짐 .
→ 따라서 모니터마다 해상도의 차이가 있어서 각 모니터마다 크기가 다르게 보이게 됨.
→ 또한 반응형 웹 페이지에 적합하지 않다.

🔆 em 보단 rem!

이유

: 자식요소에 em을 사용하여 크기를 지정한다면, 부모의 크기가 변함에 따라 자식도 영향을 받기 때문에 복잡함.

🔶 결론

• px은 고정적인 크기를 나타낼 때 사용하도록.
• rem을 사용하면 무수히 다양한 모니터 해상도에 비례해서 상대적으로 크기가 나타나기 때문에 크기가 각 모니터에 따라 유연하게 보여진다. 이는 반응형 페이지 구현에도 유용하다.