%, em, rem, vh, vw

%

전체에 대한 몇 % 값, 부모 기준

부모가 40px일 때 50%라면 20px이다.

---

em

상위 요소의 배수 단위

부모 요소가 20px시 1em이라면 20px, 1.5em은 30px(20*1.5)이 된다.

body{
    font-size: 15px;
}

div{	
    /* 15*1.5=18px */
    font-size: 1.5em; 
}

<div>
    15 * 1.5 = 22.5px
    <div>
        18 * 1.5 = 33.75px
        <div>
            27 * 1.5 = 50.625px
        </div>
    </div>
</div>

이런식으로 상속을 받아 점점 커지게 된다.

 

15 * 1.5 = 22.5px

18 * 1.5 = 33.75px

27 * 1.5 = 50.625px

---

rem

r는 root로서 최상위 속성에 기준을 둔다. em은 부모요소의 배수이지만 rem은 html의 배수이다.

html의 기본 폰트가 16px인데 계산이 어렵기 때문에 html의 폰트사이즈를 10px or 62.5%로 적용할 수 있다.

이 중에서 62.5% 적용해 주는것이 좋은데 그런 이유는 사용자가 웹 브라우저 설정에서 폰트 사이즈를 조정 할 경우를 대비해서이다. 10px로 지정하게 되면 사용자가 폰트를 크게 설정해도 바뀌지 않기 때문이다.

값이 62.5%인 이유는 기본 폰트 사이즈가 16px이기 때문에 100%는 16px이고 62.5%는 10px이다.

---

vw, vh

v는 viewport로서 보여지는 영역이다. 부모의 크기와 상관이 없다.

10vh는 10%라 생각하면 된다. 

이 값은 padding, font-size 등 다양한 곳에 적용가능하다.

---

vmin, vmax

vmax은 IE에서 사용불가

넓이, 높이에 따라 최대, 최소값 지정. 넓이 높이 중 작은 값이 vmin이고 큰 값이 vmax가 된다.

예를 들어 브라우저의 사이즈가 넓이는 1000px,  높이는 800px일 때 1vmin은 7px, 1vmax는 10px이다. 당연히 뷰포트에 따라 사이즈가 줄고 늘어나게 된다.