rem이란
생각해보면 rem이 root의 어떠한 요소에 비례한 사이즈라고만 알고 있었지, 제대로 사용해본 적이 없었다.
rem은 root em으로, 최상위 요소(보통은 html 태그)에 지정된 font-size의 값을 기준으로 변한다.
최상단 html에 있는 글자 크기가 1rem이 된다는것!
크롬 브라우저를 예로 들면, 크롬은 최상단 html의 폰트 사이즈가 16px이다.
그래서 1rem = 16px, 2rem = 32px 이렇게 된다.
그렇다면 여기서 의문,
반응형이 맞는건가?
픽셀로 변환도 되고, 화면을 아무리 줄이고 늘려봐도 크기가 변하지 않는데, 반응형이 맞는걸까?
반응형은 맞다. 하지만 우리가 일반적으로 아는 미디어쿼리의 기능과 같이 디바이스 크기나 브라우저 창의 크기가 아니다. rem은 사용자가 시스템 또는 브라우저에서 설정한 (폰트)값에만 영향을 받는다. 만약 직접 설정에 들어가 글자 크기에 대한 설정을 따로 하지 않는다면, 어떠한 화면에서도 같은 픽셀값이 나타날것이다.
크기가 변하는곳에는 rem을 쓰라고해서 헷갈렸던건데,, 사실상 rem을 써도 우리가 보는 px값은 거의 똑같을 거라는,, 것이다.
(루트의 글자 크기를 변환하면 다같이 적용되니 이렇게 사용할수도 있겠다)
rem은 어떤 반응형을 위한 단위인가?
rem은 웹 접근성을 위한 반응형 단위이다. 눈이 잘 안보이는 사용자가 글자 크기 설정을 크게 해놓았을 경우, px로 설정하면 변화가 없는데 rem으로 설정하면 그에 맞게 크기가 변한다.
웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다.
같이 보면 좋을 웹 접근성에 대한 내용
WCAG 2.0 AA레벨
웹 접근성 관련 포스팅
예시
아무 사이트나 들어가서, 비교할 두 글자를 바꿔본다.
내 velog를 예시로 들어보겠다.
설정
하나는 px, 하나는 rem으로 바꾸기
이 폰트 사이즈는 1.125rem 으로 그대로 놔두고,
이 폰트는 30px로 변경했다.
당연히 화면을 늘리고 줄여도 글자 크기는 변하지 않는다.
아래와 같이 크롬 설정 > 모양 > 글꼴 맞춤설정에 있는 글꼴 크기를 변경해보면 차이를 알 수 있다!!
결과
이건 글꼴을 9px로 바꿨을때
이건 글꼴을 30px로 바꿨을때의 화면이다.
이처럼, 픽셀은 그대로 박혀있고 rem만 변하는 것을 확인할 수 있다!^^
주의사항
위에 있는 글꼴크기 + - 는,, 전혀 다른 것이므로 헷갈리지 말자 ^__^ (덕분에 난 엄청 삽질함)
폰트에만 적용되는 것인가?
UI library같은걸 보면 버튼의 패딩이나 사이즈, 심지어 border-radius까지도 싹 다 rem으로 해놓았다. 폰트 크기에만 적용하는것이 아닌, 모든 사이즈에 rem을 적용한다!!
글자크기만 바뀔 순 없지 않은가~
우리나라는 웹 접근성에 대해 엄격하지 않지만, 해외에서는 엄격한 이슈라고 한다! 짜치는 개발자가 되지 않기 위해 px대신 rem을 쓰도록 하자~~~
(px은 정말 변하지 않을 버튼 내 패딩같은 곳에 쓰면 될 것 같다)
rem에 대해 씹고 뜯고 맛보는 좋은 시간이어따 ^~^
