css에 사용하는 단위 총정리

일단 px은 우리가 잘 알고 있을거라고 생각하지만, 픽셀 그 자체는 고정된 값으로 화면비율에 따라서 폰트 사이즈가 변하지 않는다.

그냥 진짜 궁극적인, 정적인 단위이다.

이를 최근에는 반응형이 중요해지고, 유저친화적인 인터페이스가 중요해지면서, 상대적인 즉 유저의 화면에 맞춰서 폰트를 정하는 혹은 화면 비율을 정하는 수치를 사용하는것이 중요해졌다.

따라서 그 수치를 좀더 명확하게 이해하고자 적게되었다.

1. em : 1em=16px; 선택된 폰트랑 전혀 상관없이 16px로 고정이다. 하지만, 자식 부모의 상관관계를 따른다.부모가 8em이었다면 (124px)
2. 자식을 0.5em하면 (62px)이 된다.
3. 부모의 폰트사이즈에 자식 폰트 사이즈가 비교해서 곱하는것이다.
4. rem : 부모에 따라서 변환하는게 아니라, 루트 사이즈에 따라서 변환되는것이고 기본적으로는 루트폰트 사이즈인 16에 정해진다.
5. vw(viewport weight) : 브라우저의 뷰포트에 %로 계산한다는것
6. vh(veiwport hight) : 브라우저의 뷰포트에 %로 계산한다는것
7. % : 부모요소에 대해서 계산하는것. 만약 부모 클래스가(부모블럭) 200px이라면 자식 클래스(자식블럭)이 50%라고 하면 100px가 된다.

이거만 알면 끝.