다음 파워에디터 불만(3)

SPAN 태그 무한 복제 문제

최근 업무 문제로 카페와 블로그를 돌다 보니 또 한번 에디터의 요상한 버그를 찾아내었습니다. 카페쪽 에디터의 문젠가 했더니, 블로그도 동일하더군요. 문제는 이렇습니다.

[Comming Soon]

위와 같은 글자를 적는데(글상자 제외) FF3에서 가운데 정렬이 먹히지 않고 왼쪽 정렬이 되어버리는것이었습니다. 반면 IE8에서는 가운데 정렬이 잘 되고요. 뭔가 소스에 문제가 있는것 같아 HTML을 열어봤습니다. 봤더니 이건 뭥미.. 필요 이상으로 SPAN 태그들이 중첩되어있었던겁니다.

위 글씨는 아래 정도의 소스만 있으면 충분히 표현할 수 있습니다.

<p style="text-align: center;"><span style="font-family: Verdana; font-size: 18pt;">[<span style="color: rgb(227, 22, 0);">Comming Soon</span>]</span></p>

하지만, 실제로 까보니 소스가 이랬습니다.

<p style="text-align: center;"><span style="font-family: Verdana;"><span style="font-size: 18pt;"><span style="font-family: Gulim;"><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">[</span></span></span></span></span></span><span style="color: rgb(227, 22, 0);"><span style="font-family: Gulim;"><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">Comming Soon</span></span></span></span></span></span></span></span></span><span style="font-family: Verdana;"><span style="font-size: 18pt;"><span style="color: rgb(227, 22, 0);"></span><span style="font-family: Gulim;"><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">]</span></span></span></span></span></span></span></span></p>

위와 같이 제가 어느 순서로 서식 변경을 했는지 알아볼 수 있을 정도로 소스가 중첩되어있습니다.

음.. 폰트를 Verdana로 바꿨다가, 폰트 사이즈를 18pt로 정하고, 굴림, 바탕, 돋움, 궁서, Arial, Verdana 순으로 수정했군요. 그래서 뭔 이런 어이없는 경우가 다 있나.. 곰곰히 생각해봤습니다. 아무리 생각해도 너무 막장이라.. 일단 아래와 같은 샘플로 테스트 해봤습니다.

1234567ㄹㅇㄴㄻㄹㅇㄴㄻㄴ

그냥 일반 문자열을 적고 전체 블럭 지정한 다음, 가운데 정렬을 하고 굴림, 바탕, 돋움, 궁서, Arial, Verdana 순으로 변경했습니다.

<p style="text-align: center;"><span style="font-family: Verdana;">1234567ㄹㅇㄴㄻㄹㅇㄴㄻㄴ</span></p>

위와 같은 코드가 나왔습니다. 별 군더더기 없이 준수한 상태입니다.

그래서 아래와 같이, 텍스트 일부를 볼드 지정하고 블럭 지정한다음, 똑같이 폰트를 바꿔봤습니다.

ㄹㅇㅁㄴㄹㅇㄴㄹㅇㄴㅁㄹㅇㄴㅁㄹㅇㄴㅁ

결과는 아래와 같습니다.

<p style="text-align: center;"><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">ㄹㅇㅁㄴㄹㅇㄴ</span></span></span></span></span><span style="font-weight: bold;"><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">ㄹㅇㄴ</span></span></span></span></span></span><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;">ㅁㄹㅇㄴㅁㄹㅇㄴㅁ</span></span></span></span></span><span style="font-family: Batang;"><span style="font-family: Dotum;"><span style="font-family: Gungsuh;"><span style="font-family: Arial;"><span style="font-family: Verdana;"></span></span></span></span></span></p>

볼드 외에 일부 색지정을 해도 동일하게 어긋나버리더군요.

역시나 네이버 스마트에디터로 실험해보니 아무 문제 없었습니다.

저번 포스팅 [다음 파워에디터 불만]에서 지적했던

* 에디터상에서 HTML소스를 넣었을 때 텍스트로 인식하지 않고 소스를 해석해서 보여주던 문제는 수정

  (그래서 위와 같은 글을 쓸 수 있었다..)

* hspace=1 vspace=1 소스 꼬아놓는 문제는 아직 남아있음.

* 글상자 사용시 간혹 밑줄 표시 되는 문제는 아직 남아있음.

* 첨부 버튼의 좁은 클릭 영역 문제는 수정

* 글상자 위에 빈줄 표시되는 문제는 남아있음

저번 포스팅 [다음 파워에디터 불만(2)]에서 지적했던 첨부 이미지 원본이 다운로드 안되는 문제는 아직 남아있음. 그리고 다시 체크 해보니 가관.

알파채널 표현을 위해 PNG파일을 올리면 에디터가 제멋대로 JPG로 바꿔버리는 문제는 알고있었는데, 압축률이 얼마나 개떡같은지 나란히 놓고 비교하면 민망스러울정도로 화질 열화가 생긴다. 저건 포토샵에서 압축률 6 정도 주면 생길만큼의 무지막지한 열화인데-_-;

