픽셀
- 모니터 위에서 화면에 나타낼 수 있는 가장 작은 단위
픽셀의 단점
- 컨테이너 사이즈가 변경되어도 컨텐츠가 그대로 고정된 값으로 유지됨
- 사용자가 브라우저 폰트 사이즈 설정을 바꿔도 반응하지 않음
- 같은 폰트 사이즈라고 할지라도 어떤 폰트 패밀리를 쓰냐에 따라서 사용자에게 보여지는 텍스트의 크기는 달라질 수 있음
- 기본적으로 브라우저에서 html에 할당되는 폰트 사이즈는 16px(html이나 body에 폰트 사이즈를 지정하지 않는 이상 기본적으로 16px로 지정)
- html이나 body에서 따로 폰트사이즈를 지정하지 않으면 기본적으로는 font-size:100%로 지정
(브라우저에서 지정된 폰트 사이즈를 따라간다는 말)
em
- 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위
- 지금 폰트 사이즈를 나타내는 단위
- 선택된 폰트 패밀리에 상관없이, 즉, 선택된 폰트에 전혀 상관없이 항상 고정된 폰트 사이즈를 가지고 있음
- 부모의 폰트 사이즈의 상대적으로 크기가 계산되어짐
- 부모의 폰트 사이즈를 곱한 값으로 계산이 됨
ex) 부모 요소 폰트사이즈 8em, 자식 요소 폰트사이즈 0.5em인 경우 부모의 폰트 사이즈는 16px*8=128px, 자식의 폰트 사이즈는 128px*0.5=64px
rem(root em)
- 루트에 지정된 폰트 사이즈에 따라서 크기가 결정됨
ex) 부모 요소 폰트사이즈 8em, 자식 요소 폰트사이즈 0.5em인 경우 부모의 폰트 사이즈는 16px*8=128px, 자식의 폰트 사이즈는 16px*0.5=8px
vw,
vh(viewport heigeht),
vmin(브라우저의 너비와 높이 중에 작은 값의 50%),
vmax(브러우저의 너비와 높이 중에 큰 값의 50%)
- viewport related
- 100vw : viewport width viewport 너비에 있는 100%를 쓰겠다
- 50vw : viewport width viewport 너비에 있는 50%를 쓰겠다(브라우저 너비에 반을 쓰겠다)
%
- 부모 요소의 상대적으로 크기가 계산되어짐
