[CSS] CSS의 단위 이해하기

요즘 styled-component로 컴포넌트의 스타일을 작성하고 있는데 종종 헷갈리던 단위를 확실히 이해하고자 작성합니다!

px

우리가 흔히 사용하는 픽셀 값이다. 출력장치인 모니터에 따라 상대적인 값을 가진다.

 

em

부모의 font-size를 기준(1)로 하는 상대적인 사이즈를 의미한다.

예를 들어, 부모의 font-size가 10px이라 했을 때 자식 태그에서 font-size를 1.5em이라고 한다면, 그 태그의 font-size는 15px이다.

rem

em은 상위 부모 태그의 font-size를 기준으로 삼기 때문에 태그의 깊이가 커질 수록 사이즈 변동이 있다는 문제점이 있다.

그래서 rem을 사용하는데, rem의 r은 root를 의미한다. 즉 해당 문서의 최상위 태그의 font-size를 기준으로 삼는다.

 

vw, vh

브라우저의 너비, 높이 크기를 100으로 나눈 값이 각각 vw, vh이다.

즉 브라우저의 너비가 1000px이라면 vw는 1000/100의 값인 10px가 된다.

브라우저의 크기에 따라 변동되기 때문에 반응형 컴포넌트를 제작할 때 유용하다.

 

vmin, vmax

브라우저의 너비와 높이 크기 중 큰 값을 100으로 나눈 값이 vmax이고, 둘 중 작은 값을 100으로 나눈 값이 vmin이다.

일반적인 모바일에서는 vmin은 보통 vw겠지만, 모바일 디바이스를 회전하는 경우에는 vmin은 vh값이 될 것이다.

참고로 IE에서는 지원이 안되는 버전도 있다고 한다.

 

ex, ch

ex는 현재 폰트의 높이 값이다. 소문자 x 기준 높이값이라고 생각해도 된다.

ch는 현재 폰트를 기준으로 했을 때 숫자 0의 너비 값이다.

 

 

 

---

<참고>

https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573?ec_unit=translation-info-language

7 CSS Units You Might Not Know About