'단락 앞뒤에 공백을 허용한다'고 했는데 왜 안 띄워지지?
티스토리를 하다 보면 문단 간에 간격을 띄우고 싶은 순간이 있다.
특히 나 같은 경우엔 노션에서 작성한 글을 티스토리로 옮겨서 써서 더 그랬다. 노션에서 티스토리로 옮길 때 Markdown 형식으로 옮기다 보니 문단 사이에 있던 빈 줄들이 티스토리에 붙여넣음과 동시에 모두 사라져버렸다.
그래서 문단 간에 간격을 띄우기 위한 방법을 찾아보았다.
인터넷을 보면 블로그 설정->콘텐츠->설정으로 들어가서 '단락 앞뒤에 공백을 사용하지 않습니다'를 '사용합니다'로 바꾸면 문단(단락) 사이를 띄울 수 있다고 한다.
그런데... 내 경우에는 이 옵션이 정상적으로 동작하지 않았다.
글을 작성할 때에는 정상적으로 문단 사이에 띄어쓰기가 되어 있었다.
그러나 미리보기를 눌러서 완성된 글을 보면 모든 문단이 아주 딱 달라붙어 있었다.
이를 해결하기 위해 블로그 스킨의 CSS 코드를 수정해보기로 했다.
블로그 스킨을 바꾸려면, 설정->꾸미기->스킨 편집으로 들어가서 html 편집 버튼을 눌러줘야 한다.
상단의 언어를 CSS로 바꿔주면 원하는 CSS 코드를 수정할 수 있다.
HTML에서 문단은 <p> 태그를 통해 표시된다(HTML <p> 태그 - ofcourse). 그리고 티스토리에서 본문은 .entry-content p가 여러 가지 설정 값을 갖고 있는 것으로 알고 있다.
CSS 코드 창을 한 번 클릭하고 CTRL+F를 눌러서 '.entry-content p'를 찾아보자.
가장 위에 나오는 .entry-content p { ... }가 바로 본문의 설정을 맡는 부분이다.
그런데 어라, 이미 margin-bottom이 설정되어 있다. margin-bottom은 스타일의 하단 부분에 간격을 만들어주는 옵션인데, 왜 그러면 글을 편집할 때는 간격이 잘 보이는데 실제 글에서는 안 보이는걸까?
뭔가가 p에 대한 margin을 0으로 만들고 있는 것이 틀림없다. 한 번 찾아보자.
완성된 글에서 <p> 태그를 가진 요소를 하나 클릭해보니, 원흉을 찾을 수 있었다.
문제는 바로, .tt_article_useless_p_margin p에서 p에 대한 margin-top, margin-bottom을 강제로 0으로 만들고 있었다.
여기서 !important가 나오는데 이는 CSS에서 나중에 설정한 속성 값을 적용하지 않도록 금지하는 코드이다. (여기 링크로 단 블로그의 작성자분께서 잘 정리해주셨으니 궁금하신 분들은 참고할 것! CSS / 기초 / !important – CODING FACTORY)
심지어 이건 찾아보면 티스토리 자체적으로 적용한 코드라서 수정할 방법도 없다. 어떻게 수정할까?
다행히 !important로 설정한 속성 값은 !important로 속성 값을 다시 설정할 수 있다.
그래서, 만약 <p> 속성의 margin 값을 변경해도 도무지 적용이 안된다면, margin 값 뒤에 !important를 붙여서 강제로 수정해버릴 수 있다.
이제 드디어 문단 간격을 설정할 수 있다!
댓글