티스토리 블로그 관리 #5 - P태그 여백 조정

티스토리 관리 관련 문서

1. 초기 세팅
2. 검색엔진 등록
3. 단축키 활용
4. 소제목 꾸미기
5. P태그 여백조정
6. 관련글 목록 만들기

포스팅을 할 때 가장 많이 사용되는 요소는 바로 문단을 나타내는 P태그입니다. 포스팅의 대부분의 문장이 P태그 속에 있다고 해도 과언이 아닌데요. 가독성에 있어 가장 중요한 영향을 미치는 요소이니 만큼 P태그 편집에 대해서 알아보겠습니다.

목차

P태그란?

티스토리 P태그 개념

1. 티스토리 P태그는 HTML에서 <p>로 표현되는 영역입니다.
2. 포스팅의 본문에서 1개의 문단을 구성합니다.
3. 가독성에 영향을 미치는 요소는 2가지: 줄간격과 아래여백입니다.
4. 즉, Lineheight와 MarginBottom 값을 잘 조정해야합니다.

P태그 CSS 편집

티스토리 P태그 편집 방법

1. 블로그 관리자 모드에서 스킨편집에 접속합니다.
2. HTML편집 → CSS편집으로 접속합니다.
3. CTRL +F 를 누른 뒤 p {를 검색합니다.
4. p태그에 lineheight:28px; margin-bottom:28px; 추가합니다.

#1스킨인 경우라면?

1. #1 스킨이라면 .skin_view .area_view p { 부분을 편집해주면 됩니다.

아래 여백 미적용 오류

경우에 따라 아래 여백을 주었음에도 반영이 안될 수 있습니다. 블로그 관리 → 콘텐츠 → 설정 에서 단락 앞뒤에 공백을 사용하지 않는다는 옵션이 설정되어 있는 경우가 그렇습니다.

"단락 앞뒤에 공백을 사용하지 않습니다." 옵션이 켜져있으면 티스토리는 jscript를 통해 p태그의 여백을 강제로 0으로 만들어버립니다.

이에 대한 해결 방법은 아래와 같습니다.

티스토리 p태그 여백 적용방법

1. F12를 눌러 개발자 도구에 접속합니다.
2. 문단을 선택해 p태그의 CSS를 확인합니다.
3. p태그의 클래스(#1 스킨은 "".skin_view .area_view p" )
4. .tt_article_useless_p_margin p{ margin-bottom: 0 ! important; }가 있는지 확인합니다.
5. 블로그 관리자의 CSS 편집으로 이동합니다.
6. 3번의 parent class (".skin_view") 과 4번을 합쳐서 아래여백을 재할당합니다.
7. 즉, .skin_view .tt_article_useless_p_margin p{ margin-bottom: 28px ! important; } 입력

문제가 해결되는 이유

1. tt_article_useless_p_margin의 !important 속성 때문에 덮어쓰기가 안 되는 것입니다.
2. 따라서, 같은 useless_p_margin에서 !important 속성으로 다시 할당을 해줘야합니다.
3. 본문마다 tt_article ... p_margin 이 속한 클래스가 다르기 때문에 클래스 이름을 확인해준 뒤 위와 같이 조치해주면 해결됩니다.

참고할 사항

티스토리 블로그 관리#1 - 초기 세팅

티스토리 블로그 관리#2 - 검색엔진 등록

티스토리 블로그 관리#3 - 단축키 활용

티스토리 블로그 관리#4 - 소제목 꾸미기 (사각, 둥근 스타일)

티스토리 블로그 관리 #5 - P태그 여백 조정