반응형은 할 때마다 전~혀 모르겠다
rem도 root단의 font size에 따라서 반응형으로 슝슝 움직이는거 아닌가란 생각을 했는데 그것도 아니다.
이번 기회에 rem에 대해 살펴보자!
📌 rem이란?
rem은 root em으로, 최상위 요소 (보통 html 태그)에 지정된 font size의 값을 기준으로 변한다.
즉, 최상단 html에 있는 글자 크기가 1rem이 된다.
크롬 브라우저의 경우 최상단 html 폰트 사이즈가 16px이다.
따라서 1rem = 16px, 2rem = 32px이 된다.
📌 rem은 반응형?
rem은 px로 변환되기 때문에 반응형이 아니겠네..?란 생각을 했다.
rem은 내가 평소에 생각한 반응형처럼 미디어 쿼리와 같이 디바이스 크기, 브라우저 창의 크기에 따른 반응형은 아니지만, 사용자가 시스템 또는 브라우저에서 설정한 값에 영향을 받는 반응형이다.
즉, rem은 웹 접근성을 위한 반응형 단위이다.
눈이 잘 보이지 않는 사용자가 글자 크기를 크게 설정했을 경우 px로 설정해두면 글자 크기의 변화가 없지만, rem으로 설정할 경우 설정에 맞게 크기가 변한다.
📌 rem 테스트 해보기
크림 설정 -> 모양 -> 글꼴 맞춤설정 에 있는 글꼴 크기를 변경해볼 경우,
px로 설정해둔 글자크기는 변화가 없으나 rem으로 설정해둔 글자크기는 설정에 따라 크기가 달라진다.
📌 rem 적용하기
📍 font size
global.css에서 html의 font size를 설정함으로써 rem 단위를 계산해서 사용할 수 있다.
크롬 기준 html 기본 font size는 16px인데, 18px 20px 등을 계산하는데 번거로움이 있다.
따라서 root 단의 font size를 10px로 맞춰 계산을 편하게 할 수 있다.
그러나, global.css에서 font size를 10px의 픽셀 단위로 설정할 경우 브라우저에서 제공하는 사용자 접근성 옵션이 적용되지 않는다.
html {
font-size : 62.5%;
}사용자 접근성 옵션 적용을 위해 기본 폰트 크기인 16px을 100%로 생각하여 62.5% (10px)로 설정해주면 된다.
📍 font 외의 rem 적용
UI 관련 라이브러리를 살펴볼 경우, 폰트 외의 버튼 패딩이나 사이즈, border-radius 등 거의 대부분을 rem으로 해놓았다.
글자 크기만 rem으로 해둘 경우, 접근성 옵션을 설정하면 글자 크기만 커지거나 작아질 뿐 그 외의 버튼, border 등은 크기가 고정되어 있을 것이다.
따라서 font size 외에 border-radius, padding 등도 전부 rem으로 구현해주는 것이 좋다.
<참고 : https://velog.io/@otterji/rem-px-%EC%B0%A8%EC%9D%B4-%EC%99%84%EB%B2%BD%ED%95%98%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%98%88%EC%8B%9C-%ED%8F%AC%ED%95%A8
https://mikkeller.tistory.com/25 >
