단위 특성에 따른 사용방법(%, px, rem, em)

px은 고정값을 의미하고, %는 백분율로 계산된 값을 의미한다는 것은 많은 사람들이 알고 있다.

em은 스타일을 지정한 폰트사이즈를 기준으로 곱하기로 계산되고,

rem은 html, 즉 root값의 font-size를 기준으로 곱하기하여 계산된다.

각 단위의 특성에 따라 사용 방법을 정리해보면,

px은 반응형을 생각해봐도 값이 변하면 안되는 요소들에 사용한다.

%는 화면의 크기에 비례해서 정해져야 하는 요소들에 사용한다.

em은 스타일을 지정한 폰트사이즈의 인접한 요소들에게 사용한다. (같이 상호작용할 필요가 있는 것들).

그러나 이 경우에 스타일을 지정하는 요소는 rem으로 한다.

rem은 em단위를 쓸 필요가 없고, 폰트사이즈에 따라 가변적으로 변하는 디자인에 사용한다. 

rem을 쓸거라면 media query도 rem으로 작성한다.

참고)

반응형 폰트로 font-size: 3vw; 이런식으로 정의할 수 있으나

창이 바뀔때마다 해당 폰트가 영향을 받으므로 브라우저에 많은 부담을 준다.