IE6에서 이글루스 에디터 입력 모드 쓸 때 황당한 버그 & 대처법

QnA 블로그 끝소리님의 질문 CSS class를 통해 글 일부의 글꼴만 지정하는 방법이 있나요?에 트랙백 보냅니다.

끝소리님 질문의 요지는 글작성시 임의의 CSS class를 지정할 수 있느냐는 것이었지만, 답변이랍시고 다른 이야기를 해야 할 것 같군요. 제가 생각할 때 끝소리님은 span 태그와 CSS class를 옳게 지정하셨을 가능성이 있는데, 그런데도 문제가 생긴 것은 순전히 IE6과 이글루스 에디터 입력 모드의 조합이 만들어낸 버그 때문이라고 생각해요.

버그의 재현은 간단해요.

1. 인터넷 익스플로러 6 에서
2. 이글루스 새글쓰기를 열고
3. html 입력에서 <span></span> 태그를 사용하고
4. 에디터 입력으로 되돌아오면
5. html입력 단계에서 사용한 <span></span> 태그가 <font size="+0"></font>로 바뀌어 있을 것입니다.
※ 에디터 입력 단계로 전환할 때 이미 바뀌어 있으므로, 확인을 위해 html 입력 단계로 되돌아가지 않고 일단 저장해도 소용 없어요!

참쉽죠... 가 아니라, 이걸 여태 몰랐던 건 순전히 파이어폭스를 메인 브라우저로 사용하고 있고 인터넷 익스플로러로 글을 쓰더라도 에디터 입력 모드를 쓰지 않아서였지요.

끝소리님께 도움이 될만한 조언으로 그냥 파이어폭스를 쓰시라... 는 건 성의가 없으니, (ㅇ<-ㄷ)

클래스 지정할 태그를 span이 아닌 것으로 하시면 간단히 해결됩니다. span 태그가 원래 CSS를 지정하기 위해 xhtml에서 권장되는 서식 없는 inline 태그입니다. 그래서 그냥 span이 아닌 다른 문자열로 (html에 존재하지 않는) 태그를 집어넣어 쓰셔도 상관이 없죠.

그런데 어차피 span 태그를 쓰지 않고 임의의 클래스를 지정하실 거라면 좀 더 간단히 임의의 태그 자체에 해당 CSS를 지정하시는 것도 가능해요. 예를 들면 이렇게 하는 거지요.

----------------------------------
.temp { font-family : 글꼴이름 ; font-size : 글꼴크기 ; font-weight : 글꼴굵기 ; }
----------------------------------
이렇게 하면 <span style="temp">서식을 적용할 문자열</span> 형태로 써야 하는데,

----------------------------------
imc { font-family : 글꼴이름 ; font-size : 글꼴크기 ; font-weight : 글꼴굵기 ; }
----------------------------------
이렇게 하면 <imc>서식을 적용할 문자열</imc> 이렇게 쓰셔도 됩니다.


이런 편법을 써서 어떤 다른 문제가 있을지, 제가 장담할 수 없기에 굳이 권장하고싶지는 않아요. (실은 파이어폭스를 비롯한 다른 브라우저 사용을 권장합니다.) 아무튼 이런 방법으로 이글루스의 html입력 → 에디터 입력 전환시 span 태그가 망가지는 것을 피할 수 있지요. 이상입니다~.