티스토리 Letter 스킨 메인 화면 폰트 크기 조절

안녕하세요.

이전 포스팅에서 Letter 스킨 메인 화면의 전체 글 문구의 여백을 조절하였습니다. 이번 포스팅에서는 전체 글 문구의 폰트 크기를 주변 폰트들에 맞게 조절하여 보겠습니다.

폰트 크기를 조절하려는 이유는, 위의 그림처럼 전체 글 폰트의 크기가 너무 커 포스팅 제목이나 내용보다 전체 글 문구가 더 부각되는 것 같기 때문입니다.

이번에도 마찬가지로 크롬 브라우저의 개발자 도구를 실행시키고, 선택 도구를 클릭합니다.

선택 도구를 사용하여 3군데의 폰트 사이즈를 알아봅니다. 첫 번째는 블로그 제목, 두 번째는 전체 글, 세 번째는 포스팅 제목의 폰트 크기를 알아봐야 합니다.

각각의 영역을 마우스로 선택하여보면 위의 그림들처럼 폰트 사이즈를 알아볼 수 있습니다. 각각의 폰트 크기를 보면 블로그 제목이 28px, 전체 글이 28px, 포스팅 제목이 24px으로 확인됩니다. 전체 글의 폰트 크기를 줄여서 24px로 맞춰보겠습니다.

전체 글 영역을 선택하면 개발자 도구의 CSS 창에서 어떤 부분을 조절해야 하는지 알 수 있습니다. CSS 속성 1734행부터 시작되는 속성 값 중에서 font-size를 수정해야 하는 걸 알 수 있습니다.

티스토리 HTML 편집기를 열고 CSS 창에서 1734행을 찾습니다. 그리고 font-size의 값을 24px로 변경하고 적용을 클릭합니다.

이제 블로그 화면을 새로 고침 해서 확인해보면, 변경 전보다 전체 글 문구가 크게 부각되지 않음을 확인할 수 있습니다. 저의 경우에는 24px로 변경하였지만, 각자 원하시는 크기로 변경하셔도 무방합니다. 취향에 맞추어 더 크게 혹은 더 작게 조절하시면 됩니다.

폰트 크기를 조절하여도 폰트 굵기가 너무 굵거나 얇아서 변경하고 싶으시다면, 1734행의 속성 값 영역에 CSS 코드를 추가하여 조절 가능합니다.

위의 그림처럼 font-weight: 700; 속성 값을 추가하여 숫자로 된 부분을 조절하시면 됩니다. 기본값은 700으로 되어 있는데, 숫자가 높을수록 폰트 굵기가 두꺼워집니다. 만약 기본값 그대로 사용하시려면 font-weight는 추가하지 않으셔도 되고, 굵기를 조절하실 분들만 추가하시면 됩니다.

 

행복한 하루 보내세요.

감사합니다.