티스토리 본문 줄간격 늘리기

티스토리 본문 줄간격 늘리기

 

스토리 본문 내용을 작성하다가 보면 내용의 줄간격이 상당히 좁아서 갑갑하다는 느낌이 드는 때가 있습니다. 이렇게 줄간격이 좁으면 읽을 때 가독성도 떨어지고 보기도 싫죠. 잠시 본문 줄간격을 어떻게 늘려보나 싶어서 검색을 해보니, 우선 본문의 줄간격을 매번 변경을 해주는 방법이 있더군요. 하지만, 이 방법은 매번 줄간격을 설정해 주어야 하다보니 다소 불편한 감이 있고, 가장 좋은 방법은 티스토리 스킨에 있는 CSS를 조금 수정해 주는 방법이 가장 좋을 듯 보입니다.

 

 

 

 

티스토리 스킨 CSS

 

본문의 줄간격을 확인하려고 보니, CSS에서 줄간격을 어떻게 표현하는지 알아야 했습니다. 줄간격은 line-height로 표현이 되고 그 값은 em 이라는 단위를 사용하고 있었습니다. 물론 제가 사용하는 스킨에서의 이야기이고 다른 스킨은 다른식으로 표현이 되겠죠.

 

em, %, pt 등의 단위를 사용해서 line-height를 조정해주면 되겠습니다. 우선 em의 경우 적절한 수치를 입력해 보고 가장 마음에 드는 수치를 선택하는 방식으로 해보셔요. 수치 조정을 해보니 em 이나 % 보다는 pt로 조정하는 것이 조금 수월한 듯 보였습니다.

 

 

티스토리 CSS 수정

 

 

[관리자] - [꾸미기] - [HTML/CSS 편집]

 

순으로 들어가면

 

본문 줄간격 조정을 할 수 있답니다.

 

 

 

 

 

HTML/CSS 편집 창으로 들어가면

 

우측에 아래와 같은 화면이

 

뜹니다. CSS 탭을 선택하고

 

[Ctrl + F] 를 누르면

 

상단과 같이 검색 창이 나오게 되는데요,

 

'line-height' 검색하면

 

해당 단어가 형광색으로

 

마킹이 됩니다.

 

 

 

티스토리 블로그 스킨에 따라

 

해당되는 부분을 수정해야 하는데,

 

일반적으로 CSS의 상단에

 

있는 'line-height'를 수정해주면

 

좋을 듯 싶네요..

 

 

이것 저것 변경을 하다가 보니

 

저는

 

'line-height: 20pt' 가

 

가장 마음에 드네요.

 

아래는 각각의 수치를 변경해 본

 

샘플입니다.

 

 

 

 

 

 

 

'line-height = 1.6em'

 

 

 

'line-height = 1.8em'

 

 

'line-height = 180%'

 

 

 

'line-height = 20pt'

 

티스토리 본문 줄간격 변경해보니

 

 

이 본문은 편집상에

 

보여주는 줄간격입니다.

 

폰트 11pt로 변환해보면 위와 같이

 

줄간격이 무척 답답해 보입니다.

 

 

'line-height = 20pt' 로

 

변경을 해주고 미리보기를

 

해보면 편집창은 그대로 이지만,

 

위와 같이 시원 시원한 줄간격으로

 

변경을 시킬 수 있답니다.