반응형 웹 폰트 크기 설정

html {    font-size: 62.5;    }

 

 

반응형 웹을 만드는 방법

 

반응형 웹을 만드는 방법은 여러가지가 있는데 그 중 하나는 css의 media-query 속성을 사용하여 브라우저 뷰포트의 크기가 태블릿, 모바일 디바이스 크기가 되었을 때 대응해주는 방법이 있습니다.

 

이 방법의 단점은 브라우저 특정 뷰포트 크기가 되었을 때 설정이 바뀌기 때문에 뚝 뚝 끊기며 반응하며 유연하지 않습니다.

 

 

모바일 시안의 브라우저 뷰포트의 가로 크기를 360px, 데스크탑 시안의 가로 크기를 1200px로 설정했다고 가정하였을 때 361px의 가로 크기부터는 모두 데스크탑 크기의 폰트 사이즈가 적용됩니다.

 

가로 크기가 361px 이상인 모바일 디바이스가 있다면 데스크탑 폰트 사이즈가 적용되어 매우 불편한 사용자 경험을 제공할 것 입니다.

 

 

일반화하기

 

보통 소통할 때 이야기하는 단위는 px인데 어떤 브라우저 환경에 있더라도 10px은 1이라는 단위로 설정하고 브라우저 뷰포트의 크기에 따라서 10px을 기준으로 항상 일정하게 폰트 크기가 바뀌면 좋겠습니다.

 

그럴 때 글로벌 설정을 담은 css 파일에 폰트 사이즈의 기본 설정을 해주시면 됩니다.

 

html {
    font-size: 62.5%
}

 

브라우저의 기본 폰트 크기는 16px 입니다.

 

폰트 크기를 62.5% 로 설정하게 되면 기본 폰트 크기는 10px (16 * 62.5 = 10)이 됩니다.

 

루트 html 설정의 폰트크기를 기준으로 하고 싶기 때문에 rem 단위를 사용하면 됩니다.

 

15px 텍스트를 렌더링하고 싶으면 style 속성을 1.5rem으로 주면 됩니다.

 

<div style={{ font-size: "1.5rem"; color: "blue"; }}>안녕하세요</div>

 

 

1rem = 10px