2020-093.CSS.Font Size.폰트 크기.rem.em.px.vh/vw.ex/ch
Web Dev, HTML, CSS, SVG, BootStrap/CSS반응형
참조) https://webclub.tistory.com/356
|
em
부모의 폰트사이즈 X 자신의 폰트 사이즈가 된다. |
body { font-size:10px } div { font-size:1.2em; } <body> <div> Test (10 * 1.2 = 12px)
<div> Test (12 * 1.2)
<div>
Test (12 * 1.2 * 1.2)
</div> </div> </div> </body> |
|
rem
root (<html>) 의 폰트사이즈 X 자신의 폰트 사이즈가 된다.
width 에도 사용가능하다.
grid 에서 사용된다. |
html { font-size : 14px; } div { font-size : 1.2rem; } <body> <div> Test (10 * 1.2 = 12px) <div> Test (10 * 1.2) <div> Test (10 * 1.2) </div> </div> </div> </body> |
|
vh & vw 뷰포트의 너비값과 높이값
반응형에 사용 |
브라우저 높이가 900px 이면 1vh = 9px, 750px 이면 1vh = 7.5px
|
|
vmin & vmax |
.box1 # 가로는 100%, 세로는 가로길이인 정사각형 |
반응형
'Web Dev, HTML, CSS, SVG, BootStrap > CSS' 카테고리의 다른 글
| Div.가상요소 설명 (0) | 2021.04.05 |
|---|---|
| CSS1,2,3 (0) | 2020.03.04 |
| CSS 변수 (0) | 2019.10.08 |
| CSS Animation : 2D Transform (0) | 2019.08.14 |
| (작성중) transition, transform (rotate, translate) (0) | 2018.10.26 |