# CSS 단위 em/rem/vw/vh

## em&#x20;

em은 상대적인 크기를 가지는 단위이다. 기본적으로 브라우저의 font-size는 16px이라 따로 설정해 두지 않으면 (16\*n)em으로 계산된다.&#x20;

em 단위는 부모 요소가 설정한 글자 크기에 따라 비례하여 계산된다.&#x20;

```
(부모요소의 글자 크기 * n)em
```

em 단위의 단점은 부모요소에 따라 글자 크기가 지정되기 때문에 계산이 힘들다는 것이다.&#x20;

```
root = 16px = 1em
    body = 0.5em = 8px
        div = 0.5em = 4px
```

그래서 em 단위는 대부분 폰트 사이즈에 설정하지 않고 버튼의 padding 등 해당 콘텐츠의 글자 크기에 따라 비례하여 반응형 웹이 구현되는 곳에 사용된다.&#x20;

### em 계산하기&#x20;

```
(사용하고자 하는 px) / (기준 크기 px) * 100%  
```

참고로 em은 소수점 3자리까지 가능하다.&#x20;

## rem

```
(루트 요소의 글자 크기 * n)rem
```

rem은 root em이라는 뜻으로 루트 요소에 지정한 글자 크기에 비례하여 계산된다. 쉽게 계산하기 위해 글자 크기를 `10px`로 설정하는 방법도 있다.&#x20;

```
root = 16px = 1rem
    body = 0.5rem = 8px 
        div = 0.5rem = 8px         
    
root = 10px = 1rem
    body = 0.5rem = 5px
        div = 0.5rem = 5px 
```

em과 다른 점은 em은 부모 요소의 글자 크기에 비례해서 계산되지만 \
rem은 root(html)의 글자 크기에 비례하여 계산된다는 점이다.&#x20;

그래서 글자 크기나 고정되는 box 사이즈 등에 rem 단위를 많이 사용한다. root 요소의 글자 크기만 변경하면 모든 rem 단위의 크기가 변경되기 때문에 유지 보수에도 좋다.&#x20;

## vh

vh 요소는 높이값의 100분의 1의 단위이다. 예를 들어 브라우저 높이값이 900px일때 1vh는 9px이다. 뷰포트의 너비값이 750px이면 1vw는 7.5px이다.&#x20;

## 참고&#x20;

* [Font Unit (폰트 단위 크기 비교)](https://webclub.tistory.com/122)
* [CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch](https://webclub.tistory.com/356)
* [em 계산해주는 사이트](http://pxtoem.com/)&#x20;