📌 티스토리 본문 글씨 크기 조정하는 방법
네이버 블로그와는 달리 자유롭게 편집이 가능한 티스토리는 각자만의 취향으로 꾸미고 싶으신 분들이 많으실텐데요. 배너, 카테고리 등 여러 가지가 있지만 그 중에서도 오늘 다룰 내용은 '티스토리의 본문 글씨 크기를 조정하는 방법'입니다. 사실 개인적으로 본문의 글씨 크기가 너무 크면 가독성이 떨어진다고 느껴져서 다른 부분보다도 이걸 제일 먼저 바꾸고 싶더라구요. 하하😎 자 그럼 어떻게 조정하는지 알려드릴게요!
✅ 티스토리 본문 크기 설정하는 방법
HTML 편집을 통해 티스토리 본문의 글씨 크기를 조정해볼게요. 이해하기 쉽도록 제가 실제 적용한 글씨 크기들을 사진을 참고용으로로 보여드릴게요. 우선 블로그 관리 - 꾸미기 - 스킨 편집 - HTML 편집으로 들어가 주세요.
CSS 클릭한 후 아무 곳에나 본문 글씨 크기를 조정하는 코드를 입력해주시면 됩니다. 위치는 상관 없지만 추후 수정이 필요할 수도 있으니 본인이 알 수 있는 곳에 입력하는 게 좋겠죠? 본문 글씨 크기 조정 코드는 어떻게 입력하는지 알려드릴게요.
🚨본문 글씨 크기 조정 코드🚨
/* (제목) */
#tt-body-page p[data-ke-size='size18'],
p[data-ke-size='size18'] { font-size: (사이즈); }
형광펜이 칠해진 부분만 본인이 원하는 대로 자유롭게 입력하시면 됩니다. 그 후 오른쪽 상단의 적용을 눌러주시면 완료! 코드의 제목과 폰트 사이즈는 어떤 값을 입력하셔도 상관없습니다. 예시로 제가 입력한 코드를 보여드릴게요.
EX) 실제 제 티스토리에 입력한 코드
/* 티스토리 폰트 사이즈 - 본문1 */
#tt-body-page p[data-ke-size='size18'],
p[data-ke-size='size18'] { font-size: 1em; }
/* 티스토리 폰트 사이즈 - 본문2 */
#tt-body-page p[data-ke-size='size16'],
p[data-ke-size='size16'] { font-size: 0.924em; }
/* 티스토리 폰트 사이즈 - 본문3 */
#tt-body-page p[data-ke-size='size14'],
p[data-ke-size='size14'] { font-size: 0.87em; }
사실 사이즈는 실제 어떻게 나오는지 적용을 해봐야 알 수 있잖아요?! 제가 입력한 본문 글씨 크기가 실제로 콘텐츠에서 어떻게 보이는 지 사진을 통해 보여드릴게요.
티스토리의 기본 폰트 사이즈는 16px = 1em = 12pt(대부분의 브라우저가 해당)입니다. 참고하셔서 본인이 원하는 폰트 사이즈를 설정하시면 됩니다. 실제 티스토리가 글쓰기 모드에서 본문 2를 기본값으로 설정해두었기 때문에 본문2의 사이즈를 자주 사용하는 사이즈로 설정해주시면 더 편하게 작업이 가능하실 거에요.
다만 폰트 사이즈는 어느 정도가 적절한 지 다들 궁금하실텐데요. 원하는 폰트 사이즈를 찾기 좋은 사이트를 추천해드릴게요.
▶️ 폰트 사이즈 사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/font-size
font-size - CSS: Cascading Style Sheets | MDN
font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex <length> 단위로 계산된 다른 항목들의 크기를 바꿉니다.
developer.mozilla.org
해당 사이트에 접속하시면 아래 사진과 같이 시도해보기 칸이 뜨는데요. 왼쪽에서 원하는 폰트 사이즈를 입력하면 오른쪽의 예문을 통해 실제 사이즈가 어느 정도인지를 알 수 있습니다. 물론 실제 적용해보면서 맞는 사이즈를 찾는 게 제일 좋습니다. 보통 CSS에서 사용되는 단위는 px, em, %, rem 등으로, 모두 기종이나 플랫폼 간의 호환성을 유지할 수 있는 상대값입니다. 어떤 단위도 가능하지만 가급적 편리한 em(기준값만 수정하면 나머지는 비율대로 조정 가능)을 쓰시는 걸 추천드려요.
▶ 자주 쓰는 폰트사이즈
| pt | em | px | % |
| 9pt | 0.75em | 12px | 75% |
| 10pt | 0.8em | 13px | 80% |
| 10.5pt | 0.875em | 14px | 87.5% |
| 11pt | 0.95em | 15px | 95% |
| 12pt | 1em | 16px | 100% |
| 13pt | 1.05em | 17px | 105% |
| 13.5pt | 1.125em | 18px | 112.5% |
| 14pt | 1.2em | 19px | 120% |
| 14.5pt | 1.25em | 20px | 125% |
기본값 : 12pt = 1em = 16px
pt : point로 워드, 한글 등 일반 문서에서 많이 사용하는 단위.
em : font-size로 해당폰트의 대문자 M의 너비를 기준으로 함
px : pixel(픽셀)로 표시장치(모니터)에 따라 상대적인 크기값을 가짐.
% : percent로 브라우저 기본 글꼴의 크기(100%)를 기준으로 상대적인 값을 가짐.
'DIGGING💡 > 티스토리 TIP' 카테고리의 다른 글
| 티스토리의 h태그 크기 변경하는 방법 (0) | 2022.07.14 |
|---|---|
| 티스토리 게시글 제목을 h1 태그로 바꾸는 방법 (0) | 2022.07.14 |
| 티스토리 줄간격 조정하는 방법 (0) | 2022.07.13 |
| 티스토리 alt 태그를 손쉽게 넣는 방법 (2) | 2022.06.29 |
| 티스토리 편집 시 Ctrl+F 검색 안 될 때 해결방법 (1) | 2022.06.27 |