홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
디버깅 목적의 테이블 Border 표시하기
14년 전
HTML 작성 시에, 테이블이 조금 복잡해지기 시작하면, 태그 수정하다가 구조가 꼬여버릴 수가 있습니다.
분명 의도한 바와는 다르게 어긋나기 시작하는데, 어디서 틀렸는지 알려면 한참을 헤매죠.
특히 테이블 안에 테이블이 있을 때에는 더욱 그렇죠.

저같은 경우에 임시로 테이블에 빨간 셀구분선을 지정해서 구조가 의도된 바 대로 구성됐는지를
확인합니다만, 소스를 일일히 찾아다니며 수정해야 하는 불편함이 있습니다.
디버깅이 끝나고 나면 또 그렇게 했던 부분을 찾아서 삭제해야 하죠.

그게 불편해서, 아예 소스 맨 마지막에 추가만 하면, 마우스만 위에 갖다놔도 디버깅용 빨간라인이
표시되게끔 하는 스크립트를 짜봤습니다. 특히 남이 만든 테이블을 수정하거나 이용해서 재생산
하는 경우에는 유용하지 않을까 하는 생각입니다.


<table>
<tr><td colspan=3>정말정말
<tr><td>복잡하게도 <td>만들어 <td>놓은
<tr><td>TABLE <td colspan=2>구조를
<tr><td>보기 <td>편하게 <td>만들어줍니다.
</table>

<br><br><hr><br><br>

<table>
<tr><td>여기에도 <td>또하나의 <td>테이블이
<tr><td>조금 <td colspan=2>복잡하게
<tr><td colspan=3>만들어져 있군요.
</table>

<script language=javascript>
function setDebugBorder() {
  this.old_borderColor = this.borderColor;
  this.old_border = (this.border == "") ? 0 : this.border;
  this.borderColor = "red";
  this.border = 2;
}
function unsetDebugBorder() {
  this.borderColor = this.old_borderColor;
  this.border = this.old_border;
}

var oColl = document.all.tags("TABLE");
for (var i = 0; i < oColl.length; i++) {
  oColl[i].onmouseover = setDebugBorder;
  oColl[i].onmouseout = unsetDebugBorder;
}
</script>
추천추천 : 184 추천 목록
번호 제목
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
3,010
 iframe 높이 100% 맞추기
3,009
 curl 함수를 이용한 HTTP REFERER 변경
3,008
 윈도우10 시스템 파일 및 Dism 검사
3,007
 텍스트 줄바꿈, 글자자르기 CSS
3,006
 jQuery Mobile에서 유용한 코드 10가지.
3,005
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,004
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,003
 [jQuery] jQuery Quick API
3,002
 [ transition ] 링크 hover 색상 변화 속도 조절
3,001
 PHP 5.3.0 에서 사라진 함수들 대체
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.