em
폰트크기에 주로 사용
부모의 폰트크기에 영향을 받음
css 크기에 em의 값만큼 곱함
body {
font-size: 14px;
}
div {
font-size: 1.2em;
}body에 css값은 하위 요소들 전부에 영향을 주므로
div가 가지는 font-size는 14 * 1.2 가 된다
rem (root em)
em이지만 root가 붙어
최상위 요소에만 반영됨
기본적으로 최상위요소는 html
vw, vh
vw : view width
vh : view height
뷰포트(현재 보이는 영역)의 너비 및 높이의 퍼센트 값
현재 브라우저가 1000 x 500 이라면 1vw는 10 1vh는 5
vmin, vmax
뷰포트 최대, 최소 크기의 값
뷰포트 크기가 1000 x 500 이라면 1vmin은 500의 1%인 5 1vmax는 1000의 1%인 10이 된다
브라우저의 높이 변경 시 vmin을 사용하면
높이가 줄어들어도 줄어든 높이내에서 보이게 할수있음
브라우저 폰트
브라우저의 기본 폰트 값은 16px이며
사용자가 브라우저 설정에서 변경이 가능
rem 사용 시 기본 16px에서 변경됨
html {
font-size: 62.5%;
}위와 같이 적용하면 10px로 사용할수있음
(16의 62.5%가 10)
퍼센트로 한 이유는 기본 폰트크기는 사용자가 변경이 가능하기 때문에
hi