[20201210][이전블로그글]글꼴의 크기

UI를 만들 때 고민되는 것 중 하나는 크기 단위를 어떻게 잡을 것인가 이다. 페이지의 타겟이 모바일인지 PC인지에 따라서, 같은 페이지여도 메뉴 등 크기를 고정시키고 싶은 요소는 화면 크기 상관 없이 고정값으로, 그 외 요소는 화면 사이즈에 따라 변하게 만드는 등 용도에 따라 다른 단위를 써야할 수 있다.

---

1. 절대적인 크기: px
 -사용자 디바이스 기본 크기 설정과 상관없이 크기 설정
 -강조하기 위해 큰 크기(px)로 지정했는데 사용자에 따라 지정하지 않은 글꼴보다 작은 크기가 될 수도 있다.
 -모바일 처럼 작은데 고해상도인 환경의 경우 1px이 모니터의 한 점보다 크게 업스케일되므로 문제가 생길 수 있다.


2. 보통의 경우: rem
 -사용자 디바이스 기본 크기 설정을 기준으로(1rem) 크기를 지정할 수 있다.
 -em의 경우 부모 element를 기준으로 하므로 계산이 어렵다.


3. 반응형 웹에서 기준점을 만들 때
 -디바이스 크기에 따라 유동적으로 레이아웃의 크기가 결정
 -디바이스 크기 별로 css를 다르게 한다.
 -디바이스 크기는 px을 단위로 한다.

 

4. 화면 너비 및 높이에 따른 상대적 크기: vm, vh
 -화면에 한 번에 보여지는 영역(ViewPort)을 기준으로 한다.
 -화면에 꽉차게 떨어지는 페이지 등(100vm, 100vh)