2009년 4월 29일 수요일

어린이집 소풍으로 '안면도 국제꽃박람회'에 갔다왔습니다

4.28(화) 린이, 짱이 어린이집 소풍으로 '안면도 국제꽃박람회'에 다녀왔습니다.
인터넷을 뒤져보니 '자원봉사자에 대한 감사' 운운하는 공식 멘트와는 다른 지나친 상업화를 불쾌해하는 분들이 많더군요.

하지만, (그 덕에 기대를 전혀 안 하고 가서 그런지) 수많은 꽃들과 꽃지해수욕장만 눈에 들어오더랍니다.

사용자 삽입 이미지

언제나 인증샷은 기본이라능~


어딜 가든 인증샷은 기본입니다.
도착한 일행들은 인증샷을 찍고서야 식사 및 자유시간을 누릴 수 있었습니다.

사용자 삽입 이미지

그렇게도 좋냐?


애들이 놀러가면 사달라고 징징거리는 것 중 1번이 풍선입니다.
그런데, 에x랜드건 꽃박람회건 또는 어디건 좌우지간 이놈의 풍선은 말썽입니다.
하루 지나면 가스가 다 빠져나가 툭툭 떨어지는 놈이 몇 천원씩 해대는데, 애들이 사달라고 징징거리니 안 살 수도 없고...
 
사용자 삽입 이미지

살인미소? 살인충동미소?


짱이의 이 어설픈 미소가 통하더군요.
소풍(수학여행?)을 온 여고생 몇 명이 짱이 보고 귀엽다며 같이 사진찍자고 했습니다.
하지만, 정작 짱이는 싫다며 내뺐습니다...

사용자 삽입 이미지

숭례문 지.못.미.


전시물 중에서 화재로 불탄 숭례문을 다시 만든 것이 있었습니다.
정말 정말 많은 것을 생각하게 하더군요.
단편적으로 숭례문을 복원하는 것만 생각하지 말고 제발 제대로 된 관리방안을 수립하고 집행하면 좋겠습니다.

사용자 삽입 이미지

We are back!


