블로그 스팟 모바일 화면 폰트 크기 조절하기

블로그 스팟을 처음 셋팅을 하면 PC화면에서의 폰트 크기는 테마에서 맞춤설정에서 설정이 가능하다. 하지만 모바일 화면에서 폰트 크기는 테마의 맞춤설정에서 지원이 안되는 것 같다.

그래서 html 편집에서 폰트 크기를 수정하였다.

일단 이 테마는 Essential 에센셜 테마이다. 그리고 에센셜 테마를 선택한 이유는 구글 사이트 스피드가 가장 높은 점수를 받았기 때문이다.

html 편집으로 들어간다.

그리고 에센셜 기준으로 약 1800번대의 줄로 넘어가면 아래의 코드가 보인다. 그리고 아래의 코드에서는 폰트 크기에 대해서 설정이 되어있지 않다.

파랑색 코드는 폰트에 대한 크기 설정이 안되어있다.

.post-body {

  color: $(posts.text.color);

  font: $(posts.text.font);

  line-height: 1.6em;

  margin: 1.5em 0 2em;

  display: block;

}

아래 코드는 모바일 화면에서 폰트 크기를 설정할수있는 코드이다. 보라색 코드는 폰트의 크기를 18px로 수정하였다.

.post-body {

  color: $(posts.text.color);

  font: 18px/1.6em $(posts.text.font-family);

  line-height: 1.6em;

  margin: 1.5em 0 2em;

  display: block;

}

그리고 아래와 같이 주석을 추가하면 나중에 html 편집을 할때 쉽게 할수가 있다.

.post-body {

  color: $(posts.text.color); /* 본문 텍스트 색상을 설정합니다 */

  font: 18px/1.6em $(posts.text.font-family); /* 폰트 크기(18px)와 폰트 패밀리를 설정합니다. 

                                                  1.6em은 라인 높이로, 폰트 크기의 1.6배를 의미합니다. */

  line-height: 1.6em; /* 줄 간격을 설정합니다. 폰트 크기의 1.6배로 설정됩니다. */

  margin: 1.5em 0 2em; /* 상단과 하단 마진을 설정합니다: 상단 1.5em, 오른쪽 0, 하단 2em, 왼쪽 0 */

  display: block; /* 요소를 블록 수준 요소로 설정하여 전체 너비를 차지하도록 합니다 */

}

마지막으로 html에서 모바일 화면에 관련된 코드는 @media 를 찾고 800px에 대한 내용을 찾으면 된다.

@media (max-width:800px){

미디어에서 폭이 최대 800px 일때 코드가 작동되도록 하는 조건이다.