태그를 이용하여 게시물을 올리다 보면 가끔씩 깜짝 놀라는 경우가 있습니다.
특히 테이블 태그를 사용하여 우리 홈과 같은 노프레임으로 되어 있는 홈에서는 애써 올린 게시물이 반쪽만 나온다던지 아니면 게시판의 목록이 옆으로 주욱 늘어나 버린 다던지 하는 경우를 만나서 우리를 당혹하게 만드는 일이 왕왕 있지요?

사실 알고보면 별 것도 아닌 것이 우리를 놀라게 합니다.
이 공간을 통하여 몇 번의 강좌를 올린 적도 있지만 아직 이해를 하지 못하시는 분이 계시는 것 같아서 이미지로 설명을 해볼려고 합니다.

이후로는 똑같은 일을 당하여 놀라는 일은 없겠지요?

이러한 영상시를 예로 들어서 설명을 해보겠습니다.
정상적으로 게시물이 올려진 장면입니다.


"소스보기"의 버튼을 클릭하여 소스를 확인해 볼까요?
소스보기는 7레벨 이상이 되어야만 가능하다는 것은 아시지요?


위 영상을 올린 태그들이 보입니다.
위 태그를 보니까 테이블을 두 번을 열었고, 그리고 두 번을 닫았군요.
<table~~><tr><td~>는 테이블을 여는 태그이고
</td><tr></table>는 테이블을 닫는 태그입니다.
간혹 다음의 게시판 등에서 <tbody>라는 태그를 사용하는 것이 있는 데, 이것은 불필요한 태그입니다.


이 태그들을 복사하기 위하여 "태그선택복사" 버튼을 클릭하세요.


태그들이 선택이 되면서 클립보드로 복사가 된 상태입니다.
"창닫기 버튼을 클릭하여 창을 닫습니다.


제가 즐겨 사용하는 EditPlus 프로그램에 붙여 넣기를 한 상태입니다.
(이 프로그램은 우리 홈의 자료실에 있습니다.)


"브라우져로 보기" 버튼을 클릭하니 정상대로 출력이 되는군요.


이것을 홈 게시판에서 "쓰기" 버튼을 누르고 "붙여넣기"를 했습니다.


자, 그럼 파란색으로 표시가 된 부분을 삭제를 해 볼까요?


이미지에서 말한 바와 같이 정상적인 태그에서 테이블을 닫는 태그 하나를 삭제를 해보겠습니다.


이크!! 이것도 우리를 깜짝 놀라게 하는 것 중의 하나이지요?
이것은 태그만을 이용하여 게시물을 작성한 경우게 생기는 것으로서
이럴 때는 게시물의 마지막에 점하나를 찍어 주시면 됩니다.


무언가 이상하지요? 그렇습니다. 게시물이 반쪽으로 줄어 버렸네요?


이러한 경우를 당하면 무담시 죄를 짓는 것 같이 가슴이 콩닥거리고
후다닥 도망을 가고 싶은 생각이 들곤 합니다.
테이블을 두 번을 열었는데 한 번만 닫은 경우에 발생을 하는 현상입니다.
그럼 대처는? 당연하게 테이블을 정상적으로 닫아 주면 됩니다. 쉽지요?


그럼, 이제는 반대로 테이블을 한 번 더 닫을 경우에는
어떠한 일이 벌어지는지 확인을 해 볼까요?


무엇이 잘못된 것인지 확인을 하셨나요?
이것을 발견했다면 님께서는 매우 민감한 "눈"을 가지신 분입니다.


예. 게시판 목록이 페이지 전체로 늘어나 버렸지요?


자 그럼 결론을 내려 봅니다.
테이블 태그를 사용하여 게시물을 올릴 때에는 테이블을 여는 만큼만 닫아 주어야 한다.
따라서 게시판의 목록이 페이지 전체로 늘어날 경우에는 테이블을 여는 것보다
더 닫았다는 증거이고(두번 또는 그보다 훨씬 많은 경우에도 같은 증상이 생깁니다.),
게시물이 반쪽으로 될 경우에는 테이블을 닫지 않았다는 반증입니다.

