em, rem 개념과 차이

 

 

 

상대적인 크기로 표시하는 em
고정단위 em은 상대적인 크기로 부모요소에서 지정한 폰트크기 1em으로 놓고 상대적인 값을 계산해서 다른 요소들의 글자 크기를 조절하는데 지정한 크기가 없다면 16px을 기본값으로 합니다.

<style>
    .wrap {
        font-size:16px;
    }
    h1 {font-size:3em;}
    p {font-size:1.5em;}
</style>


<div class="wrap">
    <h1>3em 크기제목</h1>
    <p>1.6 크기 텍스트</p>
    <div>16px 크기 텍스트</div>
</div>

em 단위는 부모요소 크기를 기준으로 하기 때문에 <div>를 중복해서 사용할 경우 부모 요소의 크기가 계속 달라지면서 자식요소의 글자 크기도 점점 커지는 문제점이 발생합니다.

 

 

 

<style>
.wrap {font-size:16px;}
div {font-size:1.5em;}
</style>


<div class="wrap">
  <div>
     1.5em크기 텍스트 ->16X1.5 = 24px
     <div>
        1.5em크기 텍스트 -> 24X1.5 = 36px
        <div>
          1.5em크기 텍스트 -> 36X1.5 = 54px
        </div>
    </div>
</div>


<style>
html {font-size:16px;}
div {font-size:1.5rem;} /*em의 문제점을 해결하기 위해 생겨난 rem*/
</style>

이러한 문제를 바로잡기위해 나타난게 rem!
rem을 사용하면 중첩 상관없이 기본이 되는 크기를 기준으로 사이즈가 적용되기 때문에 div 내의 폰트 사이즈는 모두 16X1.5=24px크기로 나옵니다.

 

 

참고로 반응형 웹사이트를 만들때 화면크기에 따라 글자크기를 자동으로 어울리는 크기로 바꿔주는 js로  flowtype.js가 있으니 관심있는 분들은 한번 사용해 보세요!

<script src="js/flowtype.js""></script>

<script>
$('body').flowtype();
</script>

https:/github.com/simplefocus/flowtype.js