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

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

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

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

댓글
2008.08.20 11:27:01 (*.96.31.61)
장길산
상세한 설명 해주셔서 고맙습니다.
수고하셨습니다.
번호
글쓴이
공지 HTML HTML 기초 다지기 4
오작교
214693   2008-06-17 2010-08-19 13:08
공지 HTML HTML과 CSS의 종합 정리 1
오작교
233848   2007-10-01 2010-08-19 12:45
공지 일반 스타일시트의 총정리
오작교
229246 14 2006-09-14 2010-08-19 12:45
263 HTML A태그를 이용하여 새 창을 띄우기
오작교
19810 32 2006-09-20 2006-09-20 15:07
<a href="https://주소" onclick="window.open(this.href, '_blank'); return false;">클릭</a> 이미지 링크일 경우 <a href="https://주소" onclick="window.open(this.href, '_blank'); return false;"><img src="이미지주소" alt="" style="width:100px;hei...  
262 Script 주민등록번호 확인 스크립트
오작교
17176 32 2006-05-06 2006-05-06 20:37
주민번호를 넣고 체크 버튼을 눌러서 확인해 보세요 - '9') { i3=i3+1 } } if ((str_jumin1 == '') || ( i3 != 0 )) { error(jumins.jumin1,'주민등록번호가 잘못되었습니다.\n\n다시입력해주세요!'); } var i4=0 for (var i=0;i'9') { i4=i4+1 } } if ((str_j...  
261 Script 홈페이지 접속시간 날자 표시하기
오작교
15971 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....  
260 CSS "즐겨찾기에 추가" 버튼 만들기
오작교
12835 32 2006-04-16 2006-04-16 21:23
헤드부분에 <script language="JavaScript1.2"> var url="즐겨찾기에 추가할 주소" var title="즐겨찾기에 표시할 타이틀" function addfavorites() { if (document.all) window.external.AddFavorite(url,title) } </script> 클릭할 버튼이나 이미지,텍스트에...  
259 일반 스위시에서 직접 물결효과 만들기(펌)
오작교
15525 32 2005-12-27 2005-12-27 10:40
 
258 PHP Subject 초보자를 위한 PHP 강좌 15부 - 그 밖의 제어문
오작교
17369 31 2007-03-14 2007-03-14 22:25
안녕하세요~~ 강좌를 요즘 못 올려서 죄송합니다. 오늘은 include 제어문에 대해서 알아보겠습니다. 영어 단어 "include" 는 "..을 포함하다." 라는 뜻을 가지고 있죠. PHP 에서의 include 구문도 위의 의미와 비슷하게 사용됩니다. 아래의 간단한 예제 코드와...  
257 일반 윈XP 알아두면 유용한 60가지 1
오작교
18022 31 2005-11-04 2005-11-04 10:18
1. 여러 파일 이름을 한꺼번에 바꾸자 윈도우즈 XP는 여러 개의 파일 이름을 한꺼번에 바꾸는 재주가 있다. 파일 형식이 서로 달라도 같은 이름을 붙일 수 있다. 이름을 바꿀 파일을 모두 고르고 마우스 오른쪽 버튼을 누른 다음 ‘이름 바꾸기’를 고른다. 윈...  
256 일반 음악을 링크해보자 3
오작교
19556 30 2005-03-09 2005-03-09 18:10
음악을 링크해보자! 우선 소리바다의 음악은 인터넷상에서 사용할수 있는 상태가아닙니다.. 인터넷에서는 계정에 올려져 있어야지만 경로를 알수있고 경로를 알아야만 이용할수있습니다.. [bgsound src="배경음악파일주소" loop="infinite"] [embed src="배경...  
255 CSS TD속에 배경을 고정하기
오작교
13831 28 2006-05-06 2006-05-06 20:24
TD속에 배경고정 <table align="center" border="1" width="256" height="230"> <tr> <td height="256" style="background color:white url(images/aaa.jpg) no-repeat fixed left bottom;" width="230"> </td> </tr> </table>  
254 CSS 투명한 아이프레임 만들기
오작교
11888 28 2006-04-17 2006-04-17 15:53
iframe 으로 페이지를 삽입하게 되면 기본적으로 전체 페이지 속에 또 다른 페이지가 삽입됩니다. 물론 그 페이지에 배경이 있었다면.. iframe 때문에 가려지게 됩니다. 그런데..꼭 그렇지만두 않다는 사실..~!! 즉.. 투명한 아이프레임을 만들수도 있다는... ...  
253 CSS 브라우져의 스크롤 없애기
오작교
16011 28 2006-04-16 2006-04-16 21:22
브라우저창의 스크롤 트랙을 없애서 트랙사이즈인 20픽셀만큼을 더 사용하기입니다,, 다음을 헤드나 바디에 넣으세요,, <script language="JavaScript"> function get_IEscroll(choice) { if (document.all) { document.body.scroll = choice; } } //--> </scr...  
252 HTML 글자에 그라이언트 효과 주기
오작교
15882 27 2006-09-14 2006-09-14 11:44
<span style="COLOR:#4F4F4F; FILTER:Alpha(opacity=65,finishopacity=0,style=1,startX=0,startY=10,finishX=0,finishY=450); FONT-FAMILY: 바탕; FONT-SIZE: 12pt; FONT-WEIGHT: bold; HEIGHT: 10px; LINE-HEIGHT: 200%; WIDTH: 300px"> 글자에 그래디언트 ...  
251 Script 스크로바 색상에 애니메이션 만들기
오작교
15338 27 2006-04-16 2006-04-16 21:44
<!---------- 스크롤바 색상 에니메이션 스크립트 소스 여기서부터 --------> <body> <script language="javascript"> <!-- var color1='#006633'; // 스크롤바에 처음 나타나는 색 var color2='#FFFF99'; // 스크롤바에 두번째 나타나는 색 var steps=30; //...  
250 일반 스위시로 테두리 있는 글자 만들기 1
오작교
16821 27 2006-01-24 2006-01-24 11:29
스위시로 글자의 테두리 만들기 스위시로 글자의 테두리를 만드는 법에 관하여 시작을 하겠습니다. 포토샵과는 달리 스위시로 글자의 테두리를 만들면 조금은 보기가 좋지 않습니다. 1. 첫 번째 : 스위시에 글자를 씁니다. 글자의 크기는 적당하게 하시면 됩...  
249 Script 웹문서에 페이지 로딩중 효과
오작교
15347 26 2006-05-06 2006-05-06 20:34
로딩이 길어지는 문서에 페이지가 다 뜨기전에 '로딩중' 이라는 글씨를 나오게 합니다. 헤드부분에 <script language=javascript> n = document.layers ie = document.all function hide() { if (ie || n) { if (n) document.Load.visibility = "hidden" else ...  
248 CSS Filter Grow 적용하기
오작교
12438 25 2006-05-06 2006-05-06 20:23
엄숙한 시간 지금 이 세상 어디에선가 우는 사람은, 까닭없이 이 세상에서 우는 사람은 내가 슬퍼 울고 있다. 지금 이 밤 어디에선가 웃는 사람은, 까닭없이 이 밤에 웃는 사람은 나를 비웃고 있다.지금 이 세상 어디에선가 가고 있는 사람은, 까닭없이 이 세...  
247 CSS Font의 속성값-2
오작교
12307 25 2006-05-06 2006-05-06 10:18
☞ padding-top , padding-left , paddding-bottom , padding-right 앞페이지에서 배운 margin하곤 비슷한 기능인데요...역시 여백조정 속성입니다. 그러나 padding속성은 margin속성에 비해 글자나 요소간에 겹치게 할 수가 없답니다. margin보다는 그리 많이 ...  
246 CSS 스타일 시트 활용(1) - 문서의 가독성을 높여 보자
오작교
12273 25 2006-04-17 2006-04-17 16:08
여기에서는 행간과 글자크기 그리고 폰트 조절로 홈페이지의 가독성을 높이는 방법을 알아볼까 합니다. 글의 행간을 조절하면 홈페이지에 가독성이 좋아집니다. 글이 따닥따닥 붙어 있는것 보다두 말이지요 자 이부분의 글자 간격을 보세요 너무 글이 딱딱 붙...  
245 Script 말풍선 투명하게 만들기
오작교
17010 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...  
244 CSS 현재 문서의 소스를 메모장에 보여줍니다
오작교
13608 25 2006-04-16 2006-04-16 21:38
현재 문서의 소스를 메모장을 띄워서 보여 줍니다. <p align="center"> <input type="button" name="formbutton1" value="소스를 보아요" onclick="gogo()"> </p> <script language="JavaScript"> <!-- function gogo(){ location.href="view-source:" + locat...  
XE Login