티스토리 Letter 스킨 모바일 화면 전체 글 문구 여백 조정

안녕하세요.

지난 포스팅에서는 티스토리 Letter 스킨의 모바일 화면 여백을 조절하였습니다. 전체 글 문구의 상/하 여백을 조절하였는데 폰트 사이즈는 조절하지 않았습니다. Letter 스킨의 전체 글 문구의 경우 PC 화면과 모바일 화면의 폰트 사이즈가 구분되어 있지 않습니다. 따라서 PC 화면의 폰트 사이즈가 모바일 화면에도 동일하게 적용되도록 기본값이 설정되어 있습니다. 이번 포스팅에서는 Letter 스킨 모바일 화면의 전체 글 문구의 폰트 크기를 PC 화면과 다르게 조정해보겠습니다.

크롬 개발자 도구를 실행시키고 선택 도구로 전체 글 문구와 포스팅 제목을 선택합니다. 그럼 위의 그림과 같이 전체 글 문구의 폰트 크기가 포스팅 제목의 폰트 크기보다 훨씬 크다는 것을 알 수 있습니다. 전체 글 문구의 폰트 크기가 크다 보니  모바일 레이아웃의 전체적인 비율이 맞지 않아 보입니다.

왼쪽 그림은 전체 글 문구의 CSS 속성, 오른쪽 그림은 포스팅 제목의 CSS 속성입니다. 둘을 비교해보면 포스팅 제목의 CSS 속성은 모바일 해상도 @media screen and~ 속성이 적용되어 있지만, 전체 글 문구의 경우는 별도로 해상도가 지정되어 있지 않습니다. 즉, PC 화면의 폰트 크기가 모바일 화면에도 동일하게 적용이 되는 것입니다.

티스토리의 HTML 편집기에서 CSS 탭으로 들어갑니다. 그리고 찾기 기능을(Ctrl+F) 사용하여 category_list를 검색합니다. 그럼 왼쪽 그림과 같이 category_list의 모바일 화면 구성 영역을 찾을 수 있습니다.

.category_list .title_category {

font-size: 18px;

font-weight: 800; }

1797행부터 위의 속성 값을 추가하고 적용을 클릭합니다. 모바일 화면에서 폰트 크기는 18px이고 굵기는 800이라는 것을 의미합니다.

[참고] font-weight 속성을 추가한 이유는, 전체 글 문구에는 h2 태그가 적용되어 있고 포스팅 제목에는 strong 태그가 적용이 되어 있기 때문입니다. 둘 사이의 세밀한 속성 값이 차이가 있기 때문에 전체 글 문구에 font-weight 속성을 추가하여 포스팅 제목의 폰트와 최대한 비슷하게 설정한 것입니다. 물론 전체 글 문구를 strong 태그로 변경하면 되지만 html 편집을 해야 하고 PC 화면을 한번 더 손보아야 해서 복잡하기에 font-weight 속성을 사용한 것입니다. 

모바일 화면을 새로 고침 해보면 위의 그림과 같이 전체 글 문구의 폰트 크기가 줄어든 것을 확인할 수 있습니다. 제가 설정한 값은 임의의 값이므로 개인 취향에 맞게 폰트 크기와 굵기를 설정하시면 됩니다.

 

행복한 하루 보내세요.

감사합니다.