(jQuery) 티스토리 이전 글에서 문단 공백이 적용되지 않을 때

증상

문단 앞뒤에 공백이 적용되지 않는다.
Shift+Enter만 붙어야 하는데, Enter를 아무리 눌러도 줄 바뀜 사이에 공백이 추가되지 않는다.

문단 설정하라는 글은 쉽게 볼 수 있지만, 설마 그걸 안 해본 사람이 있을까? 할 정도로 전혀 도움이 되지 않는다.

글 편집 화면에서 HTML을 보면 <p>와 <br> 뿐이다.
도대체 뭐가 문단 공백을 막는 걸까? 🤔
F12 개발자 도구를 사용하여 문단을 찍어보았다. 🔍

그랬더니...

찾았다!

정상으로 문단 공백이 표시되는 글에는 나타나지 않던 CSS 클래스가, 비정상으로 표시되는 글에 나타나 있는 것이다.
.tt_article_useless_p_margin 클래스는 서버 측에서 생성하는 것 같다.
이 클래스는 다음 파일에 정의되어 있다.

uselessPMargin.css.

이 파일의 경로는 https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-cb2abc4dea94928f495fdb048785193d90ad4cf3/static/style/uselessPMargin.css 이다.

내용은 딱 한 개뿐이다.

.tt_article_useless_p_margin p {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

이 코드가 문단 공백을 없애버린 것이다. 그것도 important 하게.
사용자가 해결할 수 있는 방법은 강제로 재지정을 하는 것뿐이다.

 

해결하기

잠깐, 여기서 문제는 아래처럼 CSS를 건들면 엉망이 된다. 공백이 없어야 하는데도 무조건 적용이 되므로 CSS는 건들면 안 된다.

.tt_article_useless_p_margin p { margin-bottom:32px !important; margin-top:32px !important;}

그래서 jQuery를 사용하여 클래스 이름을 지워버려야 한다.

 

<script>
$("div").removeClass( "tt_article_useless_p_margin" );
</script>
</body>

스킨 편집의 HTML 탭에서 위 <script> 코드를 </body> 위에 삽입한다.
.removeClass() 메서드는 해당 개체의 클래스 이름을 지워버린다. 😉
문제의 글 페이지를 새로고침 하면 최근글처럼 자연스럽게 문단에 공백이 생긴 것을 확인할 수 있다. 😍👍