박람회장 뒤로 나오면 꽃지 해수욕장이 나옵니다.
이 곳은 가족여행 때에도 왔던 곳입니다. (가족여행 10일차 '07. 10.11(목) : 안면도, 대하축제, 꽃지해수욕장)

사용자 삽입 이미지

동해물과 백두산이 마르고 닳도록~


숭례문과 더불어 인상적인 조형물이 하나 더 있었는데, 백두산과 한라산이었습니다.
천지와 백록담의 모형을 만들어놓고 그 곳에서 서식하는 식물들을 전시해두었습니다.
덕분에 짱이는 무려 천지를 배경으로 사진을 찍는 호사를 누렸습니다. ^^;

사용자 삽입 이미지

안습의 퍼레이드


유명 놀이동산의 퍼레이드를 어설프게 흉내냈더군요.
문제는 저 꽃마차 1대가 끝이라는 거... ㅠ.ㅠ
보는 제가 다 민망할 지경이었습니다.

사용자 삽입 이미지

사람이 꽃보다 아름다워~


역시... 사람이 꽃보다 아름답습니다.
눈이 잘 안 보는 단추구멍 남매라서 문제지만요... ^^;

덧. 짱이는 남자아이답게 겁(x가리)도 없고, 단순무식과격합니다. (하루는 형들이랑 2:1로 싸워서 승리를... v^.^)
그런데, 린이는 여자아이답게 겁도 생각도 많습니다.

짱이는 겁이 없어 (당연히) 뛰어내리는 짓도 잘 합니다.


그런데, 이걸 본 린이가 짱이를 흉내내며 뛰어내리더군요.
처음엔 겁내면서 못 뛰어내렸었는데, 이런 걸 따라하는 것을 보니 애들은 역시 서로서로 배워갑니다.



2009년 4월 28일 화요일

티스토리 새관리 편집기의 버그: 자동으로 태그가 추가됨

티스토리에서 새관리를 오픈한 것이 2008년 8월 28일이니 지금으로부터 딱 8개월 전입니다.
하지만, 여러가지 이유로 사용자들은 새관리를 많이 사용하지 않고 있습니다.

개인별 호불호가 나뉘겠지만, 제가 아는 대다수의 티스토리 유저분들은 새관리를 싫어하시더군요.
특히 미움을 받는 놈은 편집기입니다.
이 놈은 개선(?) 이후에 불편해졌을 뿐만 아니라 버그가 좀 있어 도저히 쓸 수가 없습니다.

그 중 하나가 <pre> 태그에 관련된 버그로 <pre> 태그로 내용을 감싸면 편집기가 마음대로 엔터를 추가합니다.

이 버그가 신경쓰이는 것이... Syntax Highlighter를 적용하려면 <pre>를 꼭 써야하거든요...

일단 아래와 같은 내용을 입력했습니다.
test 아래 부분의 간단한 C 코드가 <pre> 태그로 감싼 부분입니다.

사용자 삽입 이미지

이것을 HTML 보기로 보면 아래와 같이 나옵니다.
여기까진 별 문제가 없어보입니다만...

사용자 삽입 이미지

이걸 다시 WYSIWYG 모드로 보면 아래와 같이 변신(?)합니다. 젠장!

사용자 삽입 이미지

어떻게 변했는지를 HTML 모드에서 보면 아래와 같은 코드를 볼 수 있습니다.

사용자 삽입 이미지

이걸 다시 WYSIWYG 모드로 보면 아래와 같이 또 변신합니다. 젠장! 젠장!

사용자 삽입 이미지

이번엔 도대체 어떻게 변했는지를 HTML 모드에서 보면 아래와 같은 코드를 볼 수 있습니다.

사용자 삽입 이미지

그럼... HTML 모드로 안 가면 되지 않느냐... 이게 안 됩니다.
<pre> 태그를 넣으려면 무조건 HTML 모드로 가야 하기도 하지만, 근본적으로 편집을 끝내고 저장하면 저장하는 과정에서 일단 <br/>을 추가하고 시작합니다.

기능 개선을 게을리 하는 것도 답답하지만, 이런 근본적인 버그는 제발 좀 잡아주면 좋겠습니다.


Total Commander용 UNALZ 플러그인 0.65 공개

kippler님께서 공개하신 unalz 라이브러리 및 소스가 4월 1일에 0.65로 업데이트 되었습니다.
이에 발맞춰서(?) Total Commander용 unalz 플러그인을 공개합니다.

사용자 삽입 이미지

이번에도 역시 자동설치 기능을 보유하고 있습니다


unalz 플러그인 0.65의 수정된 사항은 다음과 같습니다.

  • basecode changed : unalz 0.65, zlib v1.2.1
  • bzip2 1.0.5 update
  • vs2008 컴파일 관련 이슈 수정



이 플러그인은 아래 링크에서 다운받을 수 있습니다.

그리고, 컴파일할 수 있는 소스는 아래 링크에서 다운받을 수 있습니다.



2009년 4월 27일 월요일

[한울김치3기] 7. 열무김치 리뷰

김치를 받은 것은 4월 12일이었습니다만, 그동안 바쁘기도 했고, 한 편으로는 충분히 숙성도 시킬 겸해서 지금 씁니다.

사용자 삽입 이미지

언제나 하는 얘기지만, 한울 쉬즈미 김치는 무김치가 맛있습니다.

이번 열무김치 역시 굉장히 맛있습니다.
게다가 그동안 1% 부족해보였던 젓갈향이 나서 맛깔스럽기까지합니다.

더 이상 긴 설명이 필요 없을 정도로 이 열무김치는 최고입니다!

고등학생인 조카네 반 친구들이 집에 놀러와서 이구동성으로 "이 김치 정말 맛있다!"라고 할 정도로 말이죠.

이 김치를 그냥 먹는 것만으로는 성이 안 차서... 국수를 말아봤습니다.
한울 쉬즈미 열무김치 외에 참기름, 매실액을 넣고 통깨를 뿌렸는데, 정말 맛있습니다.

사용자 삽입 이미지

한울 쉬즈미 김치는 무김치는 충분히 경쟁력이 있어보입니다.
배추김치의 1% 부족한 듯한 맛만 좀 보강하면 최강의 김치가 되지 않을까합니다.


2009년 4월 26일 일요일

블로그 통합 및 설정 완료!




블로그 관련 to-do 리스트를 포스팅한 것이 3월 25일이니 딱 1달만에 계획된 작업들을 마쳤습니다.

블로그 통합 등 to-do 리스트의 예정사항은 모두(!) 반영했습니다.
그리고, 스킨은 헨리님께서 공개한 iNove 스킨을 변형해서 적용했습니다. 변형한 내용은 다음과 같습니다.

  • 스킨폭 넓힘: 600px → 700px
  • 사이드바 좁힘: 300px → 250px
  • 전체적인 색감을 보라색 계열로 수정

그리고, 삽입하는 이미지의 인각을 #50007F (약간 짙은 보라색)으로 바꿨습니다.

이 블로그에만 글을 올리고, 기존 두 블로그는 현상태로 그대로 두다가 도메인 계약기간이 만료되면 폐쇄합니다.


덧1. 블로그를 통합하고 및 링크를 수정해주는 등의 작업을 위해 프로그램을 하나 만들었습니다.
       덕분에 수작업이 많이 줄었습니다.
      (완성도가 낮아 별도로 공개할 생각은 없습니다)

덧2. 기존 스킨의 이미지를 그레이레벨로 변환한 뒤 일정한 비율로 보라색으로 변환해서 색감을 일정하게 유지시켰습니다.
       0 → (16,0,25) / 255 → (255,255,255)



2009년 4월 18일 토요일

JW Player 도우미 플러그인 공개

유튜브를 포함해서 블로그에 동영상을 올리기 위한 서비스가 많이 있습니다만... 동영상을 직접 올려보니 불편하더군요.
mpeg이나 avi를 포함시키면 자동으로 플레이어가 포함되는데, 이건 보기가 좋지 않더군요. (인터페이스가 넘 구려요~)

그래서 선택한 것이 JW Player + flv 파일 궁합입니다.
아래 소개하는 방법을 사용하면 아주 간단하게 동영상을 적용할 수 있습니다.

0. JW Player 소개

JW Player는 널리 사용되는 온라인 플레이어입니다. 다양한 형식의 지원, 깔끔한 인터페이스, 스킨 지원, xml을 통한 다중 소스의 지원 등등 수많은 장점이 있지만, 여기서는 인터페이스만 사용합니다.

전체버전은 LongTail Video 홈페이지에서 다운받을 수 있습니다.


1. 관련 파일 업로드

아래 압축파일을 다운받아 열면 FLVplayer.jsplayer.swf 두 개의 파일이 나옵니다.
이 두 파일을 스킨-직접올리기 메뉴를 통해 업로드합니다.



2. 스킨 수정

스킨을 편집해서 아래의 코드를 삽입합니다.
위치는 </head>의 바로 앞입니다. (사실, 헤더 내에만 위치하면 별 상관은 없습니다...)
<script type="text/javascript" src="./FLVplayer.js"></script>
<script type="text/javascript">
  FLVHelper.all("./images/player.swf");
</script>
</head>
하일라이팅한 FLVHelper.all() 부분은 좀 더 볼 필요가 있습니다.
여기에선 동영상 플레이어로고 그리고 컨트롤 영역의 높이를 정할 수 있습니다.
플레이어는 1번에서 업로드한 플레이어이므로 특별히 변경해줄 것은 없습니다.
로고는 화면 우측 상단에 표시되는 것으로 스킨-직접올리기를 통해 올린 뒤 아래와 같이 지정하면 됩니다.
(물론, 지정하지 않으면 로고를 표시하지 않습니다)
그리고, 컨트롤 영역의 높이는 기본값(20) 외에 다른 값을 지정하고 싶을 때 사용합니다.(특별히 바꿀 이유는 없습니다)

세 파라미터를 다 사용하면 아래와 같은 모양이 됩니다.
FLVHelper.all("./images/player.swf" ,"./images/zockrflv.png" ,20);


3. 동영상 올리기

약간 번잡하긴 했지만, 동영상을 올리는 것은 그다지 어렵지 않습니다.
주의할 점은 올리기 전에 파일명을 잘 지정해야 한다는 것입니다.
파일명을 통해 동영상의 해상도를 지정해야 합니다.
파일명의 형식은 파일명_폭x높이.flv입니다.

형식을 정확하게 지정하지 않으면 변환작업이 이루어지지 않습니다.
이렇게 만든 이유는 이 도우미는 본문 내에 삽입된 imageblock을 모두 검사해서 처리하는데, 이 과정에서 원하지 않는 파일까지 변환하는 것을 방지하기 위함입니다.

fight_320x180.flv라는 파일을 업로드한 뒤에 삽입하면 아래와 같은 모양이 나옵니다.
(확인을 목적으로 좌, 우, 가운데 정렬을 각각 했습니다)

사용자 삽입 이미지

여기에 도우미 플러그인을 설치하면 아래와 같이 변신합니다.

사용자 삽입 이미지

짜잔~


주의할 점은 너무 아래에 위치시킨 뒤에 왼쪽이나 오른쪽 정렬을 하면 댓글 영역이 위의 그림처럼 보기 싫어지는 경우가 발생할 수 있다는 것입니다.



2009년 4월 8일 수요일

티스토리에 Syntax Highlighter 2.0 적용하는 방법 (재게시)

사용자 삽입 이미지

티스토리에 Syntax Highlighter 2.0 적용하는 방법에서도 적었듯이, Syntax Highlighter 2.0은 많은 개선이 있었지만, 아이러니하게도, 티스토리에서 널리 사용되는 hi8ar.net님의 화이트보드 스킨에서는 정상동작을 하지 않았습니다.
(그래서 그 포스팅은 2.0을 적용하는 방법을 적은 글이지만, 1.5.1 환경에서 작성되었습니다)

원인은 스킨의 article.css.article code 속성이 shCore.css.syntaxhighlighter code 속성과 충돌하는 것입니다.
이 오류를 해결하려면 shCore.css에 다음 내용을 추가하면 됩니다.
.syntaxhighlighter code
{
    display: inline;
    overflow: visible;
}
직접 패치가 귀찮으면 아래 링크에서 다운받으시면 됩니다.


이 버전은 화이트보드 스킨과의 충돌을 해결한 것 외에도 아래의 기능들을 수정 보완했습니다.

1. 치환자 입력 가능

1.5.1에서도 추가했던 기능입니다. 아래와 같이 입력하면
[#\\#_title_#\\#]
이렇게 치환자를 입력할 수 있습니다.
[#\#_title_#\#]


2. 추가 언어파일 지원

1.5.1에서 추가했던 파일들을 2.0 환경에서 사용할 수 있도록 변환했습니다.
아래와 같이 지정하면 MSXAviSynth의 언어파일을 사용할 수 있습니다.
<script type="text/javascript" src="./images/shBrushMsx.js"></script>
<script type="text/javascript" src="./images/shBrushAvs.js"></script>


3. Copy to Clipboard 버그 수정

Syntax Highlighter 2.0.296은 Copy To Clipboard에서 &nbsp;가 그대로 복사되는 버그가 있습니다.
이 버그를 수정했습니다.

사용자 삽입 이미지

이 문제가 해결되었습니다. ㅡㅡ;



2009년 4월 6일 월요일

티스토리에 Syntax Highlighter 2.0 적용하는 방법

사용자 삽입 이미지

블로그 관련 to-do 리스트에서 공지한 사항 중 하나인 Syntax Highlighter 2.0을 티스토리에서 적용하는 방법입니다.
많은 분들이 관련 글을 올려주셨는데, 이상하게 한 가지는 모두들 빠뜨리시더군요. 그 부분을 포함해서 설명하겠습니다.

우선 2.0이 기존의 1.5.1에 비해 바뀐 부분은 아래와 같습니다.

1. CSS 형식테마 기능
2. 지정된 행의 강조
3. 자동 줄넘김 기능
4. XHTML 표준 준수


이 과정에서 형식이 약간 변경되었습니다.

1. 인자 형식의 변경
   <pre name="code" class="html">의 형식에서 <pre class="brush:html;">의 형식으로 변경되었습니다.

2. 실행 함수 이름과 위치의 변경
   dp.SyntaxHighlighter.HighlightAll('code'); 가 html의 마지막에 위치하는 것에서
   SyntaxHighlighter.all(); 가 html의 헤더에 위치하는 것으로 변경되었습니다.
   (1.5 시절에 입력된 내용을 위해 호환 모드도 지원합니다)

3. <pre>, <textarea> 에서 동작되던 것이 <pre>에서만 동작하도록 변경
   <pre>에서만 동작되며, <textarea> 등의 다른 태그에서 동작시키려면 별도로 지정해야 합니다.


설치 및 사용법은 아래와 같습니다.


1. 관련 파일의 설치

아래 링크에서 다운받은 파일의 압축을 푼 뒤 스킨 올리기 기능을 이용해서 올립니다.


이 파일에는 SH 2.0의 기본 언어 외에 AviSynth 스크립트MSX 베이식 언어 파일이 포함되어 있습니다.


2. 스킨의 수정

스킨 앞부분, 정확히는 </head> 앞부분에 아래의 내용을 추가합니다.
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shBrushCpp.js"></script>
    <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
    <script type="text/javascript" src="./images/shBrushDiff.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPlain.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
    <script type="text/javascript" src="./images/shBrushMsx.js"></script>
    <script type="text/javascript" src="./images/shBrushAvs.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="./images/shThemeViolet.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
        SyntaxHighlighter.all();
    </script>
</head>
주목해야 할 부분은 16행의 ~bloggerMode = true;입니다.
티스토리의 위지윅 화면에서 코드를 입력하면 각 행의 끝에 <br> 태그가 삽입되는데, 대부분의 포스트에서 이 <br> 태그를 지우라고 적었더군요.
그런데, 이와 같이 설정하면 각 행의 <br>을 자동으로 엔터로 변환합니다.
즉, 위지윅 화면에서 코드만 입력하는 것으로 충분하단 얘기입니다.
(이 내용이 앞에 적은 다들 빠뜨린다는 바로 그 부분입니다)

만약 새롭게 2.0을 사용하는 것이 아니라 1.5를 사용하시던 분이라면 스킨 맨 마지막 부분에 아래 내용을 추가해야 합니다.
    <script type="text/javascript">
        dp.SyntaxHighlighter.HighlightAll('code');
    </script>
</body>
이 코드는 기존 방식으로 입력된 내용을 2.0의 방식으로 내부적으로 호출해주는 코드입니다.


3. 코드에 태그 추가

위지윅에서 코드를 입력한 뒤에 HTML 편집화면으로 이동해서 코드의 앞뒤에 <pre> 태그를 씌웁니다.
뒷부분에는 그냥 </pre>만 씌우면 되지만, 앞부분은 조금 신경써야 합니다.
<pre class="brush:c-sharp; highlight:[3,5];">
속성값 중 highlight는 강조할 행을 표시할 떄 사용합니다.


4. 문제점

SH2.0은 웹 표준 준수를 비록하면 많은 부분에서 안정성을 꽤했습니다.
하지만, 아이러니하게도 제가 지금 사용하는 hi8ar.net님의 화이트보드 스킨에서는 정상동작을 하지 않습니다.


2009년 4월 5일 일요일

BBCode for Tistory 2.5 재업

BBCode for Tistory 2.5 대망의 업데이트를 포스팅하고서 느꼈던 뿌듯함도 잠시...
개뿔님께서 [code] 태그가 이상하게 동작한다는 지적을 날려주셨습니다.

단순하게 [code] 태그를 <pre>로 변환했는데, 그게 문제였던 것입니다.
티스토리는 댓글의 각 행에 자동적으로 <br> 태그를 붙여주는데, 이게 <pre>와 만나면 두 줄씩 떨어지는 겁니다. 젠장찌개.

이 문제를 해결한 버전을 다시 올립니다.


설치방법 등은 지난 포스팅을 참조하시기 바랍니다. ㅠ.ㅠ

사용자 삽입 이미지

이런 모양을 보기가 쉽지는 않았습니다.




2009년 4월 4일 토요일

Ti-Cumulus 엔터-튤립9 버전 공개

Cumulus for TiStory 공개에서 공개한 Ti-Cumulus는 디자인은 예쁘지만, 설치형 블로그에서 사용하려면 용량의 압박이 큽니다.

그런데, 공개 글꼴인 엔터-튤립9 폰트를 이용해서 tagcloud.swf 파일을 만들자 104KB의 용량으로 만들어지더군요.
(참고로, 영문 글꼴만 들어있는 원본은 34KB이고, 안티 알리아싱이 적용되지 않은 한글 버전은 7KB입니다)

아래 링크를 클릭하면 이 버전을 다운받을 수 있습니다.


설치방법은 물론 Cumulus for TiStory 공개과 동일합니다.

사용자 삽입 이미지


2009년 4월 2일 목요일

BBCode for Tistory 2.5 대망의 업데이트

블로그 관련 to-do 리스트에서 공지한 대로 BBCode를 업데이트 했습니다.
이번 업데이트에서는 IE8과의 호환성은 물론이고, 기존 코드들의 기능 보강, 추가 코드의 지원 등을 지원합니다.

구체적으로 바뀐 부분은 아래와 같습니다.

1. IE8에서 정상동작

IE8에서야 정상이 되어가는 자바스크립트 엔진에서 얘기한 대로 IE6/7IE8은 javascript의 처리방법이 상이합니다.
정상적인 js 해석기또라이 해석기(IE6, IE7) 모두에서 모두 정상적으로 동작하도록 수정했습니다.



2. 기존 코드의 보강

a. 형식의 통일

[img]의 형식으로 [img]이미지 주소[/img] 외에 [img=이미지 주소] 형식도 지원합니다.
또한, [embed]의 형식으로 [embed=주소 크기] 외에 [embed]주소 크기[/embed] 형식도 지원합니다.

즉, [img], [embed]의 형식으로 두 가지를 모두 지원함으로써 혼란을 제거했습니다.

b. 주소 적합성 확인

[img], [url] 코드에서 주소의 적합성 확인하도록 수정했습니다.
이것은 [url]이 차단되는 문제를 해결하기 위해 만든 [ur], [link](뒤에서 설명) 모두에 해당합니다.



3. 추가 코드의 지원

BBCode for TiStory 2.4에서 지원하던 BBCode는 100% 지원하며 아래의 코드들을 추가적으로 지원합니다.

[size=폰트크기]내용[/size] : 글자의 크기를 지정
[link=주소]이름[/link] : [url]이 태터툴즈 계열에서 자동차단되기 때문에 만든 [ur]과 동일
[email]메일주소[/email] : email 주소 (화면에 주소 자체가 출력됨)
[email=메일주소]이름[/email] : email 주소 (화면에 이름이 출력됨)
[list][*][/list] : 불릿이 달려있는 리스트
사용자 삽입 이미지

[list][*]one[*]two[*]삼[/list]

코드
: 태그 내부에 HTML 코드를 적으면 고정폭 글꼴을 사용해 출력

덧. 다운은 아래 링크에서 할 수 있으며, 설치방법은 BBCode for Tistory 2.1 수정 공개를 참고하시면 됩니다.
도우미는 버전번호 관련된 부분만 수정되었습니다.


사용자 삽입 이미지

달라진 것은 버전번호뿐...



2009년 4월 1일 수요일

innerHTML에서 다시금 느낀 "난 IE가 싫어!"

우리나라의 국민 웹브라우저는 물론 IE입니다.
그것도 문제투성이인 IE6가 이상하게도 IE7을 제치고 점유율 1위입니다.
(IE7은 안정성에 문제가 있어 신뢰성 있는 IE6을 쓴다는 분들을 보면 가슴이 답답합니다)

WP-Cumulus를 TiStory에서 사용할 수 있도록 작업을 하면서보니 FF, 크롬에선 문제없는 코드가 이상하게 IE에서만은 동작하지 않는 문제를 경험했습니다.

그래서 아래의 코드를 innerHTML로 추출해서 눈으로 확인해봤습니다.

<TAG><a href="/tag/123" style="font-size:12pt">123</a></TAG>

아래 화면은 위의 코드를 크롬에서 다시 화면에 띄운 것입니다.
모든 태그와 속성을 소문자로 변환해서 처리한다는 것을 알 수 있습니다.

사용자 삽입 이미지

다음은 Firefox 3.0에서 띄운 화면입니다.
역시 소문자로 변환합니다. 따라서 크롬과 거의 똑같이 처리한다는 것을 알 수 있습니다.

사용자 삽입 이미지

하지만...
IE에서 같은 함수를 돌려보면 결과가 다릅니다.

사용자 삽입 이미지

네. 모든 태그와 속성을 대문자로 처리합니다.

물론 HTML은 대소문자를 가리지 않습니다만, 대문자의 사용은 W3C의 권고사항에도 정면으로 배치되는 것으로 W3C에서는 XHTML을 위해 소문자를 권고하고 있습니다.

이점은 MSDN을 읽어보면 명확해지는데, MSDN에서는 모든 태그와 속성을 대문자로 표시하고 있습니다.


Cumulus의 플래쉬는 (PHP를 통해) 소문자가 입력된다는 가정하게 개발이 되었기 때문에 IE의 javascript에서는 정상동작하지 않았던 것이었던 거죠.
(작업을 쉽게 하기 위해) 모든 대문자를 소문자로 일괄 변환해버리면 태그 자체에도 영향을 미치기 때문에 결국 <A>와 <TAG> 등의 태그만 일일이 소문자로 변환해 문제를 해결했습니다만, IE 덕분에 시간을 낭비한 것을 생각하면...

덧. 이렇게 힘겹게 변환된 티스토리용 Cumulus는 약간의 시험과 변형을 거친 후 공개하도록 하겠습니다.