한 줄의 코드라도 이유 있는 코드를 작성하는 개발자
- 프리온보딩 복습 (1주차 월)
- clubstudy 개발 기본세팅
- 피그마 보면서 emotion theme 설정 theme어케할지 구상
- 공통 컴포넌트 회의 이후 issue tracking
- css 상대단위 em과 rem
- next.js 공식문서 Pre-rendering and Data Fetching 들어감
CSS 상대 단위 - em과 rem
em과 rem은 둘 다 CCS의 font-size속성 값에 비례해서 결정되는 상대 단위입니다.
차이점
em과 rem단위의 기준은 font-size속성 값이라고 했는데, 정확히 어디에 있는 font-size속성 값인지에 따라 차이가 발생합니다. em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다. 반면에 rem에서 r은 root, 즉 최상위 요소를font-size 속성 값 의미합니다. HTML에서 최상위 요소는 <html>입니다. 따라서 rem경우, html요소의 font-size속성 값이 기준이 됩니다.
결론
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있습니다. (특히 초보자들에게…) 왜냐하면 em의 경우 위에서 보았듯이 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에, em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문입니다.
<참고자료>
CSS 상대 단위 - em과 rem
When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)