그리고, 정작 에디터에서는 클릭시 원본을 보여준다는데, 저건 원본이 아니다!

원본 파일은 251kb의 열화 없는 이미지인데, 저걸 클릭해서 다운받아보면 용량이 145kb이다. 대체 원본은 어디로 사라졌나?? 원본 다운로드라 해놓고 진짜 원본은 찾아볼 수가 없다.

하나 더. 다음 카페에서 그림 파일을 하나 첨부하면 아래와 같은 소스가 생성된다. 이거 다 어디 쓰는건지??

<P> </P>
<P style="TEXT-ALIGN: center"><img src="https://t1.daumcdn.net/cfile/cafe/1449690D49B4575041" class="tx-daum-image" style="FLOAT: none; CLEAR: none" actualwidth="650" border="0" hspace="1" vspace="1" width="650" /></P>
<P down="function(){return value.apply(null,[this].concat($A(arguments)));}" observe="function(){return value.apply(null,[this].concat($A(arguments)));}" stopObserving="function(){return value.apply(null,[this].concat($A(arguments)));}" visible="function(){return value.apply(null,[this].concat($A(arguments)));}" toggle="function(){return value.apply(null,[this].concat($A(arguments)));}" hide="function(){return value.apply(null,[this].concat($A(arguments)));}" show="function(){return value.apply(null,[this].concat($A(arguments)));}" remove="function(){return value.apply(null,[this].concat($A(arguments)));}" update="function(){return value.apply(null,[this].concat($A(arguments)));}" replace="function(){return value.apply(null,[this].concat($A(arguments)));}" inspect="function(){return value.apply(null,[this].concat($A(arguments)));}" recursivelyCollect="function(){return value.apply(null,[this].concat($A(arguments)));}" ancestors="function(){return value.apply(null,[this].concat($A(arguments)));}" descendants="function(){return value.apply(null,[this].concat($A(arguments)));}" firstDescendant="function(){return value.apply(null,[this].concat($A(arguments)));}" immediateDescendants="function(){return value.apply(null,[this].concat($A(arguments)));}" previousSiblings="function(){return value.apply(null,[this].concat($A(arguments)));}" nextSiblings="function(){return value.apply(null,[this].concat($A(arguments)));}" siblings="function(){return value.apply(null,[this].concat($A(arguments)));}" match="function(){return value.apply(null,[this].concat($A(arguments)));}" up="function(){return value.apply(null,[this].concat($A(arguments)));}" previous="function(){return value.apply(null,[this].concat($A(arguments)));}" next="function(){return value.apply(null,[this].concat($A(arguments)));}" readAttribute="function(){return value.apply(null,[this].concat($A(arguments)));}" getHeight="function(){return value.apply(null,[this].concat($A(arguments)));}" getWidth="function(){return value.apply(null,[this].concat($A(arguments)));}" classNames="function(){return value.apply(null,[this].concat($A(arguments)));}" hasClassName="function(){return value.apply(null,[this].concat($A(arguments)));}" addClassName="function(){return value.apply(null,[this].concat($A(arguments)));}" removeClassName="function(){return value.apply(null,[this].concat($A(arguments)));}" toggleClassName="function(){return value.apply(null,[this].concat($A(arguments)));}" cleanWhitespace="function(){return value.apply(null,[this].concat($A(arguments)));}" empty="function(){return value.apply(null,[this].concat($A(arguments)));}" descendantOf="function(){return value.apply(null,[this].concat($A(arguments)));}" scrollTo="function(){return value.apply(null,[this].concat($A(arguments)));}" getStyle="function(){return value.apply(null,[this].concat($A(arguments)));}" getOpacity="function(){return value.apply(null,[this].concat($A(arguments)));}" setStyle="function(){return value.apply(null,[this].concat($A(arguments)));}" setOpacity="function(){return value.apply(null,[this].concat($A(arguments)));}" getDimensions="function(){return value.apply(null,[this].concat($A(arguments)));}" makePositioned="function(){return value.apply(null,[this].concat($A(arguments)));}" undoPositioned="function(){return value.apply(null,[this].concat($A(arguments)));}" makeClipping="function(){return value.apply(null,[this].concat($A(arguments)));}" undoClipping="function(){return value.apply(null,[this].concat($A(arguments)));}" getElementsBySelector="function(){return value.apply(null,[this].concat($A(arguments)));}" childElements="function(){return value.apply(null,[this].concat($A(arguments)));}" getElementsByClassName="function(){return value.apply(null,[this].concat($A(arguments)));}" childOf="function(){return value.apply(null,[this].concat($A(arguments)));}" _extended="function(){}"> </P>

그림 하나 들어가는데 이런것까지 필요한가?

관련글

다음 파워에디터 불만(2)

다음 파워에디터 불만