 |
|
| |
|
  |
17년 전 |
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> |
|
 추천 : 255 |
추천
목록
|
|
| |
|
