절대길이
px
1px = 1/96th of 1in
상대길이
대부분 브라우저의 기본 폰트 사이즈는 16px이다.
em, rem (글꼴 상대길이)
em보다는 rem이 좀 더 유용하다.
em
1em === 부모의 font-size
rem
1rem === root의 font-size
vw, vh (뷰포트 백분율길이)
vw
뷰포트 width값 기준 백분율
vh
뷰포트 height값 기준 백분율
vmin, vmax
뷰포트 기준으로 더 큰 width값이 vmax, 작은 값이 vmin으로 적용된다. ex) 가로모드
%
부모의 길이 100%를 기준으로 설정한다.
함수 표기법
calc()
사칙연산 지원
p {width: calc(100% - 50px)}min(), max()
지원하지 않는 브라우저가 있다. can i use에서 확인
/* 브라우저가 더 작은 값을 선택 */
p {width: min(100%, 200px)}
/* 브라우저가 더 큰 값을 선택 */
p {width: max(100%, 500px)}