Velog Velog

요즘 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를 기준..