[1] 티스토리 리스트 줄 바꿈 오류 해결하기

기존에 썼던 글을 돌아보니 줄 바꿈 부분에서 문제가 있는 걸 발견했습니다.

편집기에서는 이렇게 잘 나오는데

실제로 게시물에서 나타난 것을 보면 위와 같이 엔터가 쳐져있는 것을 확인할 수 있었습니다.

그래서 HTML 구조가 어떻게 구성되어있는지를 살펴보았습니다.

p 태그로 감싸진 컨텐츠와 ::marker간 줄바꿈이 이루어져서 올바르게 보이지 않는 것을 확인할 수 있습니다.

p 태그는 기본적으로 display가 block 이기 때문에 개별 css를 적용하지 않으면 줄 바꿈이 이루어집니다.

고로 이를 수정하기 위해 관리 > 꾸미기 > 스킨 편집으로 들어갑니다.

스킨 편집 페이지의 오른쪽 상단의 html 편집을 눌러줍니다.

그 후 CSS 버튼을 클릭하면, 해당 스킨에 적용된 CSS를 확인하실 수 있습니다.

맨 밑으로 쭉- 내려서 다음을 추가해줍니다.

div.entry-content li > p {
	display: inline-block;
	margin-left : 15px;
}

게시글 클래스에 해당하는 .entry-content의 li 엘리먼트의 바로 하위 children으로 등록된 p 태그의

block 속성을 inline-block으로 변경해주고

그대로 변경하면 동그라미 점과 글이 겹치기 때문에 margin을 줍니다.

저장하고 다시 돌아보면 짜잔! 다시 정상적으로 돌아왔네요!

다른 화면상의 문제가 있거나 보완하고 싶은 부분이 있다면

지금과 같이 스킨 편집에서 CSS를 직접 편집해주셔도 좋습니다.

여기까지 티스토리 리스트의 줄 바꿈 오류를 해결해 보았습니다.

riverandeye