font-size em vs rem

Notice

Recent Posts

Tags more

관리 메뉴

빵 입니다.

스타디/CSS, SCSS

bread-gee 2022. 8. 22. 16:47

font-size 속성은 폰트의 크기(대문자 “M”의 크기)를 지정한다.

em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때의 기본값

웹 브라우저에서 1em = 16px

CSS3에서 새로 등장한 rem = root em

root 요소는 <html>

rem 단위는 <html> 요소에 지정된 글꼴 크기로부터 ~ 선택된 요소의 글꼴 크기를 상대적으로 결정한다.

em은 부모 요소에 상대적으로 글꼴 크기를 상속받는다.

rem은 root 요소(<html>)에 상대적으로 글꼴 크기를 상속받는다.

em은 부모로부터 글꼴을 물려받기 때문에, 같은 값을 지니더라도 노드가 깊어지면 글꼴 크기가 무한히 작아진다.

=> 부모, 조상 노드 가운데 어떤 요소의 글꼴 크기를 변경하면 자식, 자손 요소 모두가 영향받는다.

=> 예측이 어렵고 계산이 복잡하다.

html = 100% = 16px
 body = 0.5em = 8px
  div = 0.5em = 4px
   p = 0.5em = 2px

rem은 시조(root)로부터 글꼴을 물려받기 때문에, <html> 요소에 기본 글꼴 크기를 지정해 두면 항상 <html> 요소 기준으로 글꼴 크기를 상속받는다.

=> <html> 요소의 글꼴 크기를 변경하면 모든 글꼴 크기가 변하긴 하지만, 노드의 뎁스와 관계가 없이 <root> 하나에만 상대적이므로 자식, 자손의 글꼴 크기 변화를 예측할 수 있고, 계산이 쉽다.

html = 100% = 16px
 body = 0.5rem = 8px
  div = 0.5rem = 8px
   p = 0.5rem = 8px

CSS Variable Syntax (0)	2022.08.30
Dart Sass 의 calc() 내에서 / 삭제될 예정 (0)	2022.08.30
CSS 단위 (0)	2022.08.22
PostCSS (0)	2022.08.12
:read-only vs readonly / readonly vs disabled (0)	2022.08.04

'스타디/CSS, SCSS' Related Articles

Comments