[css] em, rem

em

• 같은 요소내의 폰트 크기에 비례
• 폰트 크기가 em으로 설정되어 있으면 부모로 부터 상속 받음
• p, h tag들도 부모 폰트 크기를 받아 동적으로 크기 변환됨

실전 사용 예)

• 제곱 표현
• 문단 중 작은 문자 크기 조절
• letter-spacing 설정 시에도 em으로 설정
• 버튼 내에 문자가 있을 때 버튼과 문자 사이에 여백 조정 시 / 버튼 크기가 여러게 있을 때
  • btn.small
  • btn.medium
  • btn.large

단점

복잡한 DOM 구조인 경우 어떤 값에 따라 적용되는지 헷갈릴 수도 있다.

html	16px
body	0.5em: 8px
div	0.5em: 4px
p	0.5em: 2px
a	0.5em: 1px
span	0.1em: 0.1px

 

rem

root element (html tag) 폰트 크기에 비례

See the Pen rem by Daewoong Kim (@daewoong-kim) on CodePen.

 

참고

https://www.youtube.com/watch?v=VT_qa7h51pg

https://www.youtube.com/watch?v=47xHPFQ1Ll4

https://www.youtube.com/watch?v=AfxL9OKBBCU