브라우저의 font-size에 상대적인 크기 단위로 스타일링하기

상대적인 크기 단위를 사용

• 웹 페이지에 절대 단위(px)를 사용할 경우 사용자의 브라우저 font-size 변경을 반영할 수 없습니다.
• 따라서 이를 반영하기 위해서는 상대적 단위( %, rem, em )를 사용해야 합니다.

어떤 단위를 사용할까?

• em 은 하나의 요소에 폰트 크기를 지정하고, 자식 요소에서 em 을 적용하면 두 요소의 폰트 크기가 다르게 적용됩니다. 따라서 요소가 깊이 중첩될 수 있을 때는 폰트 크기 단위로 em 을 사용하면 CSS를 보는 것 만으로 개발자가 어떤 크기인지 예측하기 어렵습니다.

• rem 은 항상 루트 폰트 사이즈를 참조합니다. 일반적인 브라우저 기본 폰트 크기가 16px이고 이를 이용하면 사용자가 브라우저 폰트 크기 설정을 변경하지 않는 일반적인 경우, 1rem 은 16px 크기라 보고 스타일링 하면 됩니다.

• 하지만, Figma는 px기준으로 넘어오기 때문에, px → rem 환산이 번거롭습니다.

• 이런 경우, 아래와 같이 많이 사용하는 크기 단위를 CSS 변수 설정하는 방법으로 해결할 수 있습니다.

html {
  --font-size-300: 0.75rem; /* 12px */
  --font-size-400: 1rem;    /* 16px, base */
  --font-size-600: 1.5rem;  /* 24px */
  --font-size-800: 2rem;    /* 32px */
  --font-size-900: 2.25rem; /* 36px */
  /* ... */
}

• 0.1rem = 1px 이 되도록 설정해서 해결할 수 있습니다.

html {
	font-size: 62.5%; /* 16px * 62.5% = 10px = 1rem */
}

body {
	font-size: 1.6rem; /* 브라우저에서 설정한 폰트 크기가 기본값이 되도록 설정 */
}

• 이 경우, Figma에서 넘어오는 1px = 0.1rem 으로 환산해서 작업할 수 있습니다.
• 6.25%가 아닌 62.5%를 사용하는 이유는 웹 브라우저의 종류나 사용자 설정에 따라 rem 계산에 영향을 미치기 때문입니다.
• CSS에서 rem 단위 사용하기 | JTK 블로그 참조