em과 rem / vw, vh

em은 부모 요소에서 font-size로 정해놓은 값에 따라서 정해진다.

예를 들어서

body {

  font-size:10px;

}

로 해놨다면 하위 요소들에서 em을 사이즈로 사용할 때 body에 10px에 의해 영향을 받는다.

근데 문제점은 작업을 하다가 중간에 font-size를 사용해서 특정 크기를 변경하려 하면 나머지에 영향을 받기도 해서 깨질 수 있다.

 

이럴 때 사용하는 것이 rem이다. rem은 root에 의해서만 영향을 받기 때문에 예를 들어서

html에 font-size:10을 해놓고 rem을 이용해서 쭉 작업을 하다가 특정 부분에서만 크기를 변경해줘야 한다하면

거기서만 font-size를 사용하면 된다.

 

---

vw는 뷰포트의 넓이다. 만약 화면의 반이면 50vw