반응형

2023년 11월, 티스토리의 에디터에 변화가 생겼습니다.

본문의 줄 바꿈과 관련된 것으로, CSS가 변경되었습니다.

Enter 키를 눌러서 줄 바꿈을 하면 Shift+Enter 키를 눌렀을 때와 간격 차이가 발생해야 하는데, 이를 막기 위해 CSS에 간격을 줄이는 코드가 추가되었습니다.

글 설정과 무관하게 적용됩니다.

content.css:16

.content p + p {
    margin: 1px auto 0;
}

top 부분의 간격을 1px로 지정하여 p와 p 사이의 간격을 1px로 줄였습니다. 이에 따라 문장과 문단의 구분이 어려워지면서 에디터 이용에 불편을 줄 수 있습니다.


2023-11-09. 카카오에 문의하니 CSS가 변경되었습니다.

2023-11-10. 위 코드는 그대로이지만 아래 코드가 생겼습니다.

editor-content.css: 12~15

.content p+p, .content p {
    margin-bottom: 30px;
}

그런데 이 코드는 또 다른 문제가 있습니다.

.content 내의 모든 p에 대해 마진을 적용해 버립니다. 이 말은 .content>p>p>p>p>p 처럼 p 내에 있는 p에도 적용되는 것입니다. p+p 는 연속된 p에만 적용하는데, 옆에 하나의 p가 병렬 조건으로 붙었기 때문에 p+p는 의미가 없어집니다.
또, <hr/> 이나 <pre/> 등의 기타 태그에 전용 마진(Top)이 있는 경우, 허벌나게 벌어집니다. 에디터와 결과 페이지의 차이가 크게 발생하는 것입니다.

아무래도 티스토리 디자인팀 중 기존 담당자가 일을 포기한 것 같습니다. CSS 초보자가 작업하는 것이 틀림없습니다.

2023-11-16. 얼렁뚱땅 작업이 완료된 것 같습니다. 그런데 예전만큼 깔끔하지 않습니다. 어쩔 수 없지요. 결과물을 에디터에 맞출 수밖에요.

아래와 같이 답변 메일이 도착했습니다.

현재는 해당 증상에 대해 개선하여
'단락 앞뒤에 공백을' "사용합니다"로 설정 후 '엔터' 시 한 줄 공백이 떨어지도록 적용되어 있습니다.

아니, 이건 원래 있던 기능이잖아요?! 내가 문의한 내용은 '줄 바꿈이 왜 이모양이냐, 왜 CSS를 바꿨냐, 왜 공지를 안 하냐'인데, 엉뚱한 답변을 합니다. 대충 얼버무리면서 공짜니까 주는 대로 먹으라는 뜻일까요.

반응형

관련글