TIL - CSS > CSS font unit

1차 프로젝트 클론을 하다보니
px만 쓰던 나에게 모르는 font-size 단위들이 나오기 시작했다..

그래서 한번 공부를 ㅎㅐ보기로하는데!!
MDN과 W3S를 봐도 바로 이해가 가지는 않기에....정리를 해본다

CSS 단위

: css는 길이를 표현하기 위한 여러가지 장치가 있고, 여러 단위가 있음
width , margin, padding, font-size 에 이러한 단위를 사용함

절대길이

• 절대길이 단위는 고정 길이 및 이들의 임의의 크기로 정확히 표현된다.
• 화면 크기가 다양하기때문에, 절대길이 단위는 화면에 사용하지 않는 것이 좋음

절대길이를 가진 단위들

1. cm : 센치미터
2. mm : 밀리미터
3. in : 인치( 1인치는 96px이며 2.54cm )
4. px : 픽셀( 1픽셀은 1인치의 96분의 1 )
5. pt : 포인트 ( 1포인트는 1인치의 72분의 1)
6. picas : 1pc는 12포인트이다

상대길이

• 상대길이 단위는 다른 길이 속성에 길이 상대를 지정한다.
• 상대길이 단위는 다른표현 매체 사이의 더 나은 확장을 할 수 있다.

상대길이를 가진 단위들

1. em: element에 상대적인 font-size

• 예를 들어 2em은 현재 font 크기의 2배이다.

2. ex : 현재 font 값의 x-height 갑솨 관계 있음 ( 거의 안쓴다.
3. ch: 0의 너비에 상대적인 값
4. rem : root element에 상대적인 font-size
5. vw : viewport의 너비의 1% 값
6. vh : viewport 높이의 1% 값
7. vmin, vmax : viewport의 너비값과 높이값에 상대적인 영향을 받으면, vmin과 vmax는 너비값과 높이값에 따라 최대값, 최소값을 지정할 수 있음

• 예를들어, 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin은 7px이 되고, 1vamx는 11px가 된다.
• 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하기

  .box {
    height: 100vmin;
    width: 100vmin;
  }

8. % : 부모요소의 상대적인 퍼센트 단위의 크기 



 *참고:  em과 rem 단위를 사용해서 layout을 만드는 것이 좋다 !*
 *viewport를 활용하는 것도 좋은 방법!*