html { font-size: 62.5%; } 적용

🧩 브라우저 폰트 사이즈

• font-size 표준 크기 = 16px
• 다른 설정을 해주지 않으면 기본으로 설정이 되는 값
  
  

🧩 em

• 해당 요소의 부모 글꼴 크기에 상대적
• em 글꼴 크기를 지정하면, 두 값이 복합적으로 적용해서 사용하는거를 권장하지 않음

.parent {
  font-size: 24px;
}
.child {
  /* 0.5 * 24px = 12px */
  font-size: 0.5em;
}

🧩 rem

• 문서의 루트 글꼴 크기 참조
• 예측이 가능하다!
• 항상 루트 글꼴을 참조하기 때문에 중첩 레이아웃 or 구성요소에서 안전하게 사용가능
• 사용자가 브라우저 설정을 통해 글꼴 크기를 변경하면 rem 기반 크기가 사용자 설정에 따라 조정

.parent {
  /* 1.5 * 16px = 24px */
  font-size: 1.5rem;
}
.child {
  /* 0.5 * 16px = 8px */
  font-size: 0.5rem;
}

🧩 font-size: 62.5%;

• px 값은 rem 값으로 변경하기 위해서 번거러운 계산이 필요
  • 직접 계산
  • 온라인 변환기
  • 함수를 만들어서 사용
• 이 번거러움을 해결하기 위한 가장 좋은 방법은 html 태그 = 폰트사이즈 62.5%를 적용하는 것

html {
  /* 62.5% of 16px browser font size is 10px */
  /* 16px * 0.625 = 10px */
  font-size: 62.5%;
}

body {
  /* 1.6 * 10px = 16px */
  font-size: 1.6rem;
}

.footer {
  /* 1.2 * 10px = 12px */
  font-size: 1.2rem;
}

이렇듯 처음 설정할 때 html 태그에 font-size: 62.5%를 적용하게 되면 쉽게 rem을 사용할 수 있다!