[TIL]20220818

yes·2022년 8월 18일
0

TIL 💌

목록 보기
3/55

한 줄의 코드라도 이유 있는 코드를 작성하는 개발자

  • 프리온보딩 복습 (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.)

0개의 댓글