반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Tags
- Learning React
- vue 컴포저블 함수
- commonjs와 ecmascript modules(esm)
- ecmascript modules(esm)
- usefetch
- 인터넷 거버넌스
- d3 지도 툴팁
- d3 지도 타입스크립트
- vue composable 함수
- ToDo
- reflow
- 화살표 함수 중괄호
- vuedraggable
- vue3 drag and drop
- d3 지도 확대/축소
- component is already mounted please use $fetch instead.
- nuxt universal rendering
- $fetch
- last-modified
- 함수형 프로그래밍
- git
- cloud firestore id auto increment
- firebase id 자동
- 참조형 props의 default
- vue draggable 차트 안나옴
- repaint
- 화살표 함수 {}
- 참조형 default
- 다자 이해관계자 모델
- d3 지도
Archives
- Today
- Total
빵 입니다.
font-size em vs rem 본문
반응형
font-size 속성은 폰트의 크기(대문자 “M”의 크기)를 지정한다.
em
em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때의 기본값
웹 브라우저에서 1em = 16px
rem
CSS3에서 새로 등장한 rem = root em
root 요소는 <html>
rem 단위는 <html> 요소에 지정된 글꼴 크기로부터 ~ 선택된 요소의 글꼴 크기를 상대적으로 결정한다.
em vs rem
em은 부모 요소에 상대적으로 글꼴 크기를 상속받는다.
rem은 root 요소(<html>)에 상대적으로 글꼴 크기를 상속받는다.
em
em은 부모로부터 글꼴을 물려받기 때문에, 같은 값을 지니더라도 노드가 깊어지면 글꼴 크기가 무한히 작아진다.
=> 부모, 조상 노드 가운데 어떤 요소의 글꼴 크기를 변경하면 자식, 자손 요소 모두가 영향받는다.
=> 예측이 어렵고 계산이 복잡하다.
html = 100% = 16px
body = 0.5em = 8px
div = 0.5em = 4px
p = 0.5em = 2px
rem
rem은 시조(root)로부터 글꼴을 물려받기 때문에, <html> 요소에 기본 글꼴 크기를 지정해 두면 항상 <html> 요소 기준으로 글꼴 크기를 상속받는다.
=> <html> 요소의 글꼴 크기를 변경하면 모든 글꼴 크기가 변하긴 하지만, 노드의 뎁스와 관계가 없이 <root> 하나에만 상대적이므로 자식, 자손의 글꼴 크기 변화를 예측할 수 있고, 계산이 쉽다.
html = 100% = 16px
body = 0.5rem = 8px
div = 0.5rem = 8px
p = 0.5rem = 8px
📌 참고
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units
반응형
'스타디 > CSS, SCSS' 카테고리의 다른 글
| 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
more
