반응형 폰트 단위
Q : 사용자가 브라우저 font-size를 변경하였을 때, 이에 대응해서 웹 화면의 요소가 크거나 작아지도록 하려면 어떻게 스타일링 하면 좋을까요?
상대적인 크기 단위 사용
웹 페이지에 절대 단위 px를 사용할 경우 사용자의 브라우저 font-size 변경을 반영할 수 없다.
따라서 이를 반영하기 위해서는 상대적 단위 (%,rem,em)를 사용해야 한다.
em
em은 하나의 요소에 폰트 크기를 지정하고 자식 요소에서 em을 적용하면 두 요소의 폰트 크기가 다르게 적용된다.
따라서 요소가 깊이 중첩될 수 있을 때는 폰트 크기 단위로 em을 사용하면 CSS를 보는 것 만으로 개발자가 어떤 크기인지 예측하기 어렵다.
.parent {
font-size: 24px;
}
.child {
/* 0.5 * 24px = 12px */
font-size: 0.5em;
}
.deeply-nested {
/* 0.5 * 0.5 * 24px = 6px */
font-size: 0.5em;
}rem
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 계산에 영향을 미치기 때문이다.
REM 단위의 계산에 영향을 미치는 요인
