Firefox에서 input 태그를 다이나믹하게 추가했을 경우 form의 element로 인식 못하는 경우 발견

회사에서 아주 예전에 작성된 HTML을 수정하다가 하루종일 고생한 경험담을 얘기하고자 한다. 결론을 얘기하면 원인은 XHTML 표준을 지키지 않아서 였는데, 이게 원인일 줄이야!!!

다음과 같은 스타일의 HTML 태그가 있다고 하자. 과거에 CSS를 잘 사용하지 않을 때는 form 태그의 기본 패딩값에 의해 테이블 레이아웃이 깨지는 것을 방지하기 위해서 내가 자주 사용하던 스타일이다.

[code html]
<table>
<tr><td>테이블 헤더</td><tr>
<form>
<tr><td>폼 요소들</td></tr>
</form>
</table>
[/code]

여기에다 자바스크립트로 폼에 input 태그를 하나 추가하고, input 박스에 값을 치고 submit 버튼을 누르면 IE에서는 input 박스에 입력된 값이 전송이 되지만, 왠일인지 Firefox에서는 새로 추가된 input 박스의 내용은 전송이 되지 않는거다.

정말 하루 종일 삽질하다가 발견한 원인, 그리고 해결방안은 다음과 같이 XHTML을 준수하는 스타일로 HTML을 코딩하는 거였다.

[code html]
<form>
<table>
<tr><td>테이블 헤더</td><tr>
<tr><td>폼 요소들</td></tr>
</table>
</form>
[/code]

표준을 지키는게 중요함을 다시 한번 느낀 하루였다.

웹 기획 관련 책에서 우연히 발견한 이씨플라자

사용자 삽입 이미지강동구립 성내도서관에서 영진닷컴 출판사에서 나온 “웹기획 & 웹프로젝트 매니지먼트” 라는 책을 대출받아서 대충 훑어 보는데, 1장 첫번째 섹션에 많이 낯익은 사이트 화면과 “이씨플라자”라는 문구가 눈에 띄었다.

‘어! 이게 뭐지…’ 너무 놀라서 눈을 의심하며 다시 자세히 보니 이씨플라자 코리아 사이트 개편전 화면과 ‘해외 바이어를 찾아주는 이씨플라자 사이트’라는 제목으로 사이트를 소개하고 있었다.

예전에는 많은 비용을 들여서 해외 바이어 리스트를 구매해야만 했는데 이제는 인터넷에서 쉽게 바이어를 발굴할 수 있는 시대가 되었다는 내용을 설명하기 위해서 이씨플라자를 인용한 거다. 뜻하지 않은 곳에서 만난 이씨플라자 , 너무 반가웠다.

사용자 삽입 이미지

신 – 쥐 세계의 계급 제도

 낭시 대학 행동 생물학 연구소의 한 연구자가 쥐들의 수영능력을 알아보기 위한 실험을 했다. <동물의 사회 행동>이라는 저서를 낸 바 있는 이 연구자의 이름은 디디에 드조르. 그는 쥐 여섯 마리를 한 우리 안에 넣었다. 우리의 문은 하나뿐이고 그 마저도 수영장으로 통하게 되어 있었다. 먹이를 나눠 주는 사료통은 수영장 건너편에 있었다. 따라서 쥐들이 먹이를 구하기 위해서는 헤엄을 쳐서 수영장을 
건너야만 했다. 여섯 마리의 쥐들이 일제히 헤엄을 쳐서 먹이를 구하려 갔을까? 그게 아니라는 사실이 이내 확인 되었다. 마치 쥐들 사이에 역할 분담이 이루어지기라도 한 것처럼, 여섯마리의 쥐들은 다음과 같은 네 부류로 나뉘었다. 두마리는 수영을 해서 구해 온 먹이를 빼앗기는 피착취형이었고, 다른 두 마리는 헤엄을 치지 않고 가만히 있다가 남이 구해온 먹이를 빼앗아 먹는 착취형이었으며, 한마리는 헤엄을 쳐서 구해온 먹이를 빼앗기지도 않고 남의 먹이를 빼앗지도 않는 독립형이었고, 마지막 한마리는 헤엄을 치지도 않고 먹이를 빼앗지도 못하는 천덕꾸러기형이었다.

 

  먼저 피착취형에 속하는 두 쥐가 먹이를 구하러 가기 위해 물속으로 뛰어 들었다. 그들이 우리로 돌아오자 착취자들은 그들을 공격해서 애써 가져온 먹이를 포기하게 만들었다. 피착취자들은 착취자들이 배불리 먹고 나서야 남은 것을 먹을수 있었다. 착취자들은 헤엄을 치는 법이 없었다. 그저 헤엄치는 쥐들을 때려서 먹이를 빼앗기만 하면 되는 것이었다.

독립적인 쥐는 튼튼하고 힘이 세기 때문에 스스로 헤엄을 쳐서 먹이를 가져올 뿐만 아니라 착취자들의 압력에 아랑곳하지 않고 노동의 대가를 온전히 누렸다. 끝으로 천덕꾸러기 쥐는 헤엄을 칠 줄도 모르고 헤엄치는 쥐들에게 겁을 줄 수도 없었다. 그러니 그저 쥐들이 싸우다가 떨어뜨린 부스러기를 주워 먹을 수밖에 없었다.

 

  드조르는 스무 개의 우리를 만들어서 똑 같은 실험을 해 보았다. 어느 우리에서나 똑같은 역할 배분, 즉 피착취형 두 마리, 착취형 두 마리, 독립형 한마리, 천덕꾸러기형 한 마리가 나타났다. 드조르는 그러한 위계구조가 형성되는 과정을 더 잘 이해하기 위해, 착취형에 속하는 쥐 여섯마리를 따로 모아서 우리에 넣어 보았다. 그 쥐들은 밤새도록 싸웠다. 다음 날 아침이 되자, 그들의 역할은 똑같은 방식으로 나뉘어 있었다. 피착취형이나 독립형이나 천덕꾸러기형에 속하는 쥐들은 각 유형별로 여섯마리씩 모아서 같은 우리에 넣어 보았을 때도 동일한 결과가 나타났다.

 

  드조르는 더 커다란 우리에 2백 마리의 쥐들을 넣어서 실험을 계속했다. 쥐들은 밤새도록 싸옴을 벌였다. 이튿날 아침 세 마리의 쥐가 털가죽이 벗겨진 처참한 모습으로 발견되었다. 그 결과는 개체 수가 증가할 수록 천덕꾸러기형의 쥐들에 대한 학대가 가혹해진다는 것을 보여준다.

 

  낭시 대학의 연구자들은 이 실험의 연장선에서 쥐들의 뇌를 해부해 보았다. 그들이 확인한 바에 따르면, 가장 많은 스트레스를 받은 쥐는 천덕꾸러기나 피착취형 쥐들이 아니라 바로 착취형 쥐들이었다. 착취자들은 특권적인 지위를 잃고 노역에 종사해야 하는 날이 올까 봐 전전긍긍했던 것이 아닌가 싶다.

<상대적이며 절대적인 지식의 백과 사전> 5

, 베르나르 베르베르(Bernard Werber)