CSS
CSS - Units
주술회전목마
2022. 11. 12. 23:46
절대 길이 단위
px : pixels, 픽셀(1px=1/96th of 1in)
상대 길이 단위
: 상위 요소의 글꼴 크기나 viewport의 크기와 연관
1. 글꼴 사이즈 기준
em : font-size
1em = 부모의 폰트 크기
rem (root em) : 최상위(root) 요소의 font-size
1rem = html의 폰트 크기
2. 뷰포트 기준
vh & vw = 뷰포트 높이/너비의 1%
예) 500px 너비의 뷰포트일때, 1vw = 5px 10vw = 50px
vmin & vmax : 뷰포트의 최소/최대값 1% 반응형에 최적화!
예) 1200px*600px 뷰포트 => 1vw = 12px, 1vh = 6px 이므로
1vmin = 1vh = 6px, 1vmax = 1vw = 12px