여러가지 단위 : %, vw, vh, em, calc

요소의 넓이와 높이의 단위값 중 px는 고정값으 표현, em,%,vw,vh 는 유동적인 값이다.

유동값은 각자 기준이 되는 값이 다른데

 

em : 부모의 영향을 받아 유동적으로 변하는 폰트 단위

 

% : 부모 요소를 기준으로 부모 요소가 전체 사이즈의 90%라는 값을 갖고 있을 때 자식 요소는 부모가 가진 90%를 100%로 인식해 그 값을 기준으로 갖게 된다.

 

vw와 vh : viewrport 를 기준으로 즉 사용자의 화면을 기준으로 값을 갖게 된다.

부모 요소가 viewport 기준 90%의 값을 갖고 있어도 자식 요소는 부모 요소의 영향을 받지 않고 viewport 기준으로 값을 갖게 된다.

 

 

vw와 vh는 IE9부터 지원

 

 

 

webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

 

 

 

calc : 사이즈 연산이 가능하게 하는 속성으로 +,-,*,/ 등을 이용해 사이즈 연산을 할 수 있다.

 

ex)

<div class="container">

  <div class="contents"></div>

  <div class="box"></div>

</div>

 

 

 

.container {width:100vw;}

.contents {width:calc(100% - 100px);}

.box {width:100px;}

 

 

www.w3schools.com/cssref/func_calc.asp