본문 글 간격을 조절하면 가독성이 확보됩니다.
이처럼 이번 글에서는 CSS 코드를 활용하여
티스토리에서 본문의 가독성을 높히는 방법을 알려드리겠습니다.
(letter-spacing, line-height, font-size)
1. CSS 적용된 라인(줄) 찾기
스킨 편집에 들어가 수정하기 전, 어느 라인의 CSS를 수정해야 하는지 알아야 합니다.
크롬 단축키 Ctrl + Shift + C(개발자 도구)를 누르고 자신의 글의 본문에 마우스 커서를 올려봅시다. (제목이 아닙니다. 글의 본문입니다)
그럼 본문 위에 저렇게 파란색 박스가 생기는데요. 클릭해 봅시다.
오른쪽에 있는 크롬 개발자 도구의 Styles 탭에 있는 요소들 중에 font-size 속성을 찾는다. 저의 경우는 .article_content. article_view라는 요소에 font-size가 들어있었습니다.
여기서 포인트는 자신의 본문에 적용된 font-size가 들어있는 요소를 찾는 겁니다.
우측에 보시면, style.css?_...7726905:701로 끝나는 걸 알 수 있습니다. 여기서 마지막 숫자 701에 주목해 보자. (※ 스킨마다 다르니, 자신의 숫자를 기억합시다)
이렇게 자신의 본문을 수정하기 위해서는 CSS의 몇 번째 줄의 코드를 수정해야 하는지 알 수 있다.
저의 경우는 701번째에 있는 CSS를 수정하면 본문이 수정된다는 걸 알 수 있습니다. (다시 말하지만, 사람마다 다릅니다. 자신의 본문에 적용된 font-size를 찾아주세요)
2. 스킨 편집 들어가기 (CSS)
선요약하자면, 다음과 같습니다.
- 자신의 블로그 관리에 들어간다.
- 꾸미기의 스킨 편집 클릭
- html 편집 클릭
- CSS 탭 클릭
3. CSS 코드 수정하기 (★)
CSS에서, 아까 찾은 701번째를 찾으면 다음과 같은 코드가 나타납니다. (자신이 찾은 번호)
여기서 본인이 적절하다고 판단하는 수치를 입력해 주세요
font-size : 글자 크기
font-size: 17px;
font-size는 말 그대로 폰트 사이즈(=글자 크기)입니다 최소 14px, 최대 18px정도로 해둡시다. 저는 17px로 해놨습니다.
line-height : 행간 조절
line-height: 33px;
행간은 글과 글 사이의 간격입니다. 본문 행간(line-height)은 글자 크기의 1.7~1.8배를 추천합니다. 저는 33px로 해놨습니다.
letter-spacing : 자간 조절
letter-spacing:-0.1 rem;
(숫자 앞에 마이너스가 있어야 줄어듭니다)
자간은 글자 사이의 간격을 뜻합니다. 이걸 조금 줄이면 가독성에 도움이 됩니다. 저는 -0.1rem으로 해놨습니다.
4. 응용
이 방법을 응용하여 글 제목이나 블로그 이름도 수정이 가능합니다.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
