음 요즘은 가끔 스크립트를 이용해서 화면 중에특정 영역을 보여주거나 숨기는 경우가 있는데..

오늘 이걸 처리하다가 황당한 문제에 빠져서 혹시나 이런경험을 또 할까 하고 글을 남김니다.

display  와 visibility  의 차이는 모두들 알고 계실겁니다. 영역을 잡고 있느냐 안잡고 있느냐의 차이죠
자세한 내용은 구글이나 네이버를 이용해 주세요.

다음 id가 xx인 영역을 onClicl 이벤트 발생시  보여주거나 숨기려고 합니다. 2가지 경우가 있겠지요?

1번
<div id='xx'  style="visibility : hidden">
2번
<div id='xx'  style="display: none">


문제는 간단 했습니다 XX를 

1.
function showLayer(tgtEl) { document.getElementById(tgtEl).style.visibility = "visible"; }
function hideLayer(tgtEl) { document.getElementById(tgtEl).style.visibility = "hidden"; }
2.
function showLayer(tgtEl) { document.getElementById(tgtEl).style.display = "block"; }
function hideLayer(tgtEl) { document.getElementById(tgtEl).style.display = "none"; }


위 함수로 처리만 하면 되었으니 까요.

우선 1번 경우로 테스트를 했습니다.

html은 다음고 같았습니다.

<div style='visibility : hidden'>
 스클립트릿 for 제어문
 <a> 링크되야할 문자 </a>  
</div>

해당 html 은 보시다시피 규칙을 따르지 않았습니다.  a태그가 그냥 나와 있지요. 
그래도 문제는 없습니다. 익스플로러 에서도 파이어폭스에서도 정상 작동 하더군요.

이제 저 문장을 2번의 경우로 변경 합니다.

<div style='display  : none'>
 스클립트릿 for 제어문
 <a> 링크되야할 문자 </a>  
</div>

.
.
.
.
왠걸 파이어폭스 에서는 되는데.... IE 에서는 안됩니다.
암만 액션을 가해도 안됩니다.

<div style='display  : block>
 스클립트릿 for 제어문
 <a> 링크되야할 문자 </a>  
</div>

위와 같이 처음부터 보여지는 상태에서 작동하게 바꾸었습니다.
파이어 폭스에서는 정상 작동 됩니다. IE에서는 숨기는건 되는데 나타나개 하는건 여전히 안됩니다.

대체 어디가 잘못되었던걸 까요?

엄청 나게 고민했습니다. 해결책은 HTML을 테스트 코드로 만든다고 대충 만드는게 아니라
규칙에 맡게 올바르게 작성하니까 해결이 되더군요.

바로 아래와 같이요.

<table id='xx' style="display: none">
 스클립트릿 for 제어문
 <tr><td><a> 링크되야할 문자 </a> </td></tr>
</table>

자 그렇다면 올바른 결과가 나왔다고 궁굼점을 풀어 버리면 안됩니다.
왜 저런 잘못된 결과가 나왔는지.. 확인해 봐야 하자나요?

IE 에서는 이걸 체크하기 힘드니 파이어 폭스의 파이어 버그를 열어 봅시다.

그리고 잠시 생각을 해보지요.

IE와 FX 같은 인터넷 부라우저는 무엇으로 이루어져 있을까요?

일단 HTML 코드 와 
DOM(IE는 MSDOM 이거 FX는 FXDOM )  그리고 
JS엔진(파폭 JS엔진 MS JS엔진)
이런 식일겁니다. 모두 자기 자신의 DOM과 스크립트엔진을 가지고 있습니다.
차이는 얼마나 W3C 에 정의된 표준을 잘 따르냐의 차이겠죠.

문제는 기본적으로 JS엔진은 HTML 코드를 바로 컨트롤 하지 않고 DOM을 제어 하지요.
이 DOM은 무엇일까요? 별거 아닙니다. HTML 태그와 내용을 그냥 XML 코드와 비슷한 구조를 가지고 있다고
생각 하면 됩니다.  물론 실제로는 더 복잡 합니다. prototype 부터 시작해서 여러가지 많은 내용을 담고 있지요.

정확하지 않은 HTML 구조는 DOM으로 해당 코드를 변경 하는 과정에서 원치않는 구조를 양산 합니다.
(파이어버그를 살펴 보세요 :D )

일단 이런 식의 흐름을 가지고 있기 때문에 개발자 본인이 생각부분외의 결과가 충분히 발생할 수 있습니다

웹개발을 하실때는 필히 웹표준을 준수하시고 하세요 샘플코드를 작성 할때도요.