웹프로그래머

쿼리 때문에 sqler.com에 놀러갔다 이벤트를 발견했다.

혹시나 하는 마음에 참가해본다... ㅋㅋ

dasblog라는 것인데 제로보드 같은 설치형 블로그이다.

첨 설치후 화면은 너무 구려보였는데... 스킨을 바꿔보니 조금은 나아졌네.

그런데 외산이라 모든 설정을 영어로 해결해야 하니 많이 불편할것도 같다 -_-;

빠른 설치를 원한다면 아래 주소로 가면 된다.

http://www.sqler.com/?document_srl=253947&mid=OSS&comment_srl=256128&rnd=256128#comment_256128

요즘 스크립트 작업은 대부분 jQuery에 의존하고 있다.

작업을 하다 객체가 존재하는가 하지않는가가 필요해서 코딩을 약간 해봤는데 무조건 객체가 존재한다고 나와버린다.

보통 자바스크립트에서는

alert(getElementById("id값"));
이렇게 적으면 존재유무가 표시되는데....

alert($("#id값));
jQuery도 비슷하게 했는데 안된다.

그래서 검색을 하다보니 jQuery는 다른 방식으로 객체를 찾아내는걸 알게 되었다.

alert( $("#id값").length );
위와 같이 수행했을경우 id값이 존재하면 1 이상을, 존재하지 않으면 0을 리턴한다.

존재할때 계속 코드를 수행하게 만들기 위해서는

if ( $("#id값") > 0 ) {
     //수행할 코드
}

그래서 우편번호 옆에 검색버튼을 두고 클릭시 하단에 검색하는 tr이 보여지게 해놨는데....

파이어버그 때문에 웹페이지를 만들때는 항상 파폭에서 작업을 하는데 이상하게 보이고안보이고 할때 넓이가 지멋대로 되는 현상이 발행하는 것이었다.

하지만 익스로 테스트를 해보니 잘되네???

그래서 구글신에게 요청을 하니 이런 답이 나왔다.

"표준 기반 브라우저에서 tr 요소의 기본 display 속성 값은 block이 아니라 table-row입니다."

표준에서는 display 속성값을 table-row로 하면 제대로 보여준다 이 말인데, 하지만 익스에서는 먹히지 않는다. ㅋㅋ???

결론은 표준과 비표준 동시에 만족해주기 위해서는

sytle.display = "" 처럼 그냥 빈 문자열("")을 써서 요소의 기본 display 속성 값으로 초기화시키거나, style="display:table-row; *display:block;" 으로 써 주면 된다.

<tr>
  <th scope="row"><label for="zip">우편번호</label></th>
    <td>
      <input type="text" name="zip" id="zip" value="" class="inputTypeText" size="7" maxlength="7" />
      <a href="#" id="viewSearchAddress" onclick="return false;" class="button"><span>검색하기</span></a>
    </td>
</tr>
<tr id="searchAddress" style="display:none;">
  <th scope="row"><label for="searchAddressText">주소</label></th>
  <td><input type="text" name="searchAddressText" id="searchAddressText" class="inputTypeText" /></td>
</tr>

<script type="text/javascript">
$("#viewSearchAddress").click(function() {
  status = $("#searchAddress").css("display");
  if (status == "none") {
    $("#searchAddress").css("display","");
  }
  else {
    $("#searchAddress").css("display","none");
  }
});
<script>

상단 스크립트 중 status가 "none"일 경우 display를 block로 줬었는데 "" 즉 공백으로 바꿔버렸다.