font-size : 62.5%란 뭘까

css rem 을 쓰면 언젠간 한번쯤은 만나는 62.5%에 대해 써보려고 한다.

무지성으로 쓰고 있다가 드디어 정리를 하게 되었다.

보통 globalStyles를 보면 font-size : 62.5% 라고 되어있다.

도대체 저게 멀까

보통 css에서 크기를 주기 위해서 주로 쓰는 것들이

px, rem, em, vw, vh 

이 친구들이 있다

 

초기에 잘 모를때는 px로 도배를 하는데 px은 쓰면 안된다고 한다

왜냐하면 웹 접근성을 저해하기 때문이다.

기본 브라우저 글꼴은 16px인데 사용자가 20px 로 설정을 하면 그에 따라 글꼴 크기가 커져야 한다

근데 픽셀로 단위를 설정하면 브라우저를 통한 사용자의 설정값이 적용이 되지 않는다.

한마디로 px는

절대적인 단위

라는 얘기이다

우리는 모니터 크기나, 모바일을 쓰면서 화면 크기가 달라질텐데 px로 하면 그에 맞춰 크기가 변하지 않게된다(반응형이 되지 않는다는 소리!)

 

그렇다면 뭘 써야할까?

상대적인 단위(em, rem)을 사용해야한다

(rem, em 은 글자 크기에 따라 비례되는 속성인데 rem은 오직 html 태그의 글자 크기만 참조한다 em은 좀 더 복잡한데 부모의 크기를 영향받아서 미디어 쿼리쓸땐 em 을 써야한다고 한다 이건 다음에 정리를 하겠다,,,,,)

기본적으로 1rem = 16px 이다

https://nekocalc.com/px-to-rem-converter

그렇다면 2rem은 32px!

디자이너들은 기획에서 px 단위를 이용해서 개발자에게 전달을 하는데 개발자는 매번 px to rem 으로 계산을 해서 바꿔야한다

말이 안된다!

개발도 힘든데 단위도 매번 계산하다니! 귀찮다!!

그래서 나온게

16(기본 브라우저 폰트 크기) * 62.5% = 10px

이렇게 하면 10진수 계산이 가능해진다!

문과생인 난 처음에 뭔소리인지 이해를 못했다!

위의 사진처럼

기획문서에 32px 이라고 써있으면 우리는 32/16(기본 폰트 크기) = 2가 나와서 2rem 이라고 값을 주게 될 것이다

하지만 방금 62.5%를 줌으로써 기본 폰트 크기가 10px이 되지 않았나!?

그러면 32/10 = 3.2

3.2rem 으로 값을 넣어주면 된다!

아주~~ 직관적인셈인거지!!!

더이상 머가리를 굴리지 않아도 된다!

 

사실 이거 잘 몰라서 일할때 또 고생했다

하하

이제 퇴근하러 갑니다

뿅!