TIL 05. CSS 단위 (em, rem, px) 정리

평소 헷갈리던 단위 개념인 rem, em, px  단위를 정리해보려 한다.

CSS 공부를 하면서 어떤 상황이든 px을 사용하곤 했는데,

디자인 의도에 따라 단위의 사용 목적이 바뀐다는 것을 알게 되었다.

오늘은 상대적 단위인 rem, em에 대해서 더 알아보고자 한다.

 

 

1.  rem (root em)

: 루트 요소(html)의 폰트 크기를 기준으로 사용하는 단위.

 

font-size를 조절하는데 유용하게 사용된다.

사용자가 브라우저 폰트 크기를 설정한 경우 rem도 영향을 받는다.

 

루트 요소의 폰트 크기를 62.5%로 지정한 후 rem을 사용하는 방법은

1 rem = 10px이 되어 계산하기 편하다.

계산을 편하게 하기 위해서 Html에서 font-size를 10px으로 설정한 후, 모든 요소에 1 rem = 10px로 사용할 수 있게 만드는 방법도 유용하다고 생각한다. 

 

em과 다른 점은 중첩이 되는 경우에도 기준값은 동일하다.

일반적으로 1 rem은 16px이다.

 

2.  em 

: 해당 요소의 폰트 크기를 기준으로 사용하는 단위.

padding, margin 등 박스 모델 너비를 계산하는 값을 조절해야 하는 경우와

적응형 웹 (Adaptive Web)을 보다 쉽게 만들기 위해 사용한다.

 

rem과 같이 사용자가 브라우저 폰트 크기를 설정한 경우 em도 영향을 받는다.

즉, em은 부모요소의 영향을 받는다.

 

여러 요소들이 서로 포함되어 있을 때 중첩이 일어나는데,

이때 중첩이 일어난 값들을 모두 계산해야 하기 때문에 이 부분은 복잡하다.

 

3.  px

: 절대단위, 고정 값

px 단위는 글꼴 크기 설정을 금지한다.

사용자가 브라우저에 설정한 글꼴 크기가 적용되지 않는 접근성 문제가 생길 수 있다.

px, em, rem 모두 CSS 상에서 박스 혹은 박스 안의 요소들의 크기를 정하는 데 사용할 수 있다.

---

👉

디자인 의도에 따라 단위의 사용 목적은 바뀌기 때문에,

한 가지 단위만 사용하는 방향보다는 사용 목적과 의도 고민하면서,

합리적인 방향으로 코드를 작성하자!

 

 

참고 사이트

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15