html - 반응형 웹 제작을 효율적으로 하는 법 rem

웹을 만드는데 항상 부딛히는 문제가 있다

바로 웹 사이즈의 반응이다 그냥 웹 사이즈에 맞게 비율도 척척 알아서 늘어나고 줄어들면 소원이 없겠지만

그럴리없다

 

구글링을 몇번해본결과 em사용법은 기준치가 16px이고 수정 보완을 하기에는 자꾸 계산기를 돌려야하서

유지 보수에 힘들다고 판단되어서 바로 버렸다 그나마 다른 대안을 찾던중 rem을 보고 사용법을 알아보니

너무 완벽했다

 

html,body {font-size: 62.5%;}

@media all and (max-width: 400px) {

    html { font-size: 50%; }

}

 

 

 

사용법은 1번째 줄이 핵심이고 미디어 쿼리는 반응형에 적용하기 위함이다

font-size를 62.5%라는 이상한 수치를 보고 당황할수도 있다

 

설명하자면 기본 폰트 사이즈는 16px로 적용되어있다

그런데 여기서 16px을 우리들이 계산하기 편한 10px로 적용하고자

62.5%라는 수치가 나온다

 

이렇게 적용하면 사용법은 너무나 쉽다

그냥 폰트 사이즈든지 박스의 크기라던지 0빼기해서 rem을 붙여주면된다