em, rem, vw, vh, vmin, vmax

%는 부모 요소 크기의 영향을 받아서 크기를 결정하게 된다면,

 

1. em은 자신의 폰트 사이즈의 영향을 받는다.

그래서 보통 em은 조상요소 절대적인요소에 px단위로 크기를 지정하고, 그 밑에 하위 요소에는 em으로 설정을 많이한다. 그리고 상속의 개념이 있어서, 자식요소는 부모요소의 크기를 기반으로 단위를 측정한다.

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class= "child">Child1</div>
    <div class= "child">Child2</div>
  </div>
</div>

body *{
  border : 2px solid;
}
.container{
  width : 60em;
  font-size : 15px;
}
.parent{
  width : 30em;
  font-size : 2em;
}
.child{
  width : 50%;
  font-size : 2em;
}

소스코드 출력 값

여기서 알 수 있듯이, container클래스는 font-size로 인해서 괄호크기를 변경해도 변화가 없다는것을 알 수 있다. parent클래스에서는 font-size를 2em으로 잡아서 크기를 키웠고, child클래스는 parent클래스와 똑같이 2em으로 font-size를 지정하였지만, 2배가 더 큰 이유는 그 2em이 부모크기를 기반으로 또 2배가 커졌기 때문이다.

 

 

2. rem은 중간단계 부모요소들을 다 건너 뛰고 최종단계 조상의 폰트사이즈의 영향을 받게 된다.

그래서 em으로 단위설정하기가 힘들다면, rem으로 사용하는것도 하나의 방법이다.

<div class="container">
  Container
  <div class="parent">
    Parent
    <div class= "child">Child1</div>
    <div class= "child">Child2</div>
  </div>
</div>

html{
  font-size:10px;
}
body *{
  border : 2px solid;
}
.container{
  width : 60em;
  font-size : 15px;
}
.parent{
  width : 30em;
  font-size : 2em;
}
.child{
  width : 20rem;
  font-size : 2em;
}

html의 font-size영향을 받고 가로 크기를 조정할 수 있는 child클래스

CSS코드에서 알 수 있는것은 최상위 부모요소는 html이다. 그래서 html요소의 font-size를 참고해서 child클래스 가로 너비는 크기가 조정이 된 것을 알 수 있다. 

 

 

cf. ViewPort란 화면 전체의 출력된 모습을 말한다.

 

 

3. vw(Viewport Width)로 뷰포트의 너비 사이즈를 말한다. vh(Viewport Height)로 뷰포트의 높이 사이즈르 말한다.

<div class="container"></div>

.container{
  width : 50vw;
  height : 50vh;
  background : tomato;
}

신기한것은, 화면크기의 50프로를 사용한다는 뜻이므로 화면 크기를 줄이면 화면이 줄어든 상태에서 또 50프로만 사용하게 된다.

화면최대화 했을때 전체 50% 사용하는 모습

가로 너비를 줄였을 경우, 작아진 가로 사이즈

 

 

 

4. vmin은 뷰포트의 최소 사이즈이다. vmax는 뷰포트의 최대 사이즈 이다.

vmin은 짧은쪽에 백분률을 계산해서 크기를 조정하는 것이고, vmax는 넓은쪽에 백분률을 계산해서 크기를 조정하는 것이다.