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

2021. 1. 22. 11:01 | 댓글 11

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

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

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

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

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

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(/&nbsp;/gi,''));
    });
});

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

avada.tistory.com/2160

 

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

외부 글이나 콘텐츠를 복사하여 티스토리에 붙여넣기 하면 줄 바꿈 없는 공백문자인 가 삽입됩니다. 티스토리에서 외부 콘텐츠를 복사/붙여 넣기 할 때 생기는 문자를 제거하는 방법에 대해 간

avada.tistory.com

참고

avada.tistory.com/1784

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거

avada.tistory.com

avada.tistory.com/1724

 

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

이 블로그에는 현재 가장 최근에 티스토리에서 공개한 Book Club 스킨이 적용되어 있습니다. 이 스킨을 사용하기 전에 Magazine (매거진) 스킨을 적용했었습니다. 매거진 스킨도 나름 깔끔하고 괜찮

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    ◀↗↓↖▶바인

    안녕하세요.
    혹시 공백을 뜻하는 &nbsp;만 없앨려면 위 제이쿼리 문을 어떻게 수정하면 될까요?
    그리고 제이쿼리문을 스킨 head 에 넣으면 되는건가요?

  2. thumbnail
    2021.01.22 18:27

    비밀댓글입니다

  3. thumbnail
    ◀↗↓↖▶바인

    안녕하세요.

    북클럽 스킨을 사용하는 블로그에 적용해보려고 하는데요...
    적용이 안되는것 같아요.

    포스터에서는 테스트 해보셨다고 하니...스킨마다 적용이 안되나 봅니다.
    조언 감사합니다.

  4. thumbnail
    ◀↗↓↖▶바인

    감사합니다.
    왜 안되는지 모르겠지만 적용이 안되네요. 다른 스킨에서도 한번 해보겠습니다.
    제이커리 버전이 안맞아서 그런가해서 1.6으로 테스트 해봐도 안되네요.
    그럼 오늘 조언 감사 드립니다.

  5. thumbnail
    쓰윔

    블로그 스킨을 만지작거리면서 느끼는건데 문단 여백과 자간,높이가 가독성에 많은 영향을 줘서 많은 연구가 필요한 것 같아요.

    P.S 늦었지만 새해 복 많이 받으세요.

  6. thumbnail
    Deborah

    전 그냥 있는 것에서 여백을 주곤 하는데 이런 방법도 있네요

  7. thumbnail
    空空(공공)

    기본적인 양식에 이런 기능이 있었으면 좋겠습니다
    전에는 있었거든요