본문 바로가기

Blog/Thoughts

티스토리 에디터에서 Span이 강제로 붙는 버그 알아보기

티스토리 오류


티스토리의 WYSIWYG 에디터는 한 문장을 작성시 자동으로 p 태그로 감싸며, 줄 바꿈시 <p><br/></p>라는 태그를 자동 생성합니다.



그런데 가끔 장문의 글을 작성해놓고 보면 중간중간에 폰트가 작아지는 경우를 볼수가 있습니다. 이때 HTML 보기를 선택하면 단어 사이에 <span style="background-color: transparent; font-size: 9pt; line-height: 1.5;">라는 태그가 끼어들어가있고 빈칸은 &nbsp;로 대체 된것을 볼 수 있습니다. 이는 일종의 버그로 보입니다. 추가로 엑수시아님의 올린 포스팅에 의하면 이런 증상은 이전에 없다가 요즘 생겼다고 포스팅 하셨습니다.http://zion437.tistory.com/275


그러면 "어떤 상황에 이런 버그가 나타나는가?"를 알아봤습니다. 여러가지 방법이 있겠지만 크게 2가지 경우에 나타 납니다. 글을 작성하다가 다른 문장에 있는 단어를 복사하여 현재 작성중인 곳 바로 뒤에 붙일때, 그리고 한 문장을 줄 바꿈했다가 다시 다른 문장 뒤에 붙이게 될때.


첫번째는 붙여지는 단어를 span으로 둘러 싸버립니다. 그것도 미리 지정한게 아니라 인라인 스타일을 써서 css에서 span에 !important를 적용하지 않는한 제 멋대로 스타일이 바뀌게 됩니다. (span 태그에 함부로 !important를 쓰면 블로그 스킨에 재앙이 옵니다. 조심하세요)


두번째 경우에는 줄바꿈을 했다가 다시 그줄을 위에 줄과 합치는 상황에서 발생하는데, 이 때는 따라 붙는 문장 전체를 span이 감싸게 됩니다. 그리고 빈칸은 nbsp로 전환 되고요.


왜 이런 일이 발생하는 지는 모르겠으나, 3천자 이상의 장문을 작성해놓았는데 span 태그가 판을 치고 있다면 머리에 스팀이 오르기 시작합니다. -ㅅ-

이런일을 방지하려면 글을 적기 시작하면 되도록 멈추지 말고 쉬지 않고 작성합니다. 문단을 왔다 갔다 하면서 작성하면 span 태그가 출현할 확률이 높아집니다.

다른 문장에서 단어나 문구를 가져다 쓰려면 HTML 모드에서 작업합니다. 오타 수정시에는 해당부분에 블록을 지정하고 덮어 씌우는 방식으로 합니다. 만약 뒤에 커서를 두고 수정한 뒤 앞에 항목을 지워버리면 또 span 태그가 자동생성 됩니다.

일단 에디터의 근본적인 결함 같지만 티스토리에서 고쳐주기 전까진 어쩔 수 없이 써야 겠죠.


저 같은 경우 그마저도 귀찮아서 <span style="background-color: transparent; font-size: 9pt; line-height: 1.5;"> 부분을 HTML 에디터(Notepad++, Editplus, Sublime Text, Coda)를 이용해서 <p>로 바꿔 버립니다. -_-

이렇게 하면 색상 집어 넣은게 약간 꼬이는데 그 부분만 따로 수정합니다.


꽈지쭈


고치라는 버그는 안 고치고 모바일만 신경쓰는 티스토리 미워요! (span 태그가 한 문장에서 동시에 나타나면 이런 끔찍한 일이 생깁니다.)