간혹 이러한 질문을 하시는 분들이 계십니다.
"다음(daum)같은 곳에서는 아무 이상이 없이 잘 올라가는데 왜 이 홈에서만 이러한 현상이 나는 것일까요?" 하는 질문 말입니다.
그것은 위에서 말씀을 드리는 바와 같이 우리 홈페이지는 노프레임으로 형성이 된
공간이기 때문에 그렇습니다.
노프레임에 관하여는 이미 많은 설명을 하였기 때문에 이곳에서는 더 이상 설명을 드리지 않겠습니다.

이제는 이것으로 인하여 당황을 하는 경우는 없겠지요?
여기까지 오시느라고 수고가 많으셨습니다.

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
215818   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
249422   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
231225 14 2006-09-14 2010-08-19 12:45
263 CSS 여러방법의 창닫기
오작교
13505 23 2006-04-16 2006-04-16 21:41
<HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987"> <STYLE>BODY { FONT-SIZE: 12px } TD { FONT-SIZE: 12px } </STYLE> <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD> <BODY> <TABLE cellSpacing=1 cel...  
262 Script 홈페이지 접속시간 날자 표시하기
오작교
16011 32 2006-04-16 2006-04-16 21:42
<SCRIPT LANGUAGE="JavaScript"> <!-- Stamp = new Date(); document.write('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getYear() + '<br>'); var Hours; var Mins; var Time; Hours = Stamp.getHours(); if (Hours >= 12) { Time = " P.M....  
261 Script 스크로바 색상에 애니메이션 만들기
오작교
15479 27 2006-04-16 2006-04-16 21:44
<!---------- 스크롤바 색상 에니메이션 스크립트 소스 여기서부터 --------> <body> <script language="javascript"> <!-- var color1='#006633'; // 스크롤바에 처음 나타나는 색 var color2='#FFFF99'; // 스크롤바에 두번째 나타나는 색 var steps=30; //...  
260 Script 심플한 펼침메뉴
오작교
16245 15 2006-04-16 2006-04-16 21:58
사이에 body에 body 사이에 menu 1 @submenu 1 @submenu 2 @submenu 3 menu 2 @submenu 1 @submenu 2 @submenu 3 menu 3 @submenu 1 @submenu 2 @submenu 3 menu 4 @submenu 1 @submenu 2 @submenu 3 menu 5 @submenu 1 @submenu 2 @submenu 3 * 메뉴 추가 방...  
259 Script 문서 열림과 동시에 팝업 창 띄우기
오작교
16140 20 2006-04-16 2006-04-16 22:13
<script> function popup() { window.open("/popup.html","","width=460,height=640,resizable=no,scrollbars=no,statusbar=no"); } </script> body에 onload="popup();"  
258 Script 말풍선 투명하게 만들기
오작교
17089 25 2006-04-16 2006-04-16 22:15
<html> <head> <script language="JavaScript"> <!-- function alt( msg, _width, _height ){ var _style = alt_div.style; if( msg != null ){ alt_div.innerHTML = msg; _style.visibility = "visible"; if( _width != null ){ if( alt_div.offsetWidth > _w...  
257 Script 이미지 싸이즈대로 새창띄우면서 풍선도움말 넣고, 창닫기 1 file
오작교
14829 34 2006-04-16 2015-05-12 13:48
 
256 Script 상태바에 날짜, 시간 안내글 표시하기
오작교
16068 35 2006-04-16 2006-04-16 22:19
아래의 소스를 <body></body>사이에 넣어 주세요 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var message = " " message +="--- 여유^^*"; message +="-- 여유로운 삶은 자신이 만들어 갑니다."; message +="-- 늘 여유로운 생활이 되시기를 !"; //문구 삽입 ...  
255 Script 인증된 회원만 입장하는 스크립트
오작교
15407 37 2006-04-16 2006-04-16 22:23
<head> 에 <SCRIPT LANGUAGE="JavaScript"> <!-- function password() { var count = 0; var pass = prompt('비밀번호를 입력하세요',''); while(count <=2 ) { if (pass == "1234") { alert('회원님 안녕하세요?'); location.href="요기에 열릴 파일경로를 쓰...  
254 Script 폼 입력값 내용을 확인
오작교
15287 33 2006-04-16 2006-04-16 22:23
예제보기 https://www.yeoyoo.com/act1.html 입력문서와 출력문서 2개가 필요합니다. 1. 입력할 문서 <body>사이에 <FORM name=form1 ACTION="출력문서 이름"> <table cellpadding="3" cellspacing="1" width="541" bgcolor="#ffccff" align="center"><tr> <td...  
253 Script 클릭시 폼안의 전체문장이 선택
오작교
16123 15 2006-04-16 2006-04-16 22:27
예제보기 https://www.yeoyoo.com/insert.html <body>사이에 <table cellpadding="3" cellspacing="1" width="458" bgcolor="#9966CC" align="center"><tr> <td bgcolor="#F0D3F0" height="25" width="98%"> <p align="center"><b>배너 삽입 소스 클릭한번으로...  
252 Script 한번에 링크 테두리 없애기
오작교
16145 18 2006-04-16 2006-04-16 22:52
흔히 링크버턴 등에 생개는 점선을 없애기 위해서 onfocus='this.blur()' 라는 태그를 많이 쓰고 계시죠? 아래 소스는 단 한번 입력만으로 문서 전체에 점선 테두리를 없애는 소스입니다. <body> 와 </body> 사이에 입력 하세요. <script language="JavaScript...  
251 Script 부드럽게 펼쳐지는 가로 메뉴
오작교
16572 15 2006-04-16 2006-04-16 22:56
is = {}; is.agent = navigator.userAgent.toLowerCase(); is.ie4 = (is.agent.indexOf("msie 4") != -1); is.ie5 = (is.agent.indexOf("msie 5") != -1); is.ie55 = (is.agent.indexOf("msie 5.5") != -1); is.ie6 = (is.agent.indexOf("msie 6") != -1); is...  
250 Script 반짝거리는 글씨 1
오작교
18080 10 2006-04-16 2006-04-16 23:07
반짝거리는 글씨 1. 먼저 <head> 와 </HEAD> 사이에 아래 스크립트를 넣습니다. <script> function doBlink() { var blink = document.all.tags("BLINK") for (var i=0; i < blink.length; i++) blink[i].style.visibility = blink[i].style.visibility == ""...  
249 Script 타이핑 되듯이 써지는 글자 1
오작교
13723 9 2006-04-16 2006-04-16 23:16
 
248 CSS 글자정렬
오작교
13674 24 2006-04-17 2006-04-17 14:11
웹상에서 문서를 작성하다 보면 좌측 뿐만 아니라 우측에도 반듯하게 정렬이 되었으면 할 때가 있습니다. 그럴 때 사용할 수 있는 간단한 CSS입니다. <div style='text-align:justify'> 글내용 </div>  
247 CSS 마우스를 올리면 변하는 색상
오작교
17177 41 2006-04-17 2006-04-17 14:58
위의 테이블 위에 마우스커서를 각각 올려보세요. 마우스커서가 테이블에 올라가면 셀이나 줄, 혹은 테이블 전체의 색이 변해서 선택되어진 곳을 명확하게 해 줍니다. 의 테이블 안(td, tr, table 중 선택)에 아래 소스를 추가합니다. onmouseover="this.style...  
246 CSS 배경그림 고정하기
오작교
13688 21 2006-04-17 2006-04-17 15:04
스크롤바를 내려도 배경그림이 움직이지 않고 글씨만 올라갑니다. <body>안에 bgproperties="fixed" 만 추가하면 배경 이미지가 고정됩니다. <body bgproperties="fixed"> 간단하죠? 스타일시트로 배경그림 고정시키기 에서는 이것보다 다양한 방법으로 배경그...  
245 일반 소스보기를 금지하려면
오작교
13754 6 2006-04-17 2006-04-17 15:22
소스보기를 금지하려면 body를 다음과 같이 수정하세요. <body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">  
244 Script 우측키 사용금지하는 소스
오작교
16361 7 2006-04-17 2006-04-17 15:24
<!-- body와 body 사이에 넣는다> <script language="JavaScript"> <!-- function click() { if ((event.button==2) || (event.button==3)) { alert('눌러서 뭐하게?'); } } document.onmousedown=click if (navigator.appName == "Netscape") { document.capt...  
XE Login