제로보드 다국어 기능
제로보드의 다국어 기능은 아래와 같이 셀렉트박스의 형태로 제공합니다.

사실 셀렉트 박스가 아니라 ul li 태그를 css로 셀렉트박스 처럼 만들어 놓은 것이지요.
태그를 열어보면 아래와 같이 ul li 그리고 그 속에 button이 있습니다.
실질적인 기능은 이 button이 합니다. ul li는 모양을 거들뿐이죠.



목표기능
이것을 아래와 같이 펼쳐진 형태로 만들려면 어떻게 해야 할까요?


ul li 태그를 css로 float:left 시킬 수도 있겠지만, 이렇게 하면 10가지가 넘는 언어 모두 보이게 됩니다.
저의 목적은 위와 같이 3개의 언어만 보이게 하는 것 입니다.
그래서 약간의 꼼수를 쓰기로 했습니다.

위 그림에 있는 KOREAN, ENGLISH, CHINESE에 해당하는 버튼을 만들고,
각 버튼을 클릭하면, ul li 속에 있는 특정 button을 클릭하도록 하는 것 입니다.
그리고 <div class="language">을 안보이게 합니다.


코딩
상단 헤더 부분은 layout.html에서 수정 합니다.
전 디폴트 레이아웃에다가 걍 코딩하는 중입니다.(/layouts/xe_official/layout.html)

먼저 버튼 3개를 만듭니다.
<div id="selectLang_ko" style="position:absolute;left:670px;width:86px;height:30px;cursor:pointer;"></div>
<div id="selectLang_en" style="position:absolute;left:756px;width:90px;height:30px;cursor:pointer;"></div>
<div id="selectLang_ch" style="position:absolute;left:846px;width:88px;height:30px;cursor:pointer;"></div>
전 div로 투명버튼을 자주 만듭니다. button으로 하려면 이미지 슬라이싱 해야 하니깐 귀찮습니다. 시간도 걸리구요.
div로 투명버튼을 만드는 방법은 position:absolute해주고, width,height 지정하고, left,top 지정하고, cursor:pointer만 먹여주면 됩니다. 때론 left,top 대신에 margin-left,margin-top을 사용해야 할 때도 있습니다.

그 다음 <ul class="selectLang">에서 특정 버튼들을 얻어 오고, 만들어둔 버튼에 연결시킵니다.
<script type="text/javascript">
// <![CDATA[
jQuery(function($){
    var $btnKo = $('.selectLang button:contains("한국어")');
    var $btnEn = $('.selectLang button:contains("English")');
    var $btnCh = $('.selectLang button:contains("中文(中国)")');
   
    $('#selectLang_ko').click(function(){ $btnKo.click(); });
    $('#selectLang_en').click(function(){ $btnEn.click(); });
    $('#selectLang_ch').click(function(){ $btnCh.click(); });
});
// ]]>
</script>

마지막으로 아래와 같이 셀렉트박스쪽을 안보이게 해줍니다.
없애면 안되고, 안보이게만 해줍니다.
<div class="language" style="display:none;">

 

위와 같이 서브메뉴가 안보이는 이유는 ‘IE7 표준’으로 랜더링 되었기 때문이다.
브라우저 버전에 상관없이, 랜더링을 IE7으로 되었기 때문이다.
아래 보이는 문서모드를 IE9 또는 표준으로 바꿔주면 정상적으로 서브메뉴가 출력되지만,
이것은 바람직한 해결책이 아니다.

바람직한 해결책은 HTML HEAD에 랜더링 모드를 강제로 지정하는 것이다.
<meta http-equiv="X-UA-Compatible"  content="IE=9" />
이 태그를 HEAD에 포함시켜주면 브라우저는 HTML을 처음부터 IE9 모드로 출력한다.

그렇다면 제로보드 XE에서 공통 HEAD는 어디에 있을까?
/common/tpl/common_layout.html
바로 이 파일이다. 이 파일에 랜더링 모드를 강제로 지정하는 태그를 포함시켜라.
관리자 뿐만이 아니라 유저사이트에도 공통으로 적용된다.

http://runean.com/php-1%EC%9D%B8-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/

설치중 xDebug 관련 오류
이클립스로 디버깅 테스트 하는 중 57%에서 프로그레시브바가 멈췄다.
이클립스를 끄고, 브라우저로 열어봤더니, 페이지를 표시 할 수 없다고 나왔다.

아파치쪽 문제라고 판단하고, xDebug 모듈을 갈아 끼워보기 시작했다.(http://xdebug.org/download.php)
xDebug 위자드가 VC9를 쓰라고 분석해 주어서, VC9 들을 갈아 끼워봤지만 동일한 결과가 반복 되었다.

에라 모르겠다 하며, VC6을 끼워봤더니 브라우저에서 잘 표시 되었다.
이클립스로 돌아가 디버깅을 테스트 해보니 브레이크 포인트 잘 걸리고, 변수추적도 잘 된다.


마치며
xDebug 위자드(http://xdebug.org/wizard.php)의 분석 결과대로 해도 안될 때도 있다.
오픈소스이니 이 정도의 수고는 늘 있기 마련이다.