티스토리 블로그를 작성하다 보면 가독성을 위해서 본문의 폰트 및 자간을 수정하고 싶을 때가 많을 것 같은데요. 이번에는 자간(글자 높이)을 수정하는 방법에 대해서 알아보겠습니다
2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는방법 - 1. 블로그 제목수정하기
티스토리 블로그 스킨 편집하는방법 - 1.블로그 제목수정하기
티스토리 블로그의 스킨을 편집하려고 하면 HTML, CSS 편집을 이용해야 해서 불편하기도 하고 복잡해 보여서 어떤 부분을 건드려야 할지 막막하고 어렵게 느껴지기도 합니다 하지만, 제가 소개해
sangulife.tistory.com
2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편집하는방법 - 2. 블로그 홈 게시글 폰트 사이즈 변경
티스토리 블로그 스킨 편집하는방법 - 2.블로그 홈 게시글 폰트 사이즈 변경
블로그 이름 수정하는 방법에 이어서 이번에는 블로그 홈에서의 게시글의 제목 및 내용의 폰트를 수정하는 방법을 알아보겠습니다 2023.03.29 - [티스토리 편집 및 설정] - 티스토리 블로그 스킨 편
sangulife.tistory.com
▶ F12활용하여 블로그 본문 태그 찾기
본인이 썼던 게시글 아무거나 들어가서 저번처럼 F12를 누른후 위의 화살표 버튼을 클릭해 줍시다
그리고, 게시글의 본문에 커서를 가져다 대면 위와 같이 "p"라고만 태그가 뜨는 것을 확인할 수 있는데요
하지만 p라는 태그만으로는 찾기 힘드니 본문 전체에 파란 박스가 써지는 부분에 커서를 가져가보겠습니다
(커서를 본문 전체 부분에 파란 박스로 씌우는 부분을 찾다 보니 에드센스 광고 바로 밑에 부분에 커서를 가져가니 쉽게 확인을 할 수 있었습니다)
위와 같이 div.article-view라는 태그를 확인을 할 수 있었습니다
▶ 자간 수정하기
이제 원하는 태그를 찾았으니 편집을 해봐야겠죠
"스킨편집" - "html편집" - "CSS편집"으로 들어가겠습니다
CSS편집에 들어간 뒤에 Ctrl+f로 "article-view"를 검색하면 위와 같이 다양한 태그들이 검색이 되는데요
이때, 처음에 확인했던 "p" 태그 기억하시나요?
article-view p 가 바로 본문을 수정하는 태그가 되겠습니다
자간을 설정하는 부분이 바로line-height인데요
이 부분을 20px와 32px로 각각 적용시켜서 확인해 보겠습니다
왼쪽이 line-height를 20px로 설정했을 때이며 오른쪽이 32px로 설정했을 때인데요
확실히 차이가 나는 것을 확인할 수 있습니다
자간이 좁았을 때는 읽기 답답한 느낌이 들었다면 넓혀진 자간은 훨씬 깔끔해 보이기도 하고 읽기 편안한 느낌을 주는것 같습니다
또한, 본문 폰트크기(font-size) 및 폰트색상(color)도 수정가능하니 원하는 느낌이 나도록 하나씩 만져보세요~
'티스토리 편집 및 설정' 카테고리의 다른 글
| 티스토리 블로그 스킨 편집하는방법 - 2.블로그 홈 게시글 폰트 사이즈 변경 (0) | 2023.03.29 |
|---|---|
| 티스토리 블로그 스킨 편집하는방법 - 1.블로그 제목수정하기 (6) | 2023.03.29 |
| 티스토리 윗첨자와 아랫첨자쓰기 (HTML 편집모드) (4) | 2023.01.10 |