[CSS] em, rem 그리고 css의 단위들

.selector { property: value; }

• Absolute length units : px
• Relative length units : em, rem, vw, vh, %

1. em

  - typography에서 현재 지정된 point size 나타내는 단위 / 현재 폰트 size 나타냄

  - 선택된 폰트에 상관없이 항상 고정된 폰트 사이즈 가진다

  - 부모의 폰트사이즈에 상대적으로 크기가 계산된다

  - 브라우저의 기본 폰트 : 16px

  - ex) 8em = 16 * 8 = 128px = 800%

 

2. rem

  - root em

  - root에 지정된 폰트사이즈에 따라 크기 결정

 

3. vw, vh, wmin, wmax

  - 부모 요소와는 상관 없다, 브라우저의 크기에 의존

  - 100vw : viewport 너비의 100% 사용

  - 50vw : 브라우저 너비의 50% 사용

  - 100vh : viewport 높이의 100% 사용

  - 50vmin : 브라우저와 너비와 높이 중 작은 값의 50% 사용

  - 50vmax : 브라우저의 너비와 높이 중 큰 값의 50% 사용

 

4. %

  - 부모 요소로부터 상대적으로 크기 결정된다