티스토리 본문 문단 여백 조정하기

티스토리에서 글을 작성할 때 아래와 같이 엔터를 쳐도 문단 사이에 여백이 없어 잘 구분이 안 되는 경우가 있습니다. 

이 문제가 나타날 경우 콘텐츠 > 설정에서 단락 앞뒤에 공백을 '사용합니다'로 설정하면 글 작성 시에 위와 같은 문제가 나타나지 않을 것입니다.

일부 티스토리 스킨에서는 이 설정을 '사용하지 않습니다'로 지정할 것을 요구하기도 합니다.

문단 내 단락 간 여백을 조정하고 싶은 경우 아래의 방법을 이용할 수 있습니다.

티스토리 본문 문단 여백 조정하기

Poster 스킨에서 단락 앞뒤에 공백을 '사용합니다'와 '사용하지 않습니다'로 설정할 경우 다음과 같이 둘 다 문단 간 여백이 마음에 들지 않을 것입니다.

단락 앞뒤 공백 사용 시

단락 앞뒤 공백 사용하지 않을 경우

단락 앞뒤 공백을 사용할 경우에는 문단 간 여백이 다소 넓은 감이 있고, 사용하지 않을 경우에는 너무 좁습니다. 이 경우 다음과 같은 CSS 코드를 적용하여 문단 간 여백을 조정할 수 있습니다.

/* Poster 스킨 - 문단 여백 */
.entry-content p {
    margin-bottom: 12px !important;
}

숫자는 적절히 변경하여 마음에 드는 값을 찾도록 합니다. CSS 코드는 꾸미기 > 스킨 편집 > html 편집 > CSS 탭 하단에 추가하면 됩니다.

위의 코드는 포스트 스킨 기준으로 한 것이며 스킨에 따라 조금씩 차이가 있습니다.

빈 문단 제거하기

단락 앞뒤에 공백을 '사용하지 않습니다'로 설정할 경우 글 작성 시에 문단 간 여백이 없는 것처럼 보여서 강제로 엔터를 치는 분들이 계실 것입니다.

그러면 아래 그림과 같이 간 문단 사이에 <p>&nbsp;</p>와 같은 빈 문단이 추가됩니다.

이런 라인이 너무 많다면 다음과 같은 jQuery로 빈 문단을 제거할 수 있습니다.

<script>
$('p').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
        $this.remove();
});
</script>

위의 스크립트를 적용하면 다음과 같은 빈 문단이 제거됩니다.

<p></p>
<p> </p>
<p>&nbsp;</p>
<p>
</p>

추가: &nbsp; 제거 또는 공백으로 변환

&nbsp;를 제거하거나 공백(' ')으로 바꾸고 싶은 경우 다음과 같은 jQuery 스크립트를 응용할 수 있습니다(출처: jsfiddle).

$(document).ready(function() {
    $('p').each(function(){
        $(this).html($(this).html().replace(/ /gi,''));
    });
});

※티스토리에서 복붙 시 추가되는 &nbsp; 공백문자를 제거하는 방법을 다음 글에서 상세히 다루어보았습니다.

avada.tistory.com/2160

티스토리   제거하기 - 복사하여 붙여넣기할 때 생기는 공백 문자 문제

참고

avada.tistory.com/1784

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

avada.tistory.com/1724

티스토리 매거진 스킨: 본문 글자 크기 변경하는 